PDA

View Full Version : HELP! GridPanel inside a Container cannot load data (RESOLVED)



markjlyon
12 May 2010, 10:14 AM
The GridPanel is not capable of loading data from a url when it is inside a Container.

Either I must not understand something extremely basic, or this is a show stopper bug in Ext.

I have a BASIC JsonStore that successfully feeds controls OTHER than a GridPanel inside a Container.

So I know that the Json data is good.


var JsonStore_appl_session = new Ext.data.JsonStore({
url: 'http://www.blah.com/TableDataStore.aspx'
})

If a GridPanel is in a Container it simply will not load any Store if that store's source is from a url and not an array.

The problem as I understand it is that there is a BUG in the GridPanel if you don't instantiate it using a var statement. This is because if I do it with a var it always works. If I do it inside a Container it always fails.

This works 100% of the time and is utterly useless because I can't insert it into a Container and I can't do a renderTo because the destination Container is dynamically created at the same time as the GridPanel without an id or name:


var newGrid = new Ext.grid.GridPanel({
store: new Ext.data.JsonStore({
url: 'http://www.blah.com/TableDataStore.aspx'
}),
columns: [
{ id: 'session', header: "Last Update Process", width: 200, sortable: true, dataIndex: 'last_update_process_id' },
{ header: "Last Update User", width: 100, sortable: true, dataIndex: 'last_update_user_id' },
{ header: "Last Update Timestamp", width: 150, sortable: true, dataIndex: 'last_update_ts' },
{ header: "Work Order", width: 100, sortable: true, dataIndex: 'work_order_id' },
{ header: "Session Start Timestamp", width: 200, sortable: true, dataIndex: 'session_start_ts' },
{ header: "Placestamp Start Geospatial Coordinates", width: 200, sortable: true, dataIndex: 'placestamp_start_gsc_text' },
{ header: "Session Stop Timestamp", width: 200, sortable: true, dataIndex: 'session_stop_ts' },
{ header: "Placestamp End Geospatial Coordinates", width: 200, sortable: true, dataIndex: 'placestamp_end_gsc_text' }
],
iconCls: 'icon-grid',
viewConfig: {
forceFit: true
}
});

This fails 100% of the time but is exactly what I need because I need to create the GridPanel inside the Container control at the same time as the Container:


...
title: 'Appl Session',
iconCls: 'no-icon',
closable: true,
layout: 'fit',
items: [
new Ext.grid.GridPanel({
store: new Ext.data.JsonStore({
url: 'http://extdata.certusview.com/TableDataStore.aspx?table=appl_session'
}),
columns: [
{ id: 'session', header: "Last Update Process", width: 200, sortable: true, dataIndex: 'last_update_process_id' },
{ header: "Last Update User", width: 100, sortable: true, dataIndex: 'last_update_user_id' },
{ header: "Last Update Timestamp", width: 150, sortable: true, dataIndex: 'last_update_ts' },
{ header: "Work Order", width: 100, sortable: true, dataIndex: 'work_order_id' },
{ header: "Session Start Timestamp", width: 200, sortable: true, dataIndex: 'session_start_ts' },
{ header: "Placestamp Start Geospatial Coordinates", width: 200, sortable: true, dataIndex: 'placestamp_start_gsc_text' },
{ header: "Session Stop Timestamp", width: 200, sortable: true, dataIndex: 'session_stop_ts' },
{ header: "Placestamp End Geospatial Coordinates", width: 200, sortable: true, dataIndex: 'placestamp_end_gsc_text' }
],
iconCls: 'icon-grid',
viewConfig: {
forceFit: true
}
})
]
...

So I either need to get past this glaring bug in Ext and its inability to create GridPanels inside of other Containers

OR

I need an alternate solution that does not use renderTo that allows me to attach a copy of an existing GridPanel into a new nameless Container at the time it is created.

How do I clone an existing GridPanel and insert it into the items of a new container?

Thanks in advance

I resolved this issue by moving the location of the JsonStore.load() to the click listener so it fires directly before the tab with the GridPanel gets created. Voila!