PDA

View Full Version : Ext Js 4.2 Grid panel not showing Horizontal scrollbars



funnyfox
19 Jun 2014, 5:36 AM
So I want to give my Grid Panel height 100% so that the grid is fit in my big screen, when I give height and width in pixels both horizontal and vertical scrollbars are working fine i.e., they're enabled when there are more columns and disabled when there are less columns.

Here is my code


Ext.define('tz.ui.TsGridPanel', {
extend: 'Ext.grid.Panel',
frame:true,
anchor:'100%',
width :'100%',
height:'100%',
overflowX: 'scroll',
renderTo: Ext.getBody(),
title:'some title',
loadMask: false,
sortable : true,
deferRowRender: false,
features:[{
ftype:'summary'
}],

initComponent: function() {
var me = this;
me.store = ds.tneSummaryStore;
me.selModel = Ext.create('Ext.selection.CheckboxModel');
me.columns = [ { //some cols
}]

me.viewConfig = {
stripeRows: true,
trackOver: false,
getRowClass: function (record, rowIndex, rowParams, store) {
return record.get('type').match('VE') || record.get('type').match('VS') ? 'back-blue' : '';
},
};
});



The above panel is kept inside a mgmtPanel


Ext.define('tz.ui.TsMgmtPanel', {
extend: 'tz.ui.BaseFormPanel',
activeItem: 0,
layout: {
type: 'card',
},
title: '',
bodyPadding: 10,
border:false,
frame : false,
initComponent: function() {
var me = this;
me.tPanel = new tz.ui.TsSearchPanel({manager:me});

initScreen: function(){
this.clearMessage();
this.getLayout().setActiveItem(0);
}
}


And MgmtPanel.initscreen is called when a link is clicked.

I tried overflow-x, autoscroll:true. Nothing worked

autoscroll:'true' --> Horizontalscroll is displayed in disabled state
overflow-x is --> not showing any vertical scrollbars.

scottmartin
19 Jun 2014, 1:54 PM
Your code seems incomplete.

You can use a viewport to consume the body with a layout: 'fit' and place the grid inside and that should be it.

Since you are using a card layout, that defaults to 'fit'. There should be no need to add all of the other configs to resize an show the scrollbars properly.