Extjs4.2 json data
HTML
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css">
<div id="testdiv"></div>
JavaScript
Ext.onReady(function(){
var data = [{"ID":1,"Name":"aa","Category":"A","Price":200.00}, {"ID":2,"Name":"bb","Category":"B","Price":200.00},
{"ID":3,"Name":"cc","Category":"C","Price":200.00},
{"ID":4,"Name":"dd","Category":"D","Price":200.00},
{"ID":5,"Name":"ee","Category":"E","Price":200.00},
{"ID":6,"Name":"ee","Category":"F","Price":200.00}]
Ext.define('MyModel', {
extend: 'Ext.data.Model',
idProperty: 'ID',
fields: [
{name: 'ID'},
{name: 'Category'},
{name: 'Price'}
]
});
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
data : data,
model: 'MyModel',
proxy: {
type: 'memory',
reader: {
type: 'json',
}
}
});
Ext.create('Ext.Panel', {
id: 'test',
width: 960,
height:600,
renderTo: 'testdiv',
layout: 'vbox',
items: [
{
xtype: 'grid',
title: 'hello',
height: 400,
width: 700,
store: store,
columns: [
{
text: 'column1',
dataIndex: 'ID'
},{
text: 'column2',
dataIndex: 'Category'
},{
text: 'column3',
dataIndex: 'Price'
}
]
}
]
});
});