从Extjs4网格添加/删除列

问题描述：

我需要一个将从ExtJS 4网格添加/删除列的函数。网格是用Extjs 4编写的。当我谷歌后，我发现了下面的代码。从Extjs4网格添加/删除列

function reconfigure(store, columns) { 
    // debugger; 
    var me = grid; 

    if (me.lockable) { 
     me.reconfigureLockable(store, columns); 
     return; 
    } 

    if (columns) { 
     me.headerCt.removeAll(); 
     me.headerCt.add(columns); 
    } 

    if (store) { 
     store = Ext.StoreManager.lookup(store); 
     me.bindStore(store); 
     // me.getView().refresh(); 
    } else { 
     me.getView().refresh(); 
    } 
}

此代码，我打电话给这个函数

var store = grid.getStore(); 
reconfigure(store, fields);

这是更换标题行，但不会刷新数据。我正在使用ExtJs 4.0

为什么你只配置列的所有 '桶'，和有问题秀并在需要时隐藏它们？当你删除所有并添加新设置的选项几乎就像摧毁整个网格，并创建一个新的... – bensiu

我试过了，但它的工作非常缓慢 –

你不应该将网格传递到reconfigure函数吗？一个全局范围的变量是一个坏主意 – JamesHalsall

答

我解决了这个问题，我将所有显示的列保存在数组中。比我有更新电网

function ShowHideColumns(settingsColumn) { 
    var gridColumns = grid.columns; 
    var len = gridColumns.length; 
    for (var j = 0; j < len; j++) { 
     var gridColumn = gridColumns[j]; 
     for (var i = 0; i < settingsColumn.length; i++) { 
      var columnSetting = settingsColumn[i]; 
      if (gridColumn.text == columnSetting.gridName) { 
       if (columnSetting.isActive && gridColumn.hidden) 
        gridColumn.show(); 
       else if (!gridColumn.hidden && !columnSetting.isActive) 
        gridColumn.hide(); 
       break; 
      } 
     } 
    } 
}

见settingColumn模式下面的函数。 settingsColumn是保存settingColumn项目的数组。每个项目描述网格中的列信息。

[DataContract] 
[System.SerializableAttribute()] 
public partial class SettingsSettingColumn 
{ 


    [System.Xml.Serialization.XmlAttributeAttribute()] 
    [DataMember] 
    public string name { get; set; } 

    [System.Xml.Serialization.XmlAttributeAttribute()] 
    [DataMember] 
    public string gridName { get; set; } 

    [System.Xml.Serialization.XmlAttributeAttribute()] 
    [DataMember] 
    public string type { get; set; } 

    [System.Xml.Serialization.XmlAttributeAttribute()] 
    [DataMember] 
    public bool isActive { get; set; } 

    [System.Xml.Serialization.XmlAttributeAttribute()] 
    [DataMember] 
    public float width { get; set; } 


}

答

创建功能

GetProductsGetStore: function(fiels) {  
    var ret = Ext.create('Ext.data.Store', { 
     autoLoad: false, 
     proxy: { 
      type: 'ajax', 
      url: '/index.php/ajax/ProductsGet', 
      reader: { 
       type: 'json' 
      }, 
      extraParams: { 
       currency: '0' 
      } 
     }, 
     fields: fiels 
    }); 

    return ret; 
}

和GridPanel中没有储存

this.Product = Ext.create('Ext.grid.Panel', { 
    width: '100%', 
    height: 154, 
    border: 0, 
    multiSelect: true, 
    allowDeselect: true, 
    columns: [ 
     { 
      text: 'article', 
      dataIndex: 'article', 
      flex: 2 
     }, 
     { 
      text: 'name', 
      dataIndex: 'name', 
      flex: 2 
     }, 
     { 
      text: 'price', 
      dataIndex: 'price', 
      flex: 1 
     } 
    ] 
});

动态编辑网格

var fields = [ 
    'id', 
    'name', 
    'checked', 
    'price', 
    'currency', 
    'src' 
]; 
this.Product.reconfigure(th.GetProductsGetStore(fields)); 
this.Product.store.load();

从Extjs4网格添加/删除列

相关推荐