extjs表格新增列的簡單介紹

本文目錄一覽：

• 1、extjs 表格如何實現動態添加列
• 2、extjs動態向可編輯表格EditorGridPanel 添加一個列ColumnModel，並讓列能夠被修改
• 3、extjs怎麼在grid里新加一列,這列的數據是從另外的表裡讀出的數據

extjs 表格如何實現動態添加列

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的類庫吧~

extjs動態向可編輯表格EditorGridPanel 添加一個列ColumnModel，並讓列能夠被修改

ext3.0的EditorGridPanel 都有自帶的編輯啊

ext4.0的要在gridpanel加編輯插件

extjs怎麼在grid里新加一列,這列的數據是從另外的表裡讀出的數據

在表格的cm對象里添加以下內容就會多出一列超鏈接，超鏈接都顯示為「修改」，點擊它會獲取該行Name列的數據並跳轉到a.php：

{

header : ‘操作’,

dataIndex : ”,

width : 40,

menuDisabled:true,

renderer:function(value, metadata, record, rowIndex, colIndex, store){

var url=’a.php?name=’+record.get(“Name”);

var str=’a href=”‘+url+'”修改/a’;

return str;

}