PDA

View Full Version : GridPanel not refreshing even with updated ArrayStore



cliveg
17 Feb 2010, 8:48 AM
Hi Everyone,

I'm having trouble trying to get my GridPanel to refresh when it recieves new data. I thought it was supposed to update/refresh automatically. I can see via Firebug that my array store has updated and that the GridPanel has received the data. My GridPanel is sitting inside a TabPanel - do I somehow need to refresh this to display the updated data?

The 'badDog' callback is called on tab activate and as part of a form submit. I'm using a plain Ajax call as I've been unable to get my array store to work via the url parameter.

The line 'worklistGrid.render('worklist_progress');' is there because I couldn't get the GridPanel to display when selected via the tab whilst it always displayed via the form submit.

'worklist_progress' is the id of my tab in the tabpanel.

Please find my code listed below. Any help much appreciated! Thanks, Clive


var badDog = function (response) {

// get the worklist json data via restful interface
Ext.Ajax.request({
method: 'GET',
url: '/eaapm/1.0/worklists?limit=10',
success: doWorklist,
failure: function () {
Ext.Msg.alert("Failed to connect to server.\nPlease try again.");
}
}); // ajax request

} // end of bad dog


// build the data store based on the response
var doWorklist = function (response) {

var worklistData = eval('(' + response.responseText + ')');

console.log('we is in doWorklist');
// we create an array store to keep our returned data in for easier manipulation
var myWorklists = new Ext.data.ArrayStore({
data: worklistData,
storeId: 'myWorklists1',
fields: [
'app_name',
'asset_name',
{name: 'download_expiry_date', type: 'date', dateFormat: 'Y-m-d'},
'error_code',
'error_message',
'estimated_completion_time',
'id',
'no_of_packages',
'percentage_complete',
'random',
{name: 'storage_expiry_date', type: 'date', dateFormat: 'Y-m-d'}
]
});

console.log(myWorklists);

var worklistGrid = new Ext.grid.GridPanel({
store: myWorklists,
autoExpandColumn: 'messay',
columns: [
{ header : 'Work ID', sortable : false, menuDisabled : true, dataIndex : 'id', width: 50 },
{ header : 'Asset', sortable : false, menuDisabled : true, dataIndex : 'asset_name', width: 120 },
{ header : 'App Streamer', sortable : false, menuDisabled : true, dataIndex : 'app_name', width: 90 },
{ header : 'Pckgs', sortable : false, menuDisabled : true, dataIndex : 'no_of_packages', width: 40 },
{ header : 'Download Exp', sortable : false, menuDisabled : true, dataIndex : 'download_expiry_date', renderer: Ext.util.Format.dateRenderer('d/m/Y'), width: 90 },
{ header : 'Storage Exp', sortable : false, menuDisabled : true, dataIndex : 'storage_expiry_date', renderer: Ext.util.Format.dateRenderer('d/m/Y'), width: 90 },
{ header : 'Err Code', sortable : false, menuDisabled : true, dataIndex : 'error_code', width: 0, hidden: true },
{ header : 'Err Mess', id: 'messay', sortable : false, menuDisabled : true, dataIndex : 'error_message' },
{ header : 'Cmp.(secs)', sortable : false, menuDisabled : true, dataIndex : 'estimated_completion_time', width: 80 },
{ header : '% complete', sortable : false, menuDisabled : true, dataIndex : 'percentage_complete', width: 90 },
{ header : 'rnd', sortable : false, menuDisabled : true, dataIndex : 'random', hidden: true, width: 0 }
],
stripeRows: true,
height: 350,
});

Ext.getCmp('worklist_progress').add(worklistGrid);
Ext.getCmp('mainTabPanel').setActiveTab(1);
if (worklistGrid.view) {
worklistGrid.view.refresh();
}
worklistGrid.render('worklist_progress');
console.log('Worklist rendered? '+worklistGrid.rendered);
worklistGrid.view.refresh();

} // end of doWorklist

cliveg
18 Feb 2010, 7:34 AM
Hi again,

I found a solution. Turns out I needed to load the datastore to get it to refresh. How it loaded first time though is beyond me :-)


var workReader = new Ext.data.ArrayReader({}, [
'app_name',
'asset_name',
{name: 'download_expiry_date', type: 'date', dateFormat: 'Y-m-d'},
'error_code',
'error_message',
'estimated_completion_time',
'id',
'no_of_packages',
'percentage_complete',
'random',
{name: 'storage_expiry_date', type: 'date', dateFormat: 'Y-m-d'}
]);

// get the data
var workProxy = new Ext.data.HttpProxy({
//where to retrieve data
url: '/eaapm/1.0/worklists?limit=10', //url to data object (server side script)
method: 'GET'
});

// create the data store.
var worklistStore = new Ext.data.Store({
storeId: 'worklistStorey',
reader: workReader,
proxy: workProxy
});

worklistStore.load();

// selection model
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
});

var worklistGrid = new Ext.grid.GridPanel({
store: worklistStore,
id: 'worklistGrid',
autoExpandColumn: 'messay',
columns: [
{ header : 'Work ID', sortable : false, menuDisabled : true, dataIndex : 'id', width: 50 },
{ header : 'Asset', sortable : false, menuDisabled : true, dataIndex : 'asset_name', width: 120 },
{ header : 'App Streamer', sortable : false, menuDisabled : true, dataIndex : 'app_name', width: 90 },
{ header : 'Pckgs', sortable : false, menuDisabled : true, dataIndex : 'no_of_packages', width: 40 },
{ header : 'Download Exp', sortable : false, menuDisabled : true, dataIndex : 'download_expiry_date', renderer: Ext.util.Format.dateRenderer('d/m/Y'), width: 90 },
{ header : 'Storage Exp', sortable : false, menuDisabled : true, dataIndex : 'storage_expiry_date', renderer: Ext.util.Format.dateRenderer('d/m/Y'), width: 90 },
{ header : 'Err Code', sortable : false, menuDisabled : true, dataIndex : 'error_code', width: 0, hidden: true },
{ header : 'Err Mess', id: 'messay', sortable : false, menuDisabled : true, dataIndex : 'error_message' },
{ header : 'Cmp.(secs)', sortable : false, menuDisabled : true, dataIndex : 'estimated_completion_time', width: 80 },
{ header : '% complete', sortable : false, menuDisabled : true, dataIndex : 'percentage_complete', width: 90 },
{ header : 'rnd', sortable : false, menuDisabled : true, dataIndex : 'random', hidden: true, width: 0 }
],
stripeRows: true,
height: 350
}); // worklistGrid

var mainWin = new Ext.Window({
title: "Evie's Amazing Automatic Packaging Machine",
closable: false,
width: 820,
height: 300,
border: true,
plain: true,
items: [ myTabPanel ]
});

mainWin.show(this);

} // end of startApp function

// even more callback functions

// callback function to get data from main
var badDog = function (response) {
Ext.getCmp('mainTabPanel').setActiveTab(1);
}

var goodDog = function () {

var worklistStore = Ext.StoreMgr.lookup('worklistStorey');
worklistStore.load();
var worklstGrid = Ext.getCmp('worklistGrid');
var progressTab = Ext.getCmp('worklist_progress');
progressTab.add(worklstGrid);
worklstGrid.render('worklist_progress');

} // end of goodDog