Possible timing issue with Grid

[ripemeaters]

Hello,

I am fairly new to this site and development but have used the resources here since just before Alpha. I love these tools and have much praise for Jack and the development team!

I created an alpha-3,rev-4 Grid with an array-based Data.Store and about 12 columns. "Most" of the time it renders fine, but other times, I get an "Ext.grid.ColumnModel has no properties" error in Firebug. After much deliberation I am guessing that in the "failing" cases, it tries to create the grid before the ColumnModel is finished being created, so I see this as a timing issue. Am I missing something here?

Any suggestions or insight would be much appreciated. Unfortunately, I cannot display the actual code, but here is an alternate version:

This "snippet" of code is on a page that is loaded into another page's TabPanel, using UpdateManager, with loadScripts = true, and setDefaultUrl(). It is executed in the 'init' portion of a function. The Alpha includes are declared in the "parent" page.



...

arrData = [
["dwebb", "Daphne", "Webb", "Green", "England", "Up", 0.00, "One-Year", "3/1/2006", "10/20/2007", "5/5/2006", 0],
["jacksj", "Jermaine", "Jackson", "Red", "China", "Down", 0.00, "Monthly", "3/1/2006", "10/20/2007", "5/5/2006", 0],
["crodrig", "Clare", "Rodriguez", "Blue", "Poland", "Up", 0.00, "Two-Year", "3/1/2006", "10/20/2007", "5/5/2006", 0]
];

dStore = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(arrData),
reader: new Ext.data.ArrayReader({id: 0}, [
{name: 'nick'},
{name: 'first'},
{name: 'last'},
{name: 'color'},
{name: 'country'},
{name: 'updown'},
{name: 'credit', type: 'float'},
{name: 'subscribe'},
{name: 'birth', type: 'date', dateFormat: 'd/m/y'},
{name: 'signup', type: 'date', dateFormat: 'd/m/y'},
{name: 'duedate', type: 'date', dateFormat: 'd/m/y'},
{name: 'years', type: 'int'}
])
});

dStore.load();

function formatBoolean(value) {
return value ? 'Yes' : 'No';
}

cModel = new Ext.grid.ColumnModel([
{header: "Nickname", width: 100, sortable: true, dataIndex: 'nick'},
{header: "First Name", width: 90, sortable: true, dataIndex: 'first'},
{header: "Last Name", width: 90, sortable: true, dataIndex: 'last'},
{header: "Color", width: 180, sortable: true, dataIndex: 'color'},
{header: "Country", width: 90, sortable: true, dataIndex: 'country'},
{header: "Up or Down", width: 90, sortable: true, dataIndex: 'updown'},
{header: "Balance", width: 50, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'credit'},
{header: "Subscription", width: 100, sortable: true, dataIndex: 'subscribe'},
{header: "Birthday", width: 90, sortable: true, dataIndex: 'birth'},
{header: "Subscription Signup Date", width: 85, sortable: true, dataIndex: 'signup'},
{header: "Payment Due Date", width: 100, sortable: true, dataIndex: 'duedate'},
{header: "Years Subscribed", width: 80, sortable: true, dataIndex: 'years'}
]);

myGrid = new Ext.grid.Grid('someDiv', {
ds: dStore,
cm: cModel});

myGrid.render();

myGrid.getSelectionModel().selectFirstRow();

...


Thanks in advance!

ripemeaters

[tryanDLS]

If the code you posted is representative of your flow, then you have a problem. dStrore.load() is an async process. You can't just fire the method and continue processing. Depending on how long the load takes, you can't guarantee how the following code is affected. You need to either specify a callback for the load or add a handler for the 'load' event. You should be able to find examples in this or the Help forum.

[ripemeaters]

Hi Tim,

Thanks for responding. I took a look at the examples and found that the data store was loaded at the end. I also looked at the Help forum and found http://www.yui-ext.com/forum/viewtopic.php?t=4248 to be quite insightful, though I am not sure in the end if it applied exactly to my situation. I moved my "load" to the end, though I get the same error. As for callbacks, to my knowledge, loading the data store was the last thing I wanted to do. After further inspection, I am thinking that the problem could be elsewhere, so I am looking into that. Thanks for your help though!

ripemeaters

[Animal]

Loading won't be async using a MemoryProxy.

Ext.grid.ColumnModel is a constructor, and if that is undefined, it's because a script is not loaded.

Are you using ext-all.js, or are you trying to include a few selected script files?

Are you loading scripts in a weird way?

[ripemeaters]

Thanks Animal and Tim for all your help. After even closer inspection, apparently I was loading the scripts twice and did not realize it. A newbie error... Everything works great now!

ripemeaters