PDA

View Full Version : Grid Height should dynamically Grow/Shrink based on records in Extjs 4.1



arkarthickraja
29 Aug 2012, 6:57 AM
Hi,
I am using Ext.grid.panel to display the the row grid with pagination bar in screen.My requirement is grid should grow/shrink based on the number of records displayed in the Grid.
Example, if the number of records in grid 10 then the grid should display all records, if the number of records is 5,then grid height should be reduced to show only five records.

Any help would be appreciated.

scottmartin
29 Aug 2012, 7:59 AM
Please review the following:



Ext.onReady(function(){

Ext.define('MyStore', {
extend: 'Ext.data.Store',
alias: 'store.mystore'

,
fields: ['name', 'age'],
data: [
{ name: 'Michael', age: 39 },
{ name: 'Phyllis', age: 39 },
{ name: 'Andy', age: 35 },
{ name: 'Jim', age: 32 },
{ name: 'Pam', age: 31 }
]
});

var grid1 = Ext.widget('grid', {
title: 'Grid 1',
columns: [{
text: 'name',
dataIndex: 'name'
}, {
text: 'age',
dataIndex: 'age'
}],
store: {
type: 'mystore'
},
// height: 200,
width: 300,
renderTo: Ext.getBody()
});

var grid2 = Ext.widget('grid', {
title: 'Grid 1',
columns: [{
text: 'name',
dataIndex: 'name'
}, {
text: 'age',
dataIndex: 'age'
}],
store: {
type: 'mystore'
},
// height: 200,
width: 300,
renderTo: Ext.getBody()
});

var grid3 = Ext.widget('grid', {
title: 'Grid 1',
columns: [{
text: 'name',
dataIndex: 'name'
}, {
text: 'age',
dataIndex: 'age'
}],
store: {
type: 'mystore'
},
// height: 200,
width: 300,
renderTo: Ext.getBody()
});

grid2.on('viewready', function() {
grid2.getStore().removeAt(0);
});

grid3.on('viewready', function() {
grid3.getStore().filter('age', 39);
});

});


Scott.

arkarthickraja
30 Aug 2012, 1:05 AM
In your example, the grids are having fixed size of rows, but i need the records to be added dynamically using add button also some record can be deleted from the grid using delete button with pagination toolbar.
Also i have text area in grid when the height of the text area is more than 2 rows i am not able to see few records as they are hidden behind the Pagination toolbar. If the text area height is 1 row, i am able to see all the records in gird.
I am wondering why all the records are not visible when the a row text area height is more than 2 rows.

KajaSheen
12 Feb 2013, 12:55 AM
This is my solution, which is far from perfect right now, but maybe a starting point for others in this direction:


Ext.widget('grid', {
height: 500,
uxResized: false,
listeners: {
afterLayout: function() {
var me = this,
store = me.getStore();

if (!me.rendered || me.uxResized || store.isLoading()) { return false; }

var viewHeight = this.getView().getHeight(),
tableHeight = this.getView().table.getHeight(),
height = this.getHeight() + 20; //account for scrollbar

if(viewHeight > tableHeight) {
me.uxResized = true;
me.setHeight(height - (viewHeight - tableHeight));
}
}
}
});

I had to add the extra Parameter uxResized, because otherwise this method would cause an "too much recursion". I guess setting the height triggers the afterLayout Event again. Also, when the store was not loaded yet, I got an error that some dom element is undefined, which I did not further investigate.

Currently the grid is initially rendered at the given height and then shrunk down. Given a mayHeight and a lower initial height would look better, but I did not do that yet.

My final solution (given a little more time) would be do make this a configurable plugin. If I find some spare time, I might go around refactoring this a little bit more for easier usage.