extjs4动态列

  1. test.jsp
  2. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>  
  3. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
  4. <html>  
  5.   <head>  
  6.     <title>动态生成表格</title>  
  7.     <meta http-equiv="pragma" content="no-cache">  
  8.     <meta http-equiv="cache-control" content="no-cache">  
  9.     <meta http-equiv="expires" content="0">      
  10.     <link rel="stylesheet" type="text/css" href="js/extjs-4.1.0/resources/css/ext-all.css">   
  11.     <script type="text/javascript" src="js/extjs-4.1.0/bootstrap.js"></script>    
  12.     <script type="text/javascript" src="js/extjs-4.1.0/locale/ext-lang-zh_CN.js"></script>  
  13.    
  14.     <script type="text/javascript">  
  15.         Ext.onReady(function(){  
  16.            
  17.             //创建表格,可以加入更多的属性。  
  18.             Ext.create("Ext.grid.Panel",{   
  19.                 title:'动态表格~~~~~~~~~~~',  
  20.                 width:400,  
  21.                 height:300,   
  22.                 id : 'configGrid',    
  23.                 name : 'configGrid',    
  24.                 columns : [], //注意此行代码,至关重要  
  25.                 displayInfo : true,    
  26.                 emptyMsg : "没有数据显示",    
  27.                 renderTo:'grid',//渲染到页面  
  28.                 forceFit: true   
  29.             });    
  30.                  
  31.             //通过ajax获取表头已经表格数据  
  32.                Ext.Ajax.request({    
  33.                    url: 'js/calmm/data.json',  //从json文件中读取数据,也可以从其他地方获取数据   
  34.                    method : 'POST',    
  35.                    success : function(response) {    
  36.                     //将返回的结果转换为json对象,注意extjs4中decode函数已经变成了:Ext.JSON.decode  
  37.                     var json = Ext.JSON.decode(response.responseText); //获得后台传递json    
  38.                       
  39.                     //创建store  
  40.                     var store = Ext.create('Ext.data.Store', {    
  41.                         fields : json.fields,//把json的fields赋给fields    
  42.                         data : json.data     //把json的data赋给data    
  43.                     });   
  44.                      
  45.                     //根据store和column构造表格  
  46.                     Ext.getCmp("configGrid").reconfigure(store, json.columns);    
  47.                     //重新渲染表格  
  48.                     Ext.getCmp("configGrid").render();    
  49.                    }   
  50.                });   
  51.                   
  52.         })         
  53.     </script>  
  54.   </head>  
  55.     
  56.   <body>  
  57.     <!-- 将表格渲染在此处 -->  
  58.     <div id="grid"></div>  
  59.   </body>  
  60. </html>  

 

数据文件,data.json:

  1. {    
  2.     'fields': [    
  3.         {'name''id''type''int'},    
  4.         {'name''name''type''string'},    
  5.         {'name''sex''type''string'},  
  6.         {'name''add''type''string'}  
  7.     ],  
  8.     'data': [    
  9.         {'id''1''name''AAA''sex''男','add':'SSS'},    
  10.         {'id''2''name''BBB''sex''男','add':'SSS'},     
  11.         {'id''3''name''CCC''sex''男','add':'SSS'},     
  12.         {'id''4''name''DDD''sex''女','add':'是'},     
  13.         {'id''5''name''EEE''sex''男','add':'撒的发生'}   
  14.     ],    
  15.     'columns': [    
  16.         {'header''编号''dataIndex''id'},    
  17.         {'header''姓名''dataIndex''name'},    
  18.         {'header''性别''dataIndex''sex'},  
  19.         {'header''地址''dataIndex''add'}  
  20.     ]    
  21. }  

你可能感兴趣的:(extjs4)