javascript - 如果列的所有单元格均为空，extjs 隐藏列

Question

如果列中的所有单元格均为空，我尝试隐藏该列。我试图通过迭代商店来在列监听器中执行此操作，但我猜当时商店尚未填充。有什么建议来实现此功能吗？

Ext.define('com.abc.MyGrid' , {
    extend: 'Ext.grid.Panel',
        store : 'MyStore',
    columns : [{
        text : 'col1',
        sortable : true,
        dataIndex : 'col1' 
    }, {
        text : 'col2 ',
        sortable : true,
        dataIndex : 'col2',
                listeners:{
            "beforerender": function(){
                console.log(this.up('grid').store);
                this.up('grid').store.each(function(record,idx){
                                        // if all are null for record.get('col1')
                                        // hide the column
                     console.log(record.get('col1')); 
                });
            }
        } 
    }

})

但这不起作用。基本上，列监听器“渲染之前”中的存储循环不会执行，因为上面的 console(this.up('grid').store) 打印带有值的存储。

Answer 1

给你，它不能处理所有事情，但应该足够了。

Ext.define('HideColumnIfEmpty', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugin.hideColumnIfEmpty',

    mixins: {
        bindable: 'Ext.util.Bindable'
    },

    init: function(grid) {
        this.grid = grid;
        this._initStates();
        this.grid.on('reconfigure', this._initStates, this);
    },

    _initStates: function(store, columns) {
        var store = this.grid.getStore(),
            columns = this.grid.columns;

        this.bindStore(store);
        this.columns = columns;

        if(store.getCount() > 0) {
            this._maybeHideColumns();
        }
    },
    /**
     *@implement
     */
    getStoreListeners: function() {
        return {
            load: this._maybeHideColumns
        };
    },

    _maybeHideColumns: function() {
        var columns = this.columns,
            store = this.store,
            columnKeysMc = new Ext.util.MixedCollection();

        Ext.Array.forEach(columns, function(column) {
            columnKeysMc.add(column.dataIndex, column);
        });

        Ext.Array.some(store.getRange(),function(record){
            //don't saw off the branch you are sitting on
            //eachKey does not clone
            var keysToRemove = [];

            columnKeysMc.eachKey(function(key) {
                if(!Ext.isEmpty(record.get(key))) {
                    keysToRemove.push(key);
                }
            });

            Ext.Array.forEach(keysToRemove, function(k) {
                columnKeysMc.removeAtKey(k);
            });

            return columnKeysMc.getCount() === 0;
        });

        columnKeysMc.each(function(column) {
            column.hide();
        });
    }
});

这是一个例子:

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        { text: 'Name',  dataIndex: 'name' },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone' },
        { text: 'Says Doh', dataIndex: 'saysDoh'}
    ],
    plugins: {ptype: 'hideColumnIfEmpty'},
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

您可以在示例中看到 saidDoh 列已隐藏。