如果该列的所有单元格都为空，则隐藏该列 [英] exjts hide column if all cells of the column are empty

问题描述

如果该列中的所有单元格都为空，则我试图隐藏该列.我正在尝试通过遍历存储在列侦听器中执行此操作，但是我猜当时存储没有被填充.有什么建议可以实现此功能?

I am trying to hide the column if all the cells in the column are empty. I am trying to do this in the column listener by iterating through the store but I guess the store isnt populated at that time. any suggestions to achieve this functionality?

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

})

但这是行不通的.基本上，在列监听器呈现前"中的store循环不会在上述控制台(this.up('grid').store)使用值打印商店的地方执行.

But this is isnt working. Basically the store loop in the column listener "before render" is not executing where as the above console(this.up('grid').store) prints the store with values.

推荐答案

在这里，它不能处理所有事情，但应该足够了.

Here you go, it doesn't handle everything but should be sufficient.

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":"[e-mail]",  "phone":"555-111-1224"  },
        { 'name': 'Bart',  "email":"[e-mail]",  "phone":"555-222-1234" },
        { 'name': 'Homer', "email":"[e-mail]",  "phone":"555-222-1244"  },
        { 'name': 'Marge', "email":"[e-mail]", "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列被隐藏.

You can see in the example that saysDoh column is hidden.

这篇关于如果该列的所有单元格都为空，则隐藏该列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！