Extjs动态生成表头

原文：Extjs动态生成表头

源代码下载地址

var cm = [{

       header : "编号",

       dataIndex : "id",

       width : 65

      }, {

       header : "名称",

       dataIndex : "name",

       width : 65

      }, {

       header : "路径",

       dataIndex : "url",

       width : 65

      }]

      var colModel = new Ext.grid.ColumnModel({

       columns : cm

      });

      var fd = ["id", "name", "url"];

      var store = new Ext.data.JsonStore({

       fields : fd

      })

      var grid = new Ext.grid.GridPanel({

       cm : colModel,

       store : store,

       tbar : [{

        xtype : "combo",

        id : 'my_combo',

        triggerAction : "all",

        store : ["新增列","更换列"],

        mode : 'local',

        resizable : true,

        editable: false,

        lazyRender : true,

        width : 100

       },"-",{

        text : "生成",

        icon : "images/icons/add.png",

        cls : "x-btn-text-icon",

        handler : function() {

         var temp = Ext.getCmp('my_combo').getValue();

         if(temp == null || temp == "") return;

         var newfd="";

         var newcm="";

         if(temp == "新增列"){//在原有列的基础上追加新的列

          newfd = fd;

          newcm = cm;

          var res = {//要添加的列信息,可以动态获取

           fields : [{

            name : "sex"

           }],

           columns : [{

            header : '性别',

            dataIndex : "sex",

            width : 65

           }]

          };

          var fields = res.fields;

          var columns = res.columns;

          for (var i = 0; i < fields.length; i++) {//自己可以写控制不重复追加

           newfd.push(fields[i]);

           newcm.push(columns[i]);

          }

         }else if(temp == "更换列"){//更换表格中所有的列

          var res = {//要更换的列信息,可以动态获取

           fields : ["number", "age", "address"],

           columns : [{

            header : '号码',

            dataIndex : "number",

            width : 80

           },{

            header : '年龄',

            dataIndex : "age",

            width : 80

           },{

            header : '地址',

            dataIndex : "address",

            width : 80

           }]

          };

          newfd = res.fields;

          newcm = res.columns;

         }



         // 重新绑定store及column

         newStore = new Ext.data.JsonStore({

          fields : newfd

         });

         var newColumnModel = new Ext.grid.ColumnModel(newcm);

         grid.reconfigure(newStore , newColumnModel);//使用新的Store和ColumnModel并刷新



         //列变动之后，就可以做数据的加载了，加载的就是对应新的列的数据了。



        }

       }]

      })





      var myWin = new Ext.Window({

       title:"动态改变ColumnModel",

       width : '600',

       height : 500,

       frame : true,

       layout : 'fit',

       items : [grid]

      });

      myWin.show();

由最代码官方编辑于2014-6-6 11:39:43