strimp101
asked on
ExtJS Metachange event with GroupingStore
Greetings all,
I am simply trying to use the metachange event to dynamically load data in from the server. In this case, the metachange event is not even firing (no alerts). Any ideas?
This is the grid (extending a GridPanel):
...and this is the the GroupingStore:
Any clue on what might be the issue here?
I am simply trying to use the metachange event to dynamically load data in from the server. In this case, the metachange event is not even firing (no alerts). Any ideas?
Ext.BLANK_IMAGE_URL = '/bin/js/ext-3.2.1/resources/images/default/s.gif';
Ext.ns('Weekend');
This is the grid (extending a GridPanel):
Weekend.Grid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
var config = {
columns:[]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.store = weekendStore;
this.viewConfig = {forceFit: true};
this.loadMask = true;
this.id = 'weekend';
Weekend.Grid.superclass.initComponent.apply(this, arguments);
this.on({
activate: {scope:this, single:true, fn:function() {
this.store.load({params:{start:0, limit:10}});
}}
});
}
});
...and this is the the GroupingStore:
Ext.reg('weekendGrid', Weekend.Grid);
var weekendStore = new Ext.data.GroupingStore({
url: '/bin/php/do/weekend.do.php',
reader: new Ext.data.JsonReader({
root: 'data',
listeners: {
metachange: function(store, meta) {
var g = Ext.getCmp('weekendGrid');
alert(g);
var cm = g.getColumnModel();
alert(cm);
cm.setConfig(meta.colModel);
g.reconfigure(store, cm);
}
}
}),
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry',
storeId: 'weekendStore'
});
Any clue on what might be the issue here?
ASKER
Thanks for the reply.
The is the JSON response from the server which includes the metaData property:
{
"metaData":{
"root":"data",
"fields":["company","price ","change" ,"pctChang e","lastCh ange","ind ustry"],
"colModel":[
{"id":"company","header":" Company"," sortable": true,"data Index":"co mpany"},
{"header":"Price","sortabl e":true,"d ataIndex": "price"},
{"header":"Change","sortab le":true," dataIndex" :"change"} ,
{"header":"Percent Updated","sortable":true," dataIndex" :"pctChang e"},
{"header":"Last Updated","sortable":true," dataIndex" :"lastChan ge"},
{"header":"Industry","sort able":true ,"dataInde x":"indust ry"}
]
},
"data":[
{"company":"3m Co","price":71.72,"change" :0.02,"pct Change":0. 03,"lastCh ange":"09\ /09\/1010" ,"industry ":"Manufac turing"},
{"company":"Alcoa Inc","price":29.01,"change ":0.42,"pc tChange":1 .47,"lastC hange":"09 \/09\/1010 ","industr y":"Manufa cturing"},
{"company":"Altria Group Inc","price":83.81,"change ":0.28,"pc tChange":0 .34,"lastC hange":"09 \/09\/1010 ","industr y":"Manufa cturing"},
{"company":"American Express Company","price":52.55,"ch ange":0.01 ,"pctChang e":0.02,"l astChange" :"09\/09\/ 1010","ind ustry":"Fi nance"},
{"company":"American International Group, Inc.","price":64.13,"chang e":0.31,"p ctChange": 0.49,"last Change":"0 9\/09\/101 0","indust ry":"Servi ces"},
{"company":"AT&T Inc.","price":31.61,"chang e":-0.48," pctChange" :-1.54,"la stChange": "09\/09\/1 010","indu stry":"Ser vices"},
{"company":"Boeing Co.","price":75.43,"change ":0.53,"pc tChange":0 .71,"lastC hange":"09 \/09\/1010 ","industr y":"Manufa cturing"},
{"company":"Caterpillar Inc.","price":67.27,"chang e":0.92,"p ctChange": 1.39,"last Change":"0 9\/09\/101 0","indust ry":"Servi ces"},
{"company":"Citigroup, Inc.","price":49.37,"chang e":0.02,"p ctChange": 0.04,"last Change":"0 9\/09\/101 0","indust ry":"Finan ce"},
{"company":"E.I. du Pont de Nemours and Company","price":40.48,"ch ange":0.51 ,"pctChang e":1.28,"l astChange" :"09\/09\/ 1010","ind ustry":"Ma nufacturin g"},
{"company":"Exxon Mobil Corp","price":68.1,"change ":-0.43,"p ctChange": -0.64,"las tChange":" 09\/09\/10 10","indus try":"Manu facturing" }
]
}
I know that the data is loaded because I copied the above response right from Firebug.
I do want to load the columns dynamically because I am using this code to return many different sizes of data grids, some with upwards of 20 columns!
The thing that is really getting me is that it seems the metachange event is not even firing (hence no alerts). If I change the metachange event to a load event, it fires but
var g = Ext.getCmp('weekendGrid');
returns g as undefined.
The is the JSON response from the server which includes the metaData property:
{
"metaData":{
"root":"data",
"fields":["company","price
"colModel":[
{"id":"company","header":"
{"header":"Price","sortabl
{"header":"Change","sortab
{"header":"Percent Updated","sortable":true,"
{"header":"Last Updated","sortable":true,"
{"header":"Industry","sort
]
},
"data":[
{"company":"3m Co","price":71.72,"change"
{"company":"Alcoa Inc","price":29.01,"change
{"company":"Altria Group Inc","price":83.81,"change
{"company":"American Express Company","price":52.55,"ch
{"company":"American International Group, Inc.","price":64.13,"chang
{"company":"AT&T Inc.","price":31.61,"chang
{"company":"Boeing Co.","price":75.43,"change
{"company":"Caterpillar Inc.","price":67.27,"chang
{"company":"Citigroup, Inc.","price":49.37,"chang
{"company":"E.I. du Pont de Nemours and Company","price":40.48,"ch
{"company":"Exxon Mobil Corp","price":68.1,"change
]
}
I know that the data is loaded because I copied the above response right from Firebug.
I do want to load the columns dynamically because I am using this code to return many different sizes of data grids, some with upwards of 20 columns!
The thing that is really getting me is that it seems the metachange event is not even firing (hence no alerts). If I change the metachange event to a load event, it fires but
var g = Ext.getCmp('weekendGrid');
returns g as undefined.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Got it!
Code
Ext.BLANK_IMAGE_URL = '/bin/js/ext-3.2.1/resourc es/images/ default/s. gif';
Ext.ns('Weekend');
Weekend.Grid = Ext.extend(Ext.grid.GridPa nel, {
initComponent: function() {
var config = {
columns:[],
id: 'weekendGrid',
store: weekendStore,
viewConfig: {forceFit: true},
loadMask: true,
};
Ext.apply(this, Ext.apply(this.initialConf ig, config));
Weekend.Grid.superclass.in itComponen t.apply(th is, arguments);
this.on({
activate: {scope:this, single:true, fn:function() {
this.store.load({params:{s tart:0, limit:10}});
}}
});
},
id: 'weekendGrid',
});
Ext.reg('weekendGrid', Weekend.Grid);
var weekendStore = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader(),
url: '/bin/php/do/weekend.do.ph p',
root: 'data',
listeners: {
metachange: function(store, meta) {
var g = Ext.getCmp('weekendGrid');
var cm = g.getColumnModel();
cm.setConfig(meta.colModel );
g.reconfigure(store, cm);
}
},
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry',
storeId: 'weekendStore'
});
Code
Ext.BLANK_IMAGE_URL = '/bin/js/ext-3.2.1/resourc
Ext.ns('Weekend');
Weekend.Grid = Ext.extend(Ext.grid.GridPa
initComponent: function() {
var config = {
columns:[],
id: 'weekendGrid',
store: weekendStore,
viewConfig: {forceFit: true},
loadMask: true,
};
Ext.apply(this, Ext.apply(this.initialConf
Weekend.Grid.superclass.in
this.on({
activate: {scope:this, single:true, fn:function() {
this.store.load({params:{s
}}
});
},
id: 'weekendGrid',
});
Ext.reg('weekendGrid', Weekend.Grid);
var weekendStore = new Ext.data.GroupingStore({
reader: new Ext.data.JsonReader(),
url: '/bin/php/do/weekend.do.ph
root: 'data',
listeners: {
metachange: function(store, meta) {
var g = Ext.getCmp('weekendGrid');
var cm = g.getColumnModel();
cm.setConfig(meta.colModel
g.reconfigure(store, cm);
}
},
sortInfo:{field: 'company', direction: "ASC"},
groupField:'industry',
storeId: 'weekendStore'
});
Is your store loading at all by the way? You may want the 'autoLoad: true' config in there. You will be able to tell if your store is loading by using a utility like Firebug, and seeing if an ajax request is being made for the store's data (i.e. an ajax request is being made to /bin/php/do/weekend.do.php
Are you sure that you want to do this configuration by metaData though? Will your store's fields be changing with different requests to load the store? If not, and you just want the dynamic data, then you should really just specify the fields that are going to be used directly on the store (or reader) with the 'fields' config, as well as directly specifying your columns for the grid too.
Hope that helps, and let me know if you have any more questions.
-Greg