0

列のすべてのセルが空の場合、列を非表示にしようとしています。ストアを反復して列リスナーでこれを実行しようとしていますが、その時点ではストアにデータが取り込まれていないと思います。この機能を実現するための提案はありますか?

Ext.define('com.abc.MyGrid' , {
    拡張: 'Ext.grid.Panel',
        ストア：「マイストア」、
    列: [{
        テキスト: 'col1',
        ソート可能：真、
        dataIndex : 'col1'
    }、{
        テキスト: 'col2',
        ソート可能：真、
        dataIndex : 'col2',
                リスナー:{
            "beforerender": function(){
                console.log(this.up('grid').store);
                this.up('grid').store.each(function(record,idx){
                                        // record.get('col1') のすべてが null の場合
                                        // 列を隠す
                     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()
});

この例では、saysDoh 列が非表示になっていることがわかります。

于 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 に答える