Ext.onReady(function () {
var json1 = [{
"name": "Sylvester",
"surname": "Stallone"
}, {
"name": "Dolph",
"surname": "Lundgren"
}, {
"name": "Arnold",
"surname": "Schwarzenegger"
}, {
"name": "Mel",
"surname": "Gibson"
}, {
"name": "Harrison",
"surname": "Ford"
}];
var json2 = [{
"chinese": "我",
"english": "I",
"german": "Ich",
"french": "Je"
}, {
"chinese": "你",
"english": "You",
"german": "Du",
"french": "Tu"
}, {
"chinese": "他",
"english": "He",
"german": "Er",
"french": "Il"
}, {
"chinese": "她",
"english": "She",
"german": "Sie",
"french": "Elle"
}];
var getKeysFromJson = function (obj) {
var keys = [];
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
keys.push(key);
}
}
return keys;
};
var createStore = function (json) {
var keys = getKeysFromJson(json[0]);
return Ext.create('Ext.data.Store', {
fields: keys,
data: json
});
};
var createColumns = function (json) {
var keys = getKeysFromJson(json[0]);
return keys.map(function (field) {
return {
text: Ext.String.capitalize(field),
width: 150,
dataIndex: field
};
});
};
var grid = Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
columns: [],
dockedItems: {
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
text: 'Movie stars',
listeners: {
'click': function () {
grid.reconfigure(createStore(json1), createColumns(json1));
}
}
}, {
xtype: 'button',
text: 'Chinese',
listeners: {
'click': function () {
grid.reconfigure(createStore(json2), createColumns(json2));
}
}
}]
}
});
});
External resources loaded into this fiddle: