Saturday, June 23, 2012

ExtJS4.1: gridPanel Scroll problem

It you have a gridPanel that it's scroll bar is not been shown .Look if you have the layout: 'absolute' config value set and try deleting that config parameter. That worked.for me.


Before:
Ext.define('WebMonitorClass.view.PlanillaActivacionGridPanel', {    
    extend: 'Ext.grid.Panel'
    ,alias: 'widget.planillaActivacionGridPanel'
    ,layout: 'absolute'
    ,frame:true
    ,columnLines: true    
    ,store: Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'column1',     type: 'string'}
           ,{name: 'column2',     type: 'string'}                      
        ],
        data: [['data 11','data12'],
                ['data 21','data22'],
            ]})
        ,x:0
        ,y:0
        ,height: 200
        ,width: 150
        ,columns: [
            {
                text     : 'Column 1',                
                sortable : false,
                width    : 75,
                dataIndex: 'column1'
            },{
                text     : 'Column2',              
                sortable : false,
                width    : 105,
                dataIndex: 'column2'
            }
        ]          
    ,initComponent: function() {                                                    
        this.callParent();        
    }    
    ,items: []
});


After (Scroll Works Perfectly)
Ext.define('WebMonitorClass.view.PlanillaActivacionGridPanel', {    
    extend: 'Ext.grid.Panel'
    ,alias: 'widget.planillaActivacionGridPanel'
    //,layout: 'absolute' // with layout:absolute the scroll doesn't work           
    ,frame:true
    ,columnLines: true    
    ,store: Ext.create('Ext.data.ArrayStore', {
        fields: [
           {name: 'column1',     type: 'string'}
           ,{name: 'column2',     type: 'string'}                      
        ],
        data: [['data 11','data12'],
                ['data 21','data22'],
            ]})
        ,x:0
        ,y:0
        ,height: 200
        ,width: 150
        ,columns: [
            {
                text     : 'Column 1',                
                sortable : false,
                width    : 75,
                dataIndex: 'column1'
            },{
                text     : 'Column2',              
                sortable : false,
                width    : 105,
                dataIndex: 'column2'
            }
        ]          
    ,initComponent: function() {                                                    
        this.callParent();        
    }    
    ,items: []
});


Reference:
http://docs.sencha.com/ext-js/4-1/#!/example/grid/grid-plugins.html

No comments: