here my solution,it works fine.
my.json
PHP Code:
{"success":true,
"metaData": {
"fields" :[
{"name":"id","dataIndex":"id"},
{"name":"user_id","dataIndex":"user_id"}
],
"columns": [
{"text": "ID","dataIndex": 'id'},
{"text": "user_id","dataIndex": "user_id"}
]
},
"data":[
{ "id": 1, "user_id":"dasdfas" },
{ "id": 2, "user_id":"d3333333" }
]}
autogrid.js
PHP Code:
Ext.require(['Ext.data.*', 'Ext.grid.*']);
Ext.define('Order', {
extend: 'Ext.data.Model',
fields: []
});
Ext.onReady(function(){
var store = new Ext.data.Store({
model: "Order"
});
var store = Ext.create('Ext.data.JsonStore', {
model: 'Order',
proxy: {
type: 'rest',
url: 'my.json',
reader: {
type: 'json',
root: 'data'
}
}
});
store.load({
callback: function() {
var columns=[];
var data=store.getProxy().getReader().rawData;
if (data.metaData) {
columns = data.metaData.columns;
}
var grid = Ext.create('Ext.grid.Panel', {
id:'usergrid',
renderTo: document.body,
width: 400,
height: 300,
frame: true,
title: 'Users',
store: new Ext.data.Store({
model:"Order"
}),
iconCls: 'icon-user',
columns: columns
});
var jsonData=data.data;
var i=0;
for(i=0;i<jsonData.length;i++){
Ext.getCmp('usergrid').getStore().add(jsonData[i]);
}
}
});
store.load();
});
html
PHP Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Stateful Array Grid Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../shared/example.css" />
<script type="text/javascript" src="../../bootstrap.js"></script>
<script type="text/javascript" src="autogrid.js"></script>
</head>
<body>
</body>
</html>
ExtJs4 autogrid solution
help me guys....
