PDA

View Full Version : gridpanel JsonStore load problem



gobladam
15 Apr 2012, 11:17 AM
Hi everybody, i need some help please.

So, I have a window in my application.
In its initComponent method I define a gridpanel like this:


this.firstGrid = new Ext.grid.GridPanel({
store: this.firstGridStore,
...


Later in the initComponent I have the store and some static data:


this.firstGridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records'
});

var myData = {
records : [
{ megnevezes : "Value1", mennyiseg_egyseg : 1, egysegar : 25, amount: 1 },
{ megnevezes : "Value2", mennyiseg_egyseg : 2, egysegar : 31, amount: 1 },
{ megnevezes : "Value3", mennyiseg_egyseg : 2, egysegar : 15, amount: 1 }
]
};


This works fine, but I want the store load dynamically in the open method like this:


var storeData = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: "index.php?r=order/pullData",
timeout: 90000
}),
root: 'data',
fields: fields,
baseParams: {},
remoteSort: true,
autoLoad : true
});


and then add this data to my store (I know this isn't right like this):


this.firstGridStore.loadData(storeData );


If I put the static data (var Mydata) here, and do this:


this.firstGridStore.loadData(myData);

than it's working like a charm.

So my question is how to load the store dynamically in the open method?

Thank you for your responds.

scottmartin
16 Apr 2012, 8:01 AM
What is your return JSON? I noticed you have
root: 'data' and root: 'records' and myData is using 'records'

Regards,
Scott.

gobladam
16 Apr 2012, 8:39 AM
Hi Scott,
thank you for your answer!
It was a good observation, but that's not the problem. My json returns correct.

Let me explain better my problem:
In the initcomponent method where I define the gridpanel, I must define a store for it.
But in the initcomponent I don't know the window id, which I need.

So that's why I need to load the store in the open method.

If I put this code to the initComoponent, than its fine:


this.firstGridStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: "index.php?r=order/pullData",
timeout: 90000
}),
root: 'data',
fields: fields,
baseParams: {},
remoteSort: true,
autoLoad : true
});


But I need this params as well:


this.firstGridStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: "index.php?r=order/pullData",
params: {
id: editorId
},
...
}),
});

and I know that id in the open method only.

gobladam
16 Apr 2012, 9:36 AM
Now I'm closer to the solution...

In the open method I do this:


this.firstGrid.store = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: "index.php?r=order/pullData",
params: {
id: editorId
},
timeout: 90000,
method: 'post'
}),
root: 'data',
fields: fields,
baseParams: {},
remoteSort: true,
autoLoad : true
});


After this succesfully lodaded, I can see the new data in the console after console.log(Ext.getCmp('firstGrid'));
in store->data->items there are my loaded records.
But the gridpanel dosen't render them.
I tried these:


Ext.getCmp('firstGrid').getView().refresh();
Ext.getCmp('firstGrid').doLayout();


Nothing happened... :(

scottmartin
16 Apr 2012, 10:40 AM
What does your return JSON look like?

Scott.

gobladam
16 Apr 2012, 10:49 AM
From the console:



{"success":true,"data":[{"megnevezes":"megnevezes01", "mennyiseg_egyseg":1 ,"egysegar":25,"amount":15},{"megnevezes":"megnevezes02", "mennyiseg_egyseg":1,"egysegar":25,"amount":15}]}


My fields:


var fields = [
{name: 'megnevezes', mapping : 'megnevezes'},
{name: 'mennyiseg_egyseg', mapping : 'mennyiseg_egyseg'},
{name: 'egysegar', mapping : 'egysegar'},
{name: 'amount', mapping : 'amount'}
];

scottmartin
16 Apr 2012, 12:12 PM
See if the following helps:
This loads your JSON.



var fields = [
{name: 'megnevezes', mapping : 'megnevezes'},
{name: 'mennyiseg_egyseg', mapping : 'mennyiseg_egyseg'},
{name: 'egysegar', mapping : 'egysegar'},
{name: 'amount', mapping : 'amount'}
];

Ext.onReady(function() {
Ext.define('model', {
extend: 'Ext.data.Model',
// idProperty: 'megnevezes',
fields: fields,
proxy: {
type: 'ajax',
actionMethods: 'POST',
url: 'example.json',
reader: {
type: 'json',
root: 'data',
totalProperty: 'total'
}
}
});

store = new Ext.data.Store({
autoLoad: true,
// also tested false using button to load
type: 'json',
model: 'model',
pageSize: 10,
remoteSort: true,
});

var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [{
text: 'megnevezes',
flex: 1,
sortable: true,
dataIndex: 'megnevezes'
}, {
text: 'mennyiseg_egyseg',
width: 125,
sortable: true,
dataIndex: 'mennyiseg_egyseg'
}, {
text: 'egysegar',
width: 100,
sortable: true,
dataIndex: 'egysegar'
}, {
text: 'amount',
width: 100,
sortable: true,
dataIndex: 'amount'
}],
height: 350,
width: 600,
title: 'JSON Grid',
renderTo: Ext.getBody(),
viewConfig: {
stripeRows: true
}
});

var button = new Ext.Button({
text: 'load store',
width: 150,
renderTo: Ext.getBody(),
handler: function() {
store.load();

var count = store.getCount();
var totalCount = store.getTotalCount();
var filterCount = store.filters.length;

console.log('getCount >> ' + count);
console.log('getTotalCount >> ' + totalCount);
console.log('-');

}
});
});


34091

Regards,
Scott.

damo
17 Apr 2012, 12:28 AM
Not 100% sure I get what you are trying to do as you haven't posted all the code you mention.

In your "open method" you could set the base param to what you need it to be.


this.firstGridStore.setBaseParam('id', editorId);
this.firstGridStore.load();

gobladam
17 Apr 2012, 7:11 AM
Thank both of you for your help!

I needed this:



this.firstGridStore.setBaseParam('id', editorId);
this.firstGridStore.load();