在ExtJS网格面板中自动隐藏“空”列

时间:2011-07-15 18:05:57

标签: grid hide show extjs

是否有ExtJS网格的插件会自动隐藏“空”列?

如果底层商店中所有记录的映射字段的值与给定的“空白”标准(给定值或更好的函数)匹配,则列应被视为“空”。

底层存储上的运行时添加/删除/更新操作应相应地隐藏/取消隐藏列。

谢谢!

2 个答案:

答案 0 :(得分:1)

我必须做类似的事情...这里是一个“隐藏列模型”,它将根据“fieldHasData”方法的返回值隐藏/显示列...它可能是一个接近的开始你问的是

Ext.ux.grid.HidingColumnModel = function() {

    var Class = Ext.extend(Ext.grid.ColumnModel, {        
        constructor:function(config) {
            Class.superclass.constructor.call(this, config);
        },

        onGridStoreLoad:function(store, records, options) {
            store.fields.each(function(item, index, length) {
                var colIndex = this.findColumnIndex(item.name);
                if (colIndex >= 0) {
                    this.setHidden(colIndex, !this.fieldHasData(item.name, records));
                }
            }, this);
        },

        fieldHasData:function(field, records) {
            var hasData = false;
            Ext.each(Ext.pluck(records, "data"), function(item, index, allItems) {
                if (item[field]) {
                    hasData = true;
                }
            });
            return hasData;
        }
    });

    return Class;
}();

然后在你的网格中......在列模型上添加监听器

var columnModel = new Ext.ux.grid.HidingColumnModel(),
    store = ... {create your store},
    gridPanel = new Ext.grid.GridPanel({
        ...
        store:store,
        columnModel:columnModel,
        ...
    });

store.on('load', columnModel.onGridStoreLoad, columnModel);

答案 1 :(得分:0)

由于我无法在任何地方找到类似的插件,我自己实现了它:)

代码在extjs / sencha论坛上:

http://www.sencha.com/forum/showthread.php?140685-Grid-Plugin-dynamically-hiding-columns-matching-quot-emptiness-quot-criteria&p=626670#post626670