從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

來源

2011-11-06 Gregory Nozik

爲什麼你只配置列的所有 '桶'，和有問題秀並在需要時隱藏它們？當你刪除所有並添加新設置的選項幾乎就像摧毀整個網格，並創建一個新的... – 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; } 


}

來源

2011-11-30 11:07:14

創建功能

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();

來源

2012-10-28 19:46:15

從Extjs4網格添加/刪除列

回答

相關問題