Hide rows in grid

Question

I need to initial grid which will showed only 10 records, although it is more, the rest should be hidden, for example there will be a button under grid which on click, will display all the rest. Prompt way as it can be implemented. P.S. : extjs 5.0.1

Answer 1

Two ways of doing this. First is to specifically set a property on each record to say that it should be hidden initially, then use a filter on the store to ensure they are not shown:

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

Another approach is to filter on the index of the items in the store:

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

Here we use the indexOf method on the store instance to filter out anything past index 1 in the store.