Problem while loading a store into a datagrid.

[marxan]

Hello,

I have the following code that display correctly my grid when I don't try to load the data.
Unfortunately as soon as I add the onRender to load my store I have an issue, in firebug my Json is correctly loaded so I guess this is a problem with the grid, maybe I don't use the correct way to load my grid when is rendered?

Here's the error I get:
Uncaught TypeError: Cannot read property 'addCls' of null


Ext.define('TAB.view.MetrSeriesGrid', {
extend: 'Ext.grid.Panel',
alias : 'widget.MetrSeries',
store: 'MetrSeriesStore',
/*onRender:function() {
this.store.load()
},*/
columns: [
{
header : 'Country',
// flex : 1,
// sortable : false,
dataIndex: 'CODESERIE'
},
{
header : '2001',
width : 75,
dataIndex: 'LABEISO'
}]

});

Thanks for any help.

Regards

[scottmartin]

You grid is not ready ...



Ext.define({ .. });
Ext.onReady() {

Ext.create({
listeners: {
afterlayout: function() { store.load(); }
}

});

});



Regards,
Scott.

[marxan]

Thanks for you answer Scott, but I don't understand why I have to use the Ext.onReady, I thought we used that in extjs3 and I suppose that I could use the onRender to decide what I need to do. And it's while I was writing these lines, that I remember we also have to afterRender instead of onRender, and now it works :-).

But I tried your code and it was not working. Could you explain me what the Ext.onReady() should do in a grid class (or give me a link to an explanation)

Thanks

[marxan]

To fill in a grid, the grid must first be created and then you can put the values in it. So we have to use afterRender.


extend: 'Ext.grid.Panel', alias : 'widget.MetrSeries',
store: 'MetrSeriesStore',
afterRender:function() {
this.store.load()
},
columns: [
{
header : 'Country',
dataIndex: 'CODESERIE'
},
{
header : '2001',
width : 75,
dataIndex: 'LABEISO'
}]

});

[redraid]

You can set autoLoad (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-cfg-autoLoad) to true in store config.

[scottmartin]

You need to make sure the DOM is ready when you are rendering. You can see this behavior in browsers where you try to draw panels, etc. If it is not ready, you will get partial drawing.

If you are using MVC, then you would use Application.launch()

I will verify afterlayout with the grid, but it fires after afterrender

Scott.