EXTjs grid与json数据 转载
刚开始学习extjs，真是摸不着头呀。
做了半天才搞出一个grid显示数据。在网上找了个数据做了个测试。
一下是代码。
首先：把ext-3.1.0文件夹放到根目录下。
新建一个Default.aspx。
view plaincopy to clipboardprint?
01.<html xmlns="http://www.w3.org/1999/xhtml">
02.<head runat="server">
03. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
04. <link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" mce_href="ext-3.1.0/resources/css/ext-all.css" />
05. <mce:script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js" mce_src="ext-3.1.0/adapter/ext/ext-base.js"></mce:script>
06. <mce:script type="text/javascript" src="ext-3.1.0/ext-all-debug.js" mce_src="ext-3.1.0/ext-all-debug.js"></mce:script>
07. <mce:script type="text/javascript" src="js/grid1.js" mce_src="js/grid1.js"></mce:script>
08. <title></title>
09.</head>
10.<body>
11. <form id="form1" runat="server">
12. <div>
13. <div id="grid"></div>
14. <div id="pad"></div>
15. </div>
16. </form>
17.</body>
18.</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" mce_href="ext-3.1.0/resources/css/ext-all.css" />
<mce:script type="text/javascript" src="ext-3.1.0/adapter/ext/ext-base.js" mce_src="ext-3.1.0/adapter/ext/ext-base.js"></mce:script>
<mce:script type="text/javascript" src="ext-3.1.0/ext-all-debug.js" mce_src="ext-3.1.0/ext-all-debug.js"></mce:script>
<mce:script type="text/javascript" src="js/grid1.js" mce_src="js/grid1.js"></mce:script>
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="grid"></div>
<div id="pad"></div>
</div>
</form>
</body>
</html>
在创建一个名为grid1.js的js文件显示grid。
view plaincopy to clipboardprint?
01.Ext.onReady(function() {
02.
03. var proxy = new Ext.data.HttpProxy({ url: 're.aspx'});//获取json数据
04. var reader = new Ext.data.JsonReader(
05. {
06. totalProperty: "results",
07. root: "datastr",
08. id: 'productID'
09. },
10. [
11. { name: 'productID' },
12. { name: 'productName' },
13. { name: 'productCode'}
14. ]
15. );
16.
17.
18. var store = new Ext.data.Store(
19. {
20. proxy: proxy,
21. reader: reader
22. });
23.
24. store.load(); //加载数据
25.
26.//创建grid
27. var grid = new Ext.grid.GridPanel({
28. renderTo: 'grid',
29. width: 650,
30. store: store,
31. loadMask: true,
32. viewConfig: {
33. forceFit: true
34. },
35. autoHeight: true,
36. //autoExpandColumn:'descn',
37. columns: [
38. { header: "id", sortable: true, dataIndex: 'productID' },
39. { header: 'name', dataIndex: 'productName', width: 80 },
40. { header: "code", sortable: true, dataIndex: 'productCode' }
41. ],
42. frame: true, //表格外加边框
43. collapsible: true,
44. animCollapse: false
45. });
46.
47. grid.render();
48.});
Ext.onReady(function() {
var proxy = new Ext.data.HttpProxy({ url: 're.aspx'});//获取json数据
var reader = new Ext.data.JsonReader(
{
totalProperty: "results",
root: "datastr",
id: 'productID'
},
[
{ name: 'productID' },
{ name: 'productName' },
{ name: 'productCode'}
]
);
var store = new Ext.data.Store(
{
proxy: proxy,
reader: reader
});
store.load(); //加载数据
//创建grid
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
width: 650,
store: store,
loadMask: true,
viewConfig: {
forceFit: true
},
autoHeight: true,
//autoExpandColumn:'descn',
columns: [
{ header: "id", sortable: true, dataIndex: 'productID' },
{ header: 'name', dataIndex: 'productName', width: 80 },
{ header: "code", sortable: true, dataIndex: 'productCode' }
],
frame: true, //表格外加边框
collapsible: true,
animCollapse: false
});
grid.render();
});
数据源re.aspx.cs页面
view plaincopy to clipboardprint?
01.string str = "{ \"results\":19,\"datastr\":[ { \"productID\":\"1\",\"productCode\":\"083-QMC16009-19/B\",\"productName\":\"C1系列600柜\"}, { \"productID\":\"2\",\"productCode\":\"083-QMC1-600B1-R/L\",\"productName\":\"600侧山左右各1\"}, { \"productID\":\"3\",\"productCode\":\"083-QMC1-600B1-L\",\"productName\":\"左侧山\"}, { \"productID\":\"4\",\"productCode\":\"083-QMC1-600B1-L\",\"productName\":\"左侧山(两边铣)\"}, { \"productID\":\"5\",\"productCode\":\"083-QMC1-600H2\",\"productName\":\"600身后板\"}, { \"productID\":\"6\",\"productCode\":\"083-QMC1-600H2\",\"productName\":\"600身后板\"}, { \"productID\":\"7\",\"productCode\":\"083-QMC1-600H2\",\"productName\":\"600身后板\"}, { \"productID\":\"8\",\"productCode\":\"083-QMC1-600SF2\",\"productName\":\"大拉板\"}, { \"productID\":\"9\",\"productCode\":\"083-QMC1-600SF2\",\"productName\":\"大拉板\"}, { \"productID\":\"10\",\"productCode\":\"083-QMC1-600SF2H\",\"productName\":\"滑道条\"}, { \"productID\":\"11\",\"productCode\":\"QMC1-600G3\",\"productName\":\"金属衣杆\"}, { \"productID\":\"12\",\"productCode\":\"QMC1-600G3\",\"productName\":\"金属衣杆\"}, { \"productID\":\"13\",\"productCode\":\"QMC1-600G3\",\"productName\":\"金属衣杆\"}, { \"productID\":\"14\",\"productCode\":\"F-QMC1600L2-3-1\",\"productName\":\"电视柜\"}, { \"productID\":\"15\",\"productCode\":\"F-QMC1600L2-3CDB\",\"productName\":\"顶底山条\"}, { \"productID\":\"16\",\"productCode\":\"F-QMC1600L2-3CD\",\"productName\":\"顶底板\"}, { \"productID\":\"17\",\"productCode\":\"F-QMC1600L2-3CD\",\"productName\":\"顶底板\"}, { \"productID\":\"18\",\"productCode\":\"F-QMC1-H807\",\"productName\":\"380/500后身板\"}, { \"productID\":\"19\",\"productCode\":\"F-QMC1-H807\",\"productName\":\"后身板\"} ]} ";
02.
03.Response.Write(str);
string str = "{ \"results\":19,\"datastr\":[ { \"productID\":\"1\",\"productCode\":\"083-QMC16009-19/B\",\"productName\":\"C1系列600柜\"}, { \"productID\":\"2\",\"productCode\":\"083-QMC1-600B1-R/L\",\"productName\":\"600侧山左右各1\"}, { \"productID\":\"3\",\"productCode\":\"083-QMC1-600B1-L\",\"productName\":\"左侧山\"}, { \"productID\":\"4\",\"productCode\":\"083-QMC1-600B1-L\",\"productName\":\"左侧山(两边铣)\"}, { \"productID\":\"5\",\"productCode\":\"083-QMC1-600H2\",\"productName\":\"600身后板\"}, { \"productID\":\"6\",\"productCode\":\"083-QMC1-600H2\",\"productName\":\"600身后板\"}, { \"productID\":\"7\",\"productCode\":\"083-QMC1-600H2\",\"productName\":\"600身后板\"}, { \"productID\":\"8\",\"productCode\":\"083-QMC1-600SF2\",\"productName\":\"大拉板\"}, { \"productID\":\"9\",\"productCode\":\"083-QMC1-600SF2\",\"productName\":\"大拉板\"}, { \"productID\":\"10\",\"productCode\":\"083-QMC1-600SF2H\",\"productName\":\"滑道条\"}, { \"productID\":\"11\",\"productCode\":\"QMC1-600G3\",\"productName\":\"金属衣杆\"}, { \"productID\":\"12\",\"productCode\":\"QMC1-600G3\",\"productName\":\"金属衣杆\"}, { \"productID\":\"13\",\"productCode\":\"QMC1-600G3\",\"productName\":\"金属衣杆\"}, { \"productID\":\"14\",\"productCode\":\"F-QMC1600L2-3-1\",\"productName\":\"电视柜\"}, { \"productID\":\"15\",\"productCode\":\"F-QMC1600L2-3CDB\",\"productName\":\"顶底山条\"}, { \"productID\":\"16\",\"productCode\":\"F-QMC1600L2-3CD\",\"productName\":\"顶底板\"}, { \"productID\":\"17\",\"productCode\":\"F-QMC1600L2-3CD\",\"productName\":\"顶底板\"}, { \"productID\":\"18\",\"productCode\":\"F-QMC1-H807\",\"productName\":\"380/500后身板\"}, { \"productID\":\"19\",\"productCode\":\"F-QMC1-H807\",\"productName\":\"后身板\"} ]} ";
Response.Write(str);
运行显示看看结果吧。
本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lzy_1515/archive/2010/02/08/5299149.aspx
