Extjs动态生成表头-蒲公英云

Extjs动态生成表头

蔚落 2022-09-22 01:29 368阅读 0赞

原文：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();