Extjs中grid採用json進行資料繫結的例項
剛開始學習extjs，真是摸不著頭呀。
做了半天才搞出一個grid顯示資料。在網上找了個數據做了個測試。
一下是程式碼。
首先：把ext-3.1.0資料夾放到根目錄下。
新建一個Default.aspx。
view plaincopy to clipboardprint?
<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>
<html xmlns="
<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?
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();
});
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?
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);
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);
執行顯示看看結果吧