Question

我需要初始网格，它只显示10条记录，虽然它更多，其余部分应该被隐藏，例如网格下面会有一个按钮，点击后会显示所有其余的记录。可以实施的提示方式。附：：extjs 5.0.1

Answer 1

这样做的两种方法。首先是在每条记录上专门设置一个属性，说它应该最初隐藏，然后在商店上使用过滤器以确保它们不会显示：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var store = Ext.create('Ext.data.Store', {
            storeId:'simpsonsStore',
            fields:['name', 'email', 'phone', 'hidden'],
            data:{'items':[
                { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224", hidden: false  },
                { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234", hidden: false },
                { 'name': 'Homer', "email":"homer@simpsons.com",  "phone":"555-222-1244", hidden: true  },
                { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", hidden: true  }
            ]},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            },
            filters: [{ property: 'hidden', value: false }]
        });

        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' }
            ],
            height: 200,
            width: 400,
            renderTo: Ext.getBody(),
            bbar: [{
                xtype: 'button',
                text: 'Show All Rows',
                handler: function() {
                    store.clearFilter();
                }
            }]
        });
    }
});

另一种方法是过滤商店中商品的索引：

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var store = Ext.create('Ext.data.Store', {
            storeId:'simpsonsStore',
            fields:['name', 'email', 'phone', 'hidden'],
            data:{'items':[
                { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224", hidden: false  },
                { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234", hidden: false },
                { 'name': 'Homer', "email":"homer@simpsons.com",  "phone":"555-222-1244", hidden: true  },
                { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254", hidden: true  }
            ]},
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    rootProperty: 'items'
                }
            }
        });

        store.addFilter([
            function(item) {
                return store.indexOf(item) <= 1;
            }
        ]);

        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' }
            ],
            height: 200,
            width: 400,
            renderTo: Ext.getBody(),
            bbar: [{
                xtype: 'button',
                text: 'Show All Rows',
                handler: function() {
                    store.clearFilter();
                }
            }]
        });
    }
});

这里我们使用商店实例上的indexOf方法过滤掉商店中索引1之外的任何内容。

隐藏网格中的行

1 个答案: