EXTjs grid与json数据

来源：互联网发布：qq浏览器mini3.1 java 编辑：程序博客网时间：2024/04/29 22:50

刚开始学习extjs，真是摸不着头呀。

做了半天才搞出一个grid显示数据。在网上找了个数据做了个测试。

一下是代码。

首先：把ext-3.1.0文件夹放到根目录下。

新建一个Default.aspx。

在创建一个名为grid1.js的js文件显示grid。

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页面

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);

运行显示看看结果吧。