PDA

View Full Version : Scrollbar misplaced on TabPanel with Accordion



farracha
9 Oct 2009, 12:19 AM
Hi,

I want to implement an Accordion inside a TabPanel. And I need the Tab to have a scrollbar when the Accordion expands to avoid the Accordion panels disappear behind the Tab.

So far so good. I managed to introduce the scrollbar but unfortunately the Accordion also need a scrollbar inside for each panel.
The problem is that the accordion scrollbar appears outside behind the Tab scrollbar.

If I set the Accordion autoWidth = false, the Accordion Scrollbar appears correctly but I need to give the tabpanel a width larger than the accordion (19px), to avoid the Tab scrollbar being in front of the accordion scrollbar. But It is "ugly" to have a space of 19px when no scrollbar is needed.
Also, when the tab is resized with the window, the Accordion width stays the same.


If I set autoWidth = true, the accordion scrollbar appears outside behind the Tab scrollbar.

I have tried a lot of configurations and none of them worked.
What can I do to avoid such situation?



WebApp.ThemeWin = Ext.extend(Ext.Window, {
AccordionThemes: null,
TabsThemes: null,
SearchThemes: null,
titleText: 'Themes',
id: "winthemesId",
layout: 'fit',

initComponent: function() {
this.SearchThemes = new Skysoft.LisMapas.WebApp.ThemeHelper.FreeSearchField({
id: 'themeSearchButton',
fieldLabel: '',
hideLabel: true,
width: 238
});

this.AccordionThemes = new Ext.Panel({
layout: 'accordion',
id: 'accthemesid',
layoutConfig: {
scrollOffset: 19,
frame: false,
activeOnTop: false,
autoWidth: true,
animate: true,
collapseFirst: true,
fill: false,
border: false,
hideCollapseTool: false
}
});

this.TabsThemes = new Ext.TabPanel({
id: 'tabthemesid'
, activeTab: 0
, layoutOnTabChange: true
, width: 300
, frame: false
, defaults: { autoScroll: true }
, layoutConfig: {
scrollOffset: 19
}
, border: false
, items: [
{
title: 'Themes'
, items: this.AccordionThemes
}
, {
title: 'Visible Themes'
, frame: false
}, {
title: 'Results'
, frame: false
}]
});

WebApp.ThemeHelper.ThemesLoad();

Ext.apply(this, {
title: this.titleText,
closable: true,
draggable: true,
closeAction: "close",
collapsible: true,
tbar: [this.SearchThemes],
items: [this.TabsThemes]
});

WebApp.ThemeWin.superclass.initComponent.apply(this, arguments);
}
});


WebApp.ThemeHelper.ThemesLoad = function() {
Ext.Ajax.request({
url: 'AspxBL/GetThemes.aspx',
method: 'POST',
params: { Cmd: 'GetTree' },
success: function(result, request) {
var treenodes = Ext.util.JSON.decode(result.responseText);
var winthemes = Ext.getCmp('winthemesId');
for (var i = 0; i < treenodes.length; i++) {
var treeaux = new Ext.ux.tree.RemoteTreePanel({
id: 'themetree' + i
, rootVisible: false
, border: false
, autoScroll: true
, root: {
nodeType: 'async'
, id: 'root'
, text: 'Root'
, expanded: true
, uiProvider: false
}
, loader: {
url: 'aspxbl/GetThemes.aspx'
, preloadChildren: true
, baseParams: {
Cmd: 'GetTreeByParent'
, Parent: treenodes[i].pnodeid
, Name: ''
}
}
});

var aux = new Ext.Panel({
title: treenodes[i].text
, layout: 'fit'
, height: 300
, width: 280
, border: false
, iconCls: 'tabs'
, frame: false
, collapsed: true
, items: treeaux
});

winthemes.AccordionThemes.add(aux);
}

winthemes.doLayout();
},
failure: function(result, request) {
}
});
};

Condor
9 Oct 2009, 2:33 AM
Accordion layout has problems with sizing items.

You could try if this override (http://www.extjs.com/forum/showthread.php?p=396044#post396044) fixes the problem.