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
轉載于:https://www.cnblogs.com/SevenMilk/archive/2011/03/23/1992162.html
總結
以上是生活随笔為你收集整理的EXTjs grid与json数据 转载的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： c++ template笔记(2)模板类
- 下一篇： C# webBrowser与javasc