PDA

View Full Version : I'm getting scroll bars when I shouldn't, and it only happens in Chrome.



Urik
19 Oct 2012, 4:20 AM
I'm getting started on Ext using Ext JS 4 and I'm running with a strange behavior on Google Chrome. I have a viewport with a fit layout. Inside it, I have a panel with a border layout. It has a southern region, a western region, and a central region. The western region has a tabpanel, and inside the first tab I have an accordion panel.
The problem is that when I collapse a panel, or reduce the size of the western region, in Chrome I get evil slider bars. On firefox it works just fine, it only happens in Chrome. It doesn't happen when I'm on the tab 2 (the one that doesn't have the accordion panel). Any idea of what could be the problem?
These are pictures depicting the problem: http://imgur.com/a/vgbcE
Here is the source code:



Ext.application({
name: 'HelloExt',
launch: function() {
var viewPort = Ext.create('Ext.container.Viewport', {
layout: 'fit',
renderTo: 'layout'
});

var mainLayout = Ext.create('Ext.panel.Panel', {
width: 'auto',
layout: 'border',
title : 'Gis Web',
collapasible: true,
defaults: {
split: true,
border: false,
collapsible: true,
manageOverflow: 2
},
items: [
{
region: 'center',
collapsible: false,
id: 'center-panel',
border: true
},
{
id: 'south-panel',
region: 'south',
height: 100
},
{
id: 'west-panel',
region: 'west',
width: 200,
layout: 'fit'
}
]
});

var accordionPanel = Ext.create('Ext.panel.Panel', {
id: 'accordion-panel',
layout: 'accordion',
tabBar: {
plain: true
},
border: false,
items: [
{
id: 'accordion-1',
title: '1'
},
{
title: '2'
}
]
});

var tabPanel = Ext.createWidget('tabpanel', {
activeTab: 0,
defaults: {
autoScroll: true,
border: false
},
layout: 'fit',
items: [
{
id: 'tab-1',
title: 'Tab 1',
layout: 'fit'
},
{
layout: 'fit',
title: 'Tab 2'
}
]
});

Ext.getCmp('tab-1').add(accordionPanel);

var panel = Ext.getCmp('west-panel');
panel.add(tabPanel);
viewPort.add(mainLayout);
}
});

scottmartin
19 Oct 2012, 11:14 AM
If you clean up your layout a bit, it should resolve the issue.



Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',

layout: {
type: 'border'
},

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'panel',
region: 'center',
title: 'My Panel'
},
{
xtype: 'tabpanel',
region: 'west',
width: 200,
collapsible: true,
activeTab: 0,
items: [
{
xtype: 'panel',
layout: {
type: 'accordion'
},
title: 'My Panel',
items: [
{
xtype: 'panel',
collapsed: false,
title: 'My Panel'
},
{
xtype: 'panel',
collapsed: true,
title: 'My Panel'
}
]
},
{
xtype: 'panel',
title: 'Tab 2'
}
]
},
{
xtype: 'panel',
region: 'south',
split: true,
height: 150,
collapsible: true,
title: 'My Panel'
}
]
});

me.callParent(arguments);
}

});

Ext.onReady(function(){

Ext.create('MyApp.view.MyViewport', {});

});


Scott.

Urik
22 Oct 2012, 4:21 AM
Thank you. Looks like my problem was the autoScroll property.