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