Results 1 to 4 of 4

Thread: Grid Height should dynamically Grow/Shrink based on records in Extjs 4.1

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    46
    Vote Rating
    0
      0  

    Default Grid Height should dynamically Grow/Shrink based on records in Extjs 4.1

    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.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,407
    Answers
    716
    Vote Rating
    503
      0  

    Default

    Please review the following:

    Code:
    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.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    46
    Vote Rating
    0
      0  

    Default

    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.

  4. #4
    Sencha Premium Member
    Join Date
    Jan 2008
    Posts
    115
    Answers
    2
    Vote Rating
    28
      0  

    Default

    This is my solution, which is far from perfect right now, but maybe a starting point for others in this direction:

    PHP Code:
    Ext.widget('grid', {
        
    height500,   
        
    uxResizedfalse,
        
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •