0

如果列中的所有单元格都是空的，我试图隐藏该列。我试图通过遍历商店在列侦听器中执行此操作，但我猜当时没有填充商店。有什么建议可以实现这个功能吗？

Ext.define('com.abc.MyGrid' , {
    扩展：'Ext.grid.Panel'，
        商店：'我的商店'，
    列 ： [{
        文本：'col1'，
        可排序：真，
        数据索引：'col1'
    }, {
        文本：'col2'，
        可排序：真，
        数据索引：'col2'，
                听众：{
            “之前”：函数（）{
                console.log(this.up('grid').store);
                this.up('grid').store.each(function(record,idx){
                                        // 如果record.get('col1')全部为空
                                        //隐藏列
                     console.log(record.get('col1'));
                });
            }
        }
    }

})

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

4

2 回答 2

2

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

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

您可以在示例中看到 sayDoh 列被隐藏。

于 2013-02-28T05:41:31.860 回答
0

如果要遍历商店，则需要在商店的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();
    }
});
于 2013-02-27T08:48:39.967 回答