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

})

但这不起作用。基本上，列侦听器“在渲染之前”的存储循环没有执行，因为上面的控制台（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()
});

您可以在示例中看到隐藏了Doh列。

Answer 2

如果要遍历商店，则需要在商店的load事件中放置一个侦听器。 beforerender并不意味着您的商店已经加载。

我会在initComponent中创建你的商店。像这样：

Ext.define('com.abc.MyGrid', {
    extend: 'Ext.grid.Panel',
    columns: [{
        text: 'col1',
        sortable: true,
        dataIndex: 'col1'
    }, {
        text: 'col2 ',
        sortable: true,
        dataIndex: 'col2'
    },

    initComponent: function () {
        var me = this;
        //Create store
        var myStore = Ext.create('MyStore');
        myStore.load(); // You can remove this if autoLoad: true on your store.
        //Listen to load event (fires when loading has completed)
        myStore.on({
            load: function (store, records, success) {
                store.each(function (record, idx) {
                    console.log(record.get('col1'));
                });
            }
        });

        //Apply the store to your grid
        Ext.apply(me, {
            store: myStore
        });

        me.callParent();
    }
});

如果列的所有单元格都为空，则extjs隐藏列

2 个答案: