extjs 表格数据重新加载_Extjs动态加载grid表格

通常情况下，我们编写Extjs表格grid的时候，都是静态的，也就是说grid的表头、列都是固定的。在实际开发中，往往面对很多“非主流”的情况，就比如我曾经遇到的一个实际开发的案例，要求前台以Extjs Grid来显示数据库的表并进行编辑操作。数据库中有很多表，由于每张数据库表的字段数目是不同的，所以需要事先通过后台进行数据库表的字段计算，然后输出到前台给以显示。

还好这不是什么难事，因为Extjs的所有的配置格式基本上都是Json格式的，所有只要Grid的相关配置参数(如columnModel、fields)是Json格式的，那就不管是前台写死的还是后台动态输出的，都无关紧要。

本例，通过Extjs的ajax来请求后台Servlet的输出，然后决定Grid的显示效果：

(图一)Extjs动态加载grid的效果一

之后，我们更改Servlet的输出方式，或者更改前台Extjs Ajax中url的地址，将显示如下效果：

(图二)后台决定前台Grid显示效果图二，可以看到列及列数都已经变化

来看index.jsp的代码：

1

3

4

5

6

7

Extjs动态加载Grid表格

8

9

10

11

12

13 14 Ext.onReady(function(){15 Ext.Ajax.request({16 　　　　　　　　　　//加载servlet输出17 url:"../PrintGridInfoServlet",18 　　　　　　　　　　//url:"../PrintGridInfoTwo",19 success:function(response,config){20 　　　　　　　　　　　　　//对后台输出的Json进行解码21 json=Ext.util.JSON.decode(response.responseText);22 　　　　　　　　　　　　　　//这里需要从后台动态加载23 　　　　　　　　　　　　//这里的json.columnModel是从后台加载来的24 　　　　　　　　　　　　varcm= newExt.grid.ColumnModel(json.columnModel);25 　　　　　　　　　　　　varstore= newExt.data.JsonStore({26 　　　　　　　　　　　　//下面两个参数也是从后台加载来的27 data:json.data,28 fields:json.fieldsNames29 });30 31 　　　　　　　　　　　　vargrid= newExt.grid.EditorGridPanel({32 title:'我是动态加载的！',33 region:'center',34 border:'true',35 stripeRows:true,36 split:true,37 renderTo:'dyngrid',38 height:300,39 width:400,40 cm:cm,41 store:store42 });43 },44 failure:function(){45 alert("error");46 }47 });48 });49

50

51

52