PDA

View Full Version : Problem while loading a store into a datagrid.



marxan
21 Jun 2012, 7:49 AM
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
21 Jun 2012, 8:17 AM
You grid is not ready ...



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

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

});

});



Regards,
Scott.

marxan
21 Jun 2012, 11:45 PM
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
21 Jun 2012, 11:47 PM
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
22 Jun 2012, 1:17 AM
You can set autoLoad (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-cfg-autoLoad) to true in store config.

scottmartin
22 Jun 2012, 5:38 AM
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.