PDA

View Full Version : Dynamic grid columns & headings from nested JSON



lcarbonaro
13 Mar 2014, 6:25 AM
I need to produce a grid like this:

48282

from JSON data that looks like this:



{
"parts": [
{
"partNumber": "P123",
"loads": [
{"loadId": 747001, "loadQty": 200},
{"loadId": 747002, "loadQty": 275},
{"loadId": 747003, "loadQty": 100}
]
},
{
"partNumber": "P124",
"loads": [
{"loadId": 747001, "loadQty": 150},
{"loadId": 747003, "loadQty": 100}
]
},
{
"partNumber": "P125",
"loads": [
{"loadId": 747003, "loadQty": 120}
]
}
]
}


From Google search results I have come across mention of a reconfigure method, and I read the typically terse explanation in the online docs, but cannot join the dots yet. Not a single applicable example in sight.

I am able to modify the JSON format of the data somewhat, if it leads to an easier solution. Not sure how, or if, that would help though. No matter how you slice it, I still wouldn't know ahead of time how many grid columns I need. Note also that the grid column headings need to be extracted from the data itself.

Specifically, how do I set up my view if I do not know until run time what columns I need? And how about the model, given the nested nature of the incoming JSON?

Any ideas please?

Thanks.

P.S. I'm using ExtJS 4.2.1

scottmartin
13 Mar 2014, 4:13 PM
See if the following will help:
https://fiddle.sencha.com/#fiddle/492

lcarbonaro
14 Mar 2014, 4:41 AM
Thank you, Scott. Your example helped immensely.

-Les

lakshmi_hari
9 Apr 2015, 5:08 AM
See if the following will help:
https://fiddle.sencha.com/#fiddle/492


i used the above example for dynamic grid with paging toolbar. I get all 6 records in the grid . i have specified the PageSize as 3 in store. can anyone help me. I am new to extjs.

Ext.onReady(function(){


var store = Ext.create('Ext.data.Store', {
storeId:'MyStore',
autoLoad: true,
pageSize : 3,
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'data'
}
}
});


var grid = Ext.create('Ext.grid.Panel', {
title: 'Grid',
store: Ext.data.StoreManager.lookup('MyStore'),
columns: [ ],
height: 300,
width: 600,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
text: 'Load Data',
handler: function() {
console.log('Button btnLoadData clicked!');
//var dynamicGrid = Ext.ComponentQuery.query('dynamicGrid')[0];
grid.getStore().getProxy().url = 'data1.json';
grid.getStore().load();
}
},
{
xtype: 'button',
text: 'Load Data2',
handler: function() {
console.log('Button btnLoadData2 clicked!');
//var dynamicGrid = Ext.ComponentQuery.query('dynamicGrid')[0];
var columnsCount = grid.headerCt.items.length;
for (var i=0; i < columnsCount; i++) {
var column = grid.headerCt.getComponent(0);
grid.headerCt.remove(column);
}
grid.getView().refresh();
grid.getStore().removeAll();
grid.getStore().getProxy().url = './data2.js';
grid.getStore().load();
}
}
]
}, {
xtype: 'pagingtoolbar',
store: Ext.data.StoreManager.lookup('MyStore'),
dock: 'bottom',
displayInfo: true
}
],


renderTo: Ext.getBody()
});


store.on('metachange',function(store, meta){
grid.reconfigure(store, meta.columns);
console.log(store);
console.log(meta);
});


});

lcarbonaro
9 Apr 2015, 5:28 AM
Hi Lakshmi.

My case did not require paging, but from what I found out here:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.toolbar.Paging

" to use paging you need to set a pageSize configuration on the Store, AND pass the paging requirements to the server when the store is first loaded. "

Try adding: start: 0 and limit:3 as parms to your store configuration.

-Les