1. #1
    Sencha User
    Join Date
    Apr 2012
    Location
    Pécs, Hungary
    Posts
    5
    Vote Rating
    0
    gobladam is on a distinguished road

      0  

    Default gridpanel JsonStore load problem

    gridpanel JsonStore load problem


    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:
    Code:
    this.firstGrid = new Ext.grid.GridPanel({
                store: this.firstGridStore,
                ...
    Later in the initComponent I have the store and some static data:
    Code:
    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:
    Code:
           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):
    Code:
    this.firstGridStore.loadData(storeData );
    If I put the static data (var Mydata) here, and do this:
    Code:
    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Location
    Pécs, Hungary
    Posts
    5
    Vote Rating
    0
    gobladam is on a distinguished road

      0  

    Default


    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:
    Code:
    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:
    Code:
    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.

  4. #4
    Sencha User
    Join Date
    Apr 2012
    Location
    Pécs, Hungary
    Posts
    5
    Vote Rating
    0
    gobladam is on a distinguished road

      0  

    Default I have the data in the store, but the grid dosen't render them

    I have the data in the store, but the grid dosen't render them


    Now I'm closer to the solution...

    In the open method I do this:
    Code:
            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:
    Code:
    Ext.getCmp('firstGrid').getView().refresh();
    Ext.getCmp('firstGrid').doLayout();
    Nothing happened...

  5. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    What does your return JSON look like?

    Scott.

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Location
    Pécs, Hungary
    Posts
    5
    Vote Rating
    0
    gobladam is on a distinguished road

      0  

    Default my json looks like

    my json looks like


    From the console:

    Code:
    {"success":true,"data":[{"megnevezes":"megnevezes01", "mennyiseg_egyseg":1 ,"egysegar":25,"amount":15},{"megnevezes":"megnevezes02", "mennyiseg_egyseg":1,"egysegar":25,"amount":15}]}
    My fields:
    Code:
    var fields = [
    		{name: 'megnevezes', mapping : 'megnevezes'},
    		{name: 'mennyiseg_egyseg', mapping : 'mennyiseg_egyseg'},
    		{name: 'egysegar', mapping : 'egysegar'},
    		{name: 'amount', mapping : 'amount'}
    	];

  7. #7
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if the following helps:
    This loads your JSON.

    Code:
    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.

  8. #8
    Sencha Premium Member
    Join Date
    Oct 2009
    Location
    Leeds
    Posts
    66
    Vote Rating
    9
    damo will become famous soon enough

      0  

    Default


    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.

    PHP Code:
    this.firstGridStore.setBaseParam('id'editorId);
    this.firstGridStore.load(); 

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Location
    Pécs, Hungary
    Posts
    5
    Vote Rating
    0
    gobladam is on a distinguished road

      0  

    Default


    Thank both of you for your help!

    I needed this:
    Code:
    this.firstGridStore.setBaseParam('id', editorId); this.firstGridStore.load();

Thread Participants: 2

Tags for this Thread