PDA

View Full Version : Display grid on Store load ?



duskandawn
3 Aug 2010, 5:23 AM
Hello All,
I think i know how to show a grid on store load with the usual scenario, where i do not extend my gridPanel.
But since i am trying to extend my GridPanel.
This is what my panel looks like :



Ext.ns('Test.grid');

Test.grid.searchGrid = Ext.extend(Ext.grid.GridPanel, {
title: Test',
initComponent: function() {
var config = {
id: 'searchgrid',
title : 'Data',
hidden : true,
frame:true,
store: this.buildStore(),

};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Test.grid.searchGrid.superclass.initComponent.apply(this, arguments);
},

// the below loadGrid is called from another js file.
loadGrid : function(data){
this.store.load({
params:{
start:data,
limit:10
}
});
this.store.on('load', function() {
this.show();
});

},
newColumns: function(){
return new Ext.grid.ColumnModel({
columns: [
new Ext.grid.RowNumberer() ]
});
}

So the above loadGrid function do fires up and my data loads, but since my grid is hidden initially how do i change its visibility. "this.show()" doesnt work.
I think my next question is related, after the data loads i need to update my columnModel too, but i just cannot get the reference to the grid object above to call the reconfigure().

Any hints ?

Thanks,

Condor
3 Aug 2010, 6:02 AM
Wrong scope:

this.store.on('load', function() {
this.show();
}, this);

duskandawn
4 Aug 2010, 1:08 PM
Hello,
This works perfectly but can you tell me what is i add a listener on to my buildStore function call to perform the same thing as the
above function. I mean to say how do i perform same thing if my setup looks like :


Ext.ns('Test.grid');

Test.grid.searchGrid = Ext.extend(Ext.grid.GridPanel, {
title: Test',
initComponent: function() {
var config = {
id: 'searchgrid',
title : 'Data',
hidden : true,
frame:true,
store: this.buildStore(),

};
buildStore : function(){
return new Ext.data.Store({
proxy: new Ext.data.HttpProxy(callRequest({
service : "TestRecord"
})),
reader: new Ext.data.JsonReader({
totalProperty: 'count',
root : 'record',
fields: [
{name:'acctId'},
{name: 'prdTyp'},
]
}),

listeners: {
load: function(store,record,options)
{
// how to perform this.show() here ??
}
}
});


I trying to learn the right way to do it. Please forgive my ignorance on this.

Thank you,

Condor
4 Aug 2010, 11:52 PM
Same scope for all listeners:

listeners: {
load: function(store,record,options){
// ...
},
scope: this
}
or different scope for every listener:

listeners: {
load: {
fn: function(store,record,options){
// ...
},
scope: this
}
}

duskandawn
5 Aug 2010, 4:56 AM
Hi Condor,
Do you know where can i study more on such syntax, or how do i even know that something like this exists.
And links or pointers will really help me learn this technology better.

Condor
5 Aug 2010, 5:09 AM
You could have found this in the API docs (see Ext.data.Store.listeners which refers you to addListener).

duskandawn
14 Sep 2010, 11:47 AM
Hi Condor,
Sorry for posting on this my old dead thread. but i found something weird not sure what is going on.
So here is my case


Ext.ns('Test.grid');

Test.grid.searchGrid = Ext.extend(Ext.grid.GridPanel, {
title: Test',
initComponent: function() {
var config = {
id: 'searchgrid',
title : 'Data',
hidden : true,
frame:true,
store: this.buildStore(),

};
buildStore : function(){
return new Ext.data.Store({
proxy: new Ext.data.HttpProxy(callRequest({
service : "TestRecord"
})),
reader: new Ext.data.JsonReader({
totalProperty: 'count',
root : 'record',
fields: [
{name:'acctId'},
{name: 'prdTyp'},
]
}),

listeners: {
load: function(store,record,options)
{
alert("Called from listener");
}
}
});
// the below loadGrid is called from another js file.
loadGrid : function(data){
this.store.load({
params:{
start:data,
limit:10
}
});
this.store.on('load', function() {
alert("called outside");
},this);

},

// above function is called from other js as : Ext.getCmp('searchgrid').loadGrid('test');

Now in the above two cases, of the
store on-load events what i am seeing is : If the loadGrid () is called the second time i see "called outside" being called twice.
But when i comment this onload inside the loadGrid(), and just use the listeners : load event, i see the "called from listener" just once no matter how many times i do a store load.

Seems like loadGrid() is retaining my old store number, so its like if i load the store 3 times, i see the alert box 3 times, but this doesnt happen with the alert inside the listener, any ideas why this may be happening ?

I am so confused here :(
Please advise,
Thanks