Question

我需要一个可以从ExtJS 4网格添加/删除列的函数。网格是用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

创建功能

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

和没有商店的网格面板

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架构。 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; }


}

从Extjs4 Grid添加/删除列

2 个答案: