CODEWITHSUNDEEP
jsonextjsstoreextjs4
Davor Zubak
Davor Zubak

Reputation: 4746

Extjs 4 showing JSON data (on demand) to grid?

After URL has been reached, how to show this data to grid, autoLoad:true, only loads firstly defined URL, but how to "dynamically" show loaded JSON to grid?, Reload the data with newly called JSON?

buttons: [{
   text: 'Load1',
   handler:function(){
      myStore.getProxy().url = 'app/kontaktGrid1.json';
      myStore.load();
      grid.getView().refresh();
}},{
   text: 'Load2',
   handler:function(){
      myStore.getProxy().url = 'app/kontaktGrid2.json';
      myStore.load();
      grid.getView().refresh();
}}]

Ext.define('app.gridStore', {
     extend: 'Ext.data.Model',
     fields: [
        'name', 'email', 'phone'
     ]
});
var myStore =Ext.create('Ext.data.Store', {
    model: 'app.gridStore',
    proxy: {
        type: 'ajax',
        url : '',
        reader:{ 
            type:'json'
    }
    },
    autoLoad:false
});


--Grid in Border Layout Center--
items:[{
xtype:"grid",
id:"kontaktGrid",
store: myStore,
border: false,
columns: [
    {header: 'name',sortable : false,  dataIndex: 'name'},
    {header: 'email',sortable : false, dataIndex: 'email'},
    {header: 'phone',sortable : false, dataIndex: 'phone'}
]  
}]

This isn't working, only loading from server no dispalying data.

Upvotes: 1

Views: 8380

Answers (1)

Egy Mohammad Erdin
Egy Mohammad Erdin

Reputation: 3413

first, why did you load your json like that ? even it's working... this is the simple way : 

text: 'Load1',
handler:function(){
   myStore.load({
       scope : this,
       url : 'app/kontaktGrid1.json'
   });
   //myStore.getProxy().url = 'app/kontaktGrid1.json';
   //myStore.load();
   //grid.getView().refresh();
}

from docs, the definition of method load is Loads data into the Store via the configured proxy..

second, your probem is only loading from server no dispalying data..
it's mean no error with json, store, and the model...
i think your problem is in the grid panel..
try show us how did you create the grid

make sure your grid column is refer(dataIndex) to your json

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        {text     : 'name',    sortable : false, dataIndex:"name"},
        {text     : 'email',   sortable : false, dataIndex:"email"},
        {text     : 'phone',   sortable : false, dataIndex:"phone"}
    ],
    //.....

Upvotes: 3

Related Questions