gridpanel JsonStore load problem

[gobladam]

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]

What is your return JSON? I noticed you have
root: 'data' and root: 'records' and myData is using 'records'

Regards,
Scott.

[gobladam]

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]

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]

What does your return JSON look like?

Scott.

[gobladam]

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]

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('-');

		}
	});
});

f195874.jpg

Regards,
Scott.

[damo]

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]

Thank both of you for your help!

I needed this:

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