PDA

View Full Version : Newb question - Auto expand grid column



kelv1n
20 Oct 2011, 8:57 AM
Hi Everyone

I'm an experienced backend developer, but complete beginner when it comes to javascript and extjs. I'm just playing around trying to learn.

I've managed to get a Grid displaying and loading data from a server using a JSON store, but I can't for the life of me get the column(s) to auto expand. I've read that only 1 column can be set to auto expand.

Any advice would be appreciate, my code is below.. don't laugh it was pieced together via trial and error, there are probably unrequired items, this is set as an item of a ViewPort. It renders fine and loads data, but it just won't auto expand.

Additionally if I set a % width on the 'messages' column it does not render than column contents (though the others render fine).


var grid_panel = {
region: 'center',
xtype: 'gridpanel',
title: 'Syslog',
store:store,
closable: true,
autoExpandColumn: 'message',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'generated',
text: 'generated',
id : 'generated',
columnId : 'generated',
},
{
xtype: 'gridcolumn',
dataIndex: 'host',
text: 'host',
id : 'host',
columnId : 'host',
},
{

xtype: 'gridcolumn',
dataIndex: 'message',
text: 'message',
id : 'message',
columnId : 'message',
} va
],
viewConfig: {
stripeRows: true
}

}

Many Thanks

skirtle
20 Oct 2011, 11:50 AM
The documentation for grid columns is here:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column

If you look at the section 'Setting Sizes' you'll see brief mention of how to do column widths. Percentage values are not supported as such. You have two options. Firstly, you can set a width in pixels:


{
...
width: 200
}

The other option is to use flex. Flex values are relative to each other, so if you have 2 columns both with the same flex value they will both have the same width. Flexed columns will stretch to fit the available width in your grid.

Only allowing 1 auto-expand column is no longer true in ExtJS 4. You seem to have been reading an ExtJS 3 guide.

For example. If you want the first column to be width 200 and for the other two columns to fill the remaining space you could do the following:


{
...
width: 200
}, {
...
flex: 1
}, {
...
flex: 1
}

In this example the two flexed columns would be the same width but you can vary the flex values as you see fit. If you prefer to work in percentages then you could set the flex values to both be 50, which would be equivalent.

kelv1n
21 Oct 2011, 12:33 AM
Thanks Skirtle :)

kamleshpra995
11 Sep 2014, 11:41 PM
// Plugin to autosize grid columns to the width of the widest content by dblclicking the header split// Plugin to autosize grid columns to the width of the widest content by dblclicking the header splitExt.ux.plugins.ColumnAutoResizer = Ext.extend(Ext.util.Observable, { init: function (grid) { this.grid = grid; this.view = grid.getView(); this.cm = grid.getColumnModel(); grid.on('render', this.initEvents, this); }, initEvents: function () { this.grid.getStore().on("load", this.changeCoumnWidth, this); }, changeCoumnWidth: function (store, records, options) { if (this.view.headerDisabled || !this.view.hasRows()) { return; } var width = 0, oldWidth = 0, column, newWidth = 0; var columnsCount = this.grid.colModel.config.length; this.grid.suspendEvents(); for (index = 0; index < columnsCount; index++) { oldWidth = width = this.view.getHeaderCell(index).firstChild.scrollWidth; for (var i = 0, l = this.grid.store.getCount() ; i < l; i++) { column = Ext.fly(this.view.getCell(i, index)); newWidth = this.view.getCell(i, index).firstChild.scrollWidth; width = Math.max(width, newWidth); } if (width != oldWidth) { this.view.onColumnSplitterMoved(index, width);// set the column width to maximum } } this.grid.resumeEvents(); }});