How To: Auto Resize GridPanel Column Width + Read all Column Values in a Grid in Ext JS4

Question

How To: Auto Resize GridPanel Column Width + Read all Column Values in a Grid in Ext JS4

Problem 1: Is there anyway I can automatically set gridpanel column width, based on retruned column data values length (column width = max data value string length)

Problem 2: To achive above (and for other reasons), I need to know how i can get values of particular grid column? Once i know the logic, should implement it as column renderer function? Would column renderer function is called every time, a data record is read (then its overkill)?, in that case is there any other function I can override?

Most of the solutions (Grid Column Width Calculator, autoResizeColumns,etc) I find on the web are for previous versions, am using EXTJS 4 version.

Thanks in advance Scott

Answer 1

1. Unfortunately, no. Your best bet would be to set specified widths for data that was generally fixed, and then set the other columns using flex. (or write / wait for a plugin).

2. Values are not stored in the grid, they are in the grid's store. You would simply need to loop the store in question and grab all the values from the specified column. For example:

   Ext.Array.each(Ext.StoreManager.get('myStore').getRange(0), function(record){
       console.log(record.get("myColumnName")); 
   });
   

Answer 2

There is actually an Extjs 4 plugin to automatically resize grid columns based on the width of the contents as well as the header.

Here is the link: Extjs 4 column auto resize plugin

Answer 3

I have found a temporary fix to wrap Columns using CSS, as described here: ExtJS 4 - Wrapping the column headers in grid panel

Add the following to ext js css

.x-column-header-inner {
    line-height: normal;
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    text-align: center;
    top: 20%;
}

.x-column-header-inner .x-column-header-text {
    white-space: normal;
}