PDA

View Full Version : ExtJs4 autogrid solution



flyzb
5 Jun 2011, 3:41 AM
here my solution,it works fine.

my.json

{"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

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

<!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>

flyzb
5 Jun 2011, 4:08 AM
I have solved the problem. the autogrid works fine.

panega
13 Jun 2011, 7:19 AM
hei you, how to implement extjs 4 with PHP and mysql...

anyone can help me.... simple code....

thanks..

brookd
8 Jul 2011, 6:22 AM
What about if you want to change the columns without re-creating the grid?

josh_bassplayer
13 Jul 2011, 4:12 PM
excellent work ....

dotcompany
1 Sep 2011, 11:56 AM
how do paging in this sample?

ICTsai
3 Jan 2014, 12:36 AM
works fine!!thanks youbut I have a questionin
json"fields" :[ {"name":"id","dataIndex":"id"}, {"name":"user_id","dataIndex":"user_id"} ],
it seem not used
right?