EXTjs grid与json数据

最新推荐文章于 2018-04-09 11:32:14 发布

mengzhengjie

最新推荐文章于 2018-04-09 11:32:14 发布

阅读量863

点赞数

分类专栏： Ext

Ext 专栏收录该内容

81 篇文章 1 订阅

订阅专栏

EXTjs grid与json数据

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

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

一下是代码。

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

新建一个Default.aspx。

[xhtml]view plaincopy 
    
 <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。

[c-sharp]view plaincopy 
    
 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页面

[c-sharp]view plaincopy 
    
 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);  

运行显示看看结果吧。

mengzhengjie

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EXTjs grid与json数据

EXTjs grid与json数据刚开始学习extjs，真是摸不着头呀。做了半天才搞出一个grid显示数据。在网上找了个数据做了个测试。一下是代码。首先：把ext-3.1.0文件夹放到根目录下。新建一个Default.aspx。[xhtml] view plaincopyh
复制链接

扫一扫

专栏目录