extjs 表格如何实现动态添加列

RT 求源码 要能用的231506947qqcom
2025-02-14 12:58:15
推荐回答(1个)
回答(1):

Ext.onReady(function() {
 
  var sm=new Ext.grid.CheckboxSelectionModel();
 
  var cm=[new Ext.grid.RowNumberer(),sm,
 
   {header:"编号", dataIndex:"id", width:65,hidden : true},
 
   {header:"名称", dataIndex:"name", width:65},
 
   {header:"路径", dataIndex:"url", width:65}
 
   ]
 
  var fd = ["id", "name", "url"];
 
  var store=new Ext.data.JsonStore({
 
   fields:fd
 
  })
 
  var data=[{
 
     id:1,name:"xiao",url:"sssssssssss",sex:"male"
 
     }]
 
  var grid=new Ext.grid.GridPanel({
 
   sm:sm,
 
   columns:cm,
 
   store:store,
 
   width:500,
 
   height:400,
 
   tbar:[{
 
    text:"生成",
 
    icon:"images/icons/add.png",
 
    cls:"x-btn-text-icon",
 
    handler:function(){
 
     var res = {fields:[{name:"sex"}],columns:[{header:'性别',dataIndex:"sex",width:65}]};
 
     var columns = res.columns;
 
     var fields = res.fields;
 
     for (var i = 0; i < fields.length; i++) {
 
      fd.push(fields[i].name);
 
      cm.push(columns[i]);
 
     }
 
     //重新绑定store及column
 
     ss=new Ext.data.JsonStore({
 
       fields:fd
 
      });
 
     grid.reconfigure(ss,new Ext.grid.ColumnModel(cm));
  
     ss.loadData(data)
 
    }
 
   }]
 
    
 
  })
 
   
 
  var win=new Ext.Window({
 
   title:"sssssss",
 
   width:700,
 
   height:500,
 
   layout:"fit",
 
   closable:true,
 
   items:[grid]
 
  })
 
  win.show();
 
});

主要是grid里的reconfigure这个方法:配置grid以使用一个不同的Store和Column Model并触发'reconfigure'事件。 视图将会被绑定到新的对象并刷新。

你自己引用ext3的类库吧~