PDA

View Full Version : Ext.grid.Panel and Ext.grid.header.Container



davidverm
2 Jun 2013, 11:05 PM
Hi,

We are in the process of upgrading to EXTJS 4.2.1. In the past we have supplied the grid with our own header container that is extending the Ext.grid.header.Container where we have some functions that is called when users click on the column headers.

However with the latest version of EXTJS I get a Cannot call method 'getColumns' of undefined and Cannot read property 'childnodes' of null. When I read the documentation of the grid columns config then I understand that it should be possible to supply columns with a Ext.grid.header.Container configuration.

I've also tried to to supply a config to me.columns and not create an instance of my.grid.header.Container, but that seems to produce the same issue. It seems like rendering is treated differently or we are doing something wrong.

Have you got any pointers as to how I can approach this issue?

So the code:
Ext.define('my.grid.header.Container', {
extend: 'Ext.grid.header.Container',
alias: 'widget.mygridheaderCt'

});

Ext.define('my.grid.Panel', {
extend: 'Ext.grid.Panel',
...
initComponent: function () {
var me = this;

me.applyHeaderContainer();
me.callParent(arguments);
},

applyHeaderContainer: function () {
var me = this,
headerCt = Ext.create('My.grid.header.Container', {
items: me.columns,
//And some default values
});

me.columns = headerCt;
}
});

Thanks! :-)

davidverm
5 Jun 2013, 3:38 AM
Seems like I have misunderstood the documentation on the grid. The documentation say that the grid columns can receive a configuration object for an Ext.grid.header.Container.

And what I tried to do was to supply the columns config with an instance of our grid header container that is extending the Ext.grid.header.Container.

slemmon
5 Jun 2013, 11:12 AM
Instead of passing the header container instance to columns just pass the config you'd use to instantiate the header container.



Ext.define('my.grid.header.Container', {
extend: 'Ext.grid.header.Container',
alias: 'widget.mygridheaderCt'


});


Ext.define('my.grid.Panel', {
extend: 'Ext.grid.Panel',
...
initComponent: function () {
var me = this;


me.columns = me.applyHeaderContainer();
me.callParent(arguments);
},


applyHeaderContainer: function () {
var colCfg = {
defaults: {
flex: 1
},
items: [{
text: 'text',
dataIndex: 'foo'
}
]
};


return colCfg;
}
});