PDA

View Full Version : Loading grid store



douggiefox
6 Nov 2009, 3:30 AM
Hi

I've tried in vain to follow Saki's example for loading a grid store at the very last moment:

this.on({
afterlayout:{scope:this, single:true, fn:function() {
this.store.load({params:{start:0, limit:30}});
}}
});

This doesn't work for me. My grid does not load.

I'm currently calling the load directly with Ext.StoreMgr.get('quotation').load();, which is ok but not quite how I wanted this to be handled.

Does anyone have any other tactics on how to load a grid as late as possible?

Thanks and regards

DF

dommellenny
6 Nov 2009, 4:23 AM
do it in your onRender
like this:


, onRender: function() {
Name.superclass.onRender.apply(this, arguments);
var lThis = this;
setTimeout(function() { //used for displaying mask
lThis.store.load();
}, 0);
}

douggiefox
6 Nov 2009, 5:02 AM
Hi

I tried what you said and my new code looks like below.

The grid still fires its load to early (I know I should reword that!)


Ext.ns('Quotation.MemberQuotationGrid');

Quotation.MemberQuotationGrid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
var config = {
store:new Ext.data.JsonStore({
id:'quotation',
totalProperty:'totalCount',
root: 'results',
fields: [
{name: 'netPMIPremium', type: 'float'}
],
url: 'quotation/dummyresults'
}),
columns: [
{ header: "netPMIPremium", width: 30, dataIndex: 'netPMIPremium',sortable: true }
],
viewConfig:{forceFit:true},
loadMask:true
};

Ext.apply(this, Ext.apply(this.initialConfig, config));

Phc.app.quotation.MemberQuotationGrid.superclass.initComponent.apply(this, arguments);

// load the store at the latest possible moment
//this doesn't work for me
//this.on({
// afterlayout:{scope:this, single:true, fn:function() {
// this.store.load({params:{start:0, limit:30}});
// }}
//});

}
, onRender: function() {
Quotation.MemberQuotationGrid.superclass.onRender.apply(this, arguments);
var lThis = this;
setTimeout(function() { //used for displaying mask
lThis.store.load();
}, 0);

}});

Ext.reg('memberquotationgrid', Quotation.MemberQuotationGrid);

I'm wondering if it's the container it is used in that's causing the problem


Ext.ns('Quotation.Adjustments');

Quotation.Adjustments = Ext.extend(Ext.Panel, {

constructor: function(config) {

var testgrid = {xtype:'memberquotationgrid', height: 300};

Quotation.Adjustments.superclass.constructor.call(this, Ext.apply({
layout:'fit',
layoutConfig:{deferredRender:true},
height: 250,
items:testgrid}, config));
}}
);

Ext.reg('quotationAdjustmentPanel', Quotation.Adjustments);


Thanks DF

dommellenny
6 Nov 2009, 7:44 AM
the onRender fires when the object is being rendered...
when would you like your store to load?
EDIT:
try
autoLoad: false

douggiefox
6 Nov 2009, 4:20 PM
Hi

Thanks for the input, I also needed to ensure the parent container's layoutConfig: {deferredRender:true}

Best DF

douggiefox
2 Dec 2009, 8:57 AM
Hi

I'm picking this issue up again.

I've got my load to fire onRender which is cool. I need to access other properties in the JSON response, which is accessed grid.store.reader.jsonData.aField...so that's all good too.

However, I need to set a textfield to the value of grid.store.reader.jsonData.aField. I've got some awfulness stuck in the onRender using Ext.getCmp...which I want to avoid.

Any ideas how to structure this properly. I will want to rerender grid at some point too.

Best DF

Mike Robinson
2 Dec 2009, 9:16 AM
We'd of course need to see a snippet of your "awfulness."

As you know, you can only set a field-value after the Store has fired its "load" event, thereby telling you that it now (maybe...) has some data. Upon which event, of course, the grid normally refreshes itself. I'm not quite sure what kind of special-effect you are trying to achieve.

douggiefox
2 Dec 2009, 9:24 AM
Hi Mike

Sorry I've just reread and I wasn't being clear at all.

Here's my code:



onRender: function(ct, position) {
App.module.MyGrid.superclass.onRender.apply(this, arguments);
var lThis = this;
setTimeout(function() {
lThis.store.load();
--> This doesn't work at all!
--> Ext.getCmp("myComponent").value = lThis.store.reader.jsonData.myValue;
}, 0);


I'm trying to update a number of fields that are outside of this definition but whose values are contained within the JSON response, so lThis.store.reader.jsonData.myValue has the correct value. I guess my question is how to reference objects outside of the grid definition.

Best DF

CrazyEnigma
2 Dec 2009, 1:56 PM
I used afterrender event to call the load rather than the onrender.

or

afterRender.

douggiefox
4 Dec 2009, 3:33 AM
Hi All

I'm calling my grid's store load in onRender as defined above. This all works fine.

I'm trying to access a field in the raw jsondata to use elsewhere and I'm trying to acheive it like this:


var aGrid = new Foo.AGrid(
{listeners:
{'afterrender': function(){
aField.setValue(this.store.reader.jsonData.aValue);
}
}
}
);
My store's defined like this:


var aStore = new Ext.data.JsonStore({
totalProperty:'totalCount',
root: 'results',
fields: [
{name: 'name'},
],
url: '/anAction',
autoLoad: false
});'aValue' is correctly defined in 'anAction'.

I'm finding that jsonData is undefined and yet my grid loads perfectly. Not sure if this is a timing issue or something else.

Best DF

douggiefox
4 Dec 2009, 4:09 AM
Hi

All sorted now. A lesson learned in putting the listeners with the object they should be with...

So I put a listener in the load of the store rather than in the grid.

Thanks to all who helped me to sort it out.

Best DF

Animal
4 Dec 2009, 4:16 AM
render does not mean the Store has been loaded.

It just means the GridPanel's outline structure has been created in the DOM. There will probably be no data if it's a remotely loaded Store. So there will be no rows.

The data is probably still trundling down the wire!

When the data arrives, the Store will fire its load event.

douggiefox
4 Dec 2009, 5:43 AM
Hey Animal

Thanks for that. Yes you are absolutely correct.

Best DF