添加/删除列从Extjs4网格

Question

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

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

Answer 1

create function

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 without store

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

Answer 2

我解决了这个问题，并将所有显示的列保存在数组中。然后我有一个更新网格的函数

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 schema。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; }

}