Hide rows in grid - extjs5

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.