从服务器端获取列和数据动态创建Ext.grid.EditorGridPanel

1、添加列的方法

 1 var addColumn = function(){
 2  this.fields = '';
 3  this.columns = ''; 
 4  this.addColumns=function(name,caption){
 5      if(this.fields.length > 0){
 6          this.fields += ',';
 7      }
 8      if(this.columns.length > 0){ 
 9          this.columns += ',';
10      } 
11      this.fields += '{name:"' + name + '"}';
12      this.columns += '{header:"' + caption + '",dataIndex:"' + name + '",sortable:true,hidden:true}';
13             
14  };
15 };

2、从服务器端获取列，然后动态添加到ColumnModel中

 1  Ext.Ajax.request({
 2    url : '/action',
 3    success:function(response,option){ 
 4      if(response.responseText==""){
 5            return;
 6      } 
 7      data = new addColumn();
 8      var res = Ext.util.JSON.decode(response.responseText); 
 9      for(var i=0;i<res.data.length;i++){
10             data.addColumns(res.data[i].id,res.data[i].name);
11      }
12      //动态生成GridPanel
13       makeGrid();
14    },
15    failure:function(){
16        Ext.Msg.alert("消息","查询出错----");
17    }
18  });

3、将列添加到grid中

 1                //动态生成GridPanel
 2                 var makeGrid = function(){
 3                     var cms = new Ext.grid.ColumnModel(eval('([' + data.columns + '])'));
 4                     cms.defaultSortable = true; 
 5                     var fields = eval('([' + data.fields + '])');
 6                        var store  = new Ext.data.Store({
 7                             proxy:new Ext.data.HttpProxy({ url : '/action'}),
 8                             reader:new Ext.data.JsonReader({totalProperty:"total",root:"data",fields :fields })
 9                     });
10                     store.load({params:{start:0,limit:50}});
11                     var grid =new Ext.grid.EditorGridPanel({
12                         id:'rigthBW',
13                         viewConfig:{forceFit:true,autoScroll:true},
14                         store:store,
15                         bodyStyle:'width:100%',
16                         cm:cms,
17                         height:540,
18                         autoWidth:true,                        
19                          layout : 'fit',//自适应布局
20                         border:"1",
21                         renderTo:"showBW",
22                         bbar:new Ext.PagingToolbar
23                                  ({
24                                      emptyMsg:"没有数据",
25                                      displayInfo:true,
26                                      displayMsg:"显示从{0}条数据到{1}条数据，共{2}条数据",
27                                      store:store,
28                                      pageSize:50,
29                                      refreshText:"刷新列表"
30                                  }) 
31                     });
32                     grid.loadMask.msg='正在加载.........';
33                 }
34                }

 

posted @ 2013-09-06 10:40  爱笑的狐狸  阅读(550)  评论(0)  编辑  收藏  举报