PDA

View Full Version : Help with Reloading Grid Data



JoePie
3 Dec 2011, 2:45 PM
We have modified "gridwindow.js" in the "Desktop" example given in ExtJs 4.02 to load the data for the grid from an external source. The question is, "Once the data is loaded in the grid is there anyway to force it to reload the data from the server when we click on the grid? That is, re-execute the Proxy associated with the Store." The only way we can get it to work now is to close the grid and re-open it from the Start menu.



Attached is a sample of the MODEL and the STORE we are using.


If it will help to see more of the code we will be happy to forward it.


Any help on this would be greatly appreciated.


Ext.define('TradingUser', {
extend:'Ext.data.Model',
fields: [
{name: 'decisiondt'},
{name: 'decisiontm'},
{name: 'transaction'},
{name: 'qty', type: 'float'},
{name: 'clprice', type: 'float'},
{name: 'bsvalue', type: 'float'},
{name: 'eprofit', type: 'float'},
{name: 'pChange', type: 'float'},
{name: 'profit', type: 'float'}
]
});

/* snippet of code removed */

createWindow : function(){
var desktop = this.app.getDesktop();
var TradingStore = Ext.create('Ext.data.Store',{
model: 'TradingUser',
proxy: {
type: 'ajax',
url: ('http://winors.tzo.com/cgi-bin/WinORSTickerDisplay.exe?strat=V&freq=I&Ticker=PLCE'),
reader: 'json'
},
autoLoad: true
});

/* code continues --- not included here */

flanders
3 Dec 2011, 5:53 PM
How about something like this?



yourGrid.on('containerclick', TradingStore.load, TradingStore);

JoePie
7 Dec 2011, 1:48 AM
Thank-you for your input. But I seem to have difficulty figuring out where to insert the code. I have therefore modified the original 'Gridwindow.Js' from the ExtJs 4.02a examples directory. Would you please suggest where and how to insert the event. Thanks for your help.


Ext.define('MyDesktop.GridWindow', {
extend: 'Ext.ux.desktop.Module',

requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],

id:'grid-win',

init : function(){
this.launcher = {
text: 'Grid Window',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
};
},

createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'Grid Window',
width:740,
height:480,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: [
{
border: false,
xtype: 'grid',
store: new Ext.data.ArrayStore({
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' }
],
data: MyDesktop.GridWindow.getDummyData()
}),
viewConfig: {
listeners: {
itemdblclick: function(dataview, record, item, index, e) {
alert(record.get('company'));
}
}
},
columns: [
new Ext.grid.RowNumberer(),
{
text: "Company",
flex: 1,
sortable: true,
dataIndex: 'company'
},
{
text: "Price",
width: 70,
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'price'
},
{
text: "Change",
width: 70,
sortable: true,
dataIndex: 'change'
},
{
text: "% Change",
width: 70,
sortable: true,
dataIndex: 'pctChange'
}
]
}
],
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
});
}
win.show();
return win;
},

statics: {
getDummyData: function () {
return [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];
}
}
});

flanders
7 Dec 2011, 2:00 AM
There are three ways to hook into events.

(i) Using the MVC pattern. It looks like you are not using that, but I would advise looking into it. It has some neat advantages

(ii) Inline, when declaring your grid

(iii) After instantiation

In your code something like this:



Ext.define('MyDesktop.GridWindow', {
extend: 'Ext.ux.desktop.Module',


requires: [
'Ext.data.ArrayStore',
'Ext.util.Format',
'Ext.grid.Panel',
'Ext.grid.RowNumberer'
],


id:'grid-win',


init : function(){
this.launcher = {
text: 'Grid Window',
iconCls:'icon-grid',
handler : this.createWindow,
scope: this
};
},


createWindow : function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('grid-win');
if(!win){
win = desktop.createWindow({
id: 'grid-win',
title:'Grid Window',
width:740,
height:480,
iconCls: 'icon-grid',
animCollapse:false,
constrainHeader:true,
layout: 'fit',
items: [
{
border: false,
xtype: 'grid',
listeners: { //(1)
itemclick: function() {
var store = this.down('gridpanel');
store.load();
},
scope: this
},
store: new Ext.data.ArrayStore({
fields: [
{ name: 'company' },
{ name: 'price', type: 'float' },
{ name: 'change', type: 'float' },
{ name: 'pctChange', type: 'float' }
],
data: MyDesktop.GridWindow.getDummyData()
}),
viewConfig: {
listeners: {
itemdblclick: function(dataview, record, item, index, e) {
alert(record.get('company'));
}
}
},
columns: [
new Ext.grid.RowNumberer(),
{
text: "Company",
flex: 1,
sortable: true,
dataIndex: 'company'
},
{
text: "Price",
width: 70,
sortable: true,
renderer: Ext.util.Format.usMoney,
dataIndex: 'price'
},
{
text: "Change",
width: 70,
sortable: true,
dataIndex: 'change'
},
{
text: "% Change",
width: 70,
sortable: true,
dataIndex: 'pctChange'
}
]
}
],
tbar:[{
text:'Add Something',
tooltip:'Add a new row',
iconCls:'add'
}, '-', {
text:'Options',
tooltip:'Blah blah blah blaht',
iconCls:'option'
},'-',{
text:'Remove Something',
tooltip:'Remove the selected item',
iconCls:'remove'
}]
});
}
win.down('gridpanel').on('itemclick', function() {...}, this); // (2)
win.show();
return win;
},


statics: {
getDummyData: function () {
return [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'],
['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am']
];
}
}
});


But really, event catching and handling is done in all the examples. This is al there..

JoePie
16 Dec 2011, 2:32 AM
Thank you for your help, but I still cannot get this to work. I tried your suggestions, but I still need to close and reopen the grid for the data to load. Does anyone have any other suggestions?

flanders
16 Dec 2011, 3:30 AM
Have you debugged your code? Do you get any faults? Do the event-handlers get executed at all?

In other words: Is the problem in reloading the store? or getting the handler executed at the right time?

JoePie
20 Dec 2011, 1:05 AM
I tried:


win.down('grid').on('itemdblclick', function() {
grid.on('itemdblclick', TradingStore.load, TradingStore);
}, this);

and ended up with this error:

SCRIPT5007: Unable to get value of the property 'on': object is null or undefined

skirtle
20 Dec 2011, 1:31 AM
Is the variable grid defined anywhere?

Why are you attaching another itemdblclick listener inside your existing itemdblclick listener? Don't you just want to reload the store at that point?

JoePie
5 Jan 2012, 3:56 PM
Sorry for the delay in getting back to you.

I back stepped to your original suggestion posted on December 7th

When I add the code you suggested in //1 the desktop appears. When I click on a row nothing happens. Meaning, it did not seem like the data reloaded. So I tried to make sure the listener works. It does since I added in an "Alert"

If the Alert is before the "var store = this.down('gridpanel'); " statement it works; If after the "store.load()" the alert does not pop up. The debugger gives the following error message: "Object doesn't support this property or method"

30494



I have also included the snippet of the code I modified.


{
border: false,
xtype: 'gridpanel',
id: 'grid',
listeners: {
itemclick: function(dataview, record, item, index, e) {
var store = this.down('gridpanel');
store.load();
alert(record.get('company'));
},
scope: this,
},

skirtle
5 Jan 2012, 8:58 PM
Why are you trying to debug minimized code? You're just making things difficult for yourself.

This:


var store = this.down('gridpanel');

returns a grid, not a store. It should be something like this:


var store = this.down('gridpanel').getStore();

or even:


var store = dataview.getStore();

Code suggestions posted on the forum tend not to have been tested prior to posting, you'll often find that you need to correct minor mistakes to get them to work.