PDA

View Full Version : The order of items effects to display scroll bar



t800t8
1 Oct 2009, 12:52 AM
I set up a Window as below


this.selectorPanel = new Ext.Panel({
id: 'selectorPanel',
autoScroll: true,
items: [this.selectorView],
tbar: [{
xtype: 'tbbutton',
text: 'Choose'
}, {
xtype: 'tbspacer',
width: 5
}, {
xtype: 'label',
id: 'selectorNameLabel'
}, {
xtype: 'tbfill'
}, {
xtype: 'tbbutton',
text: 'Save'
}, {
xtype: 'tbbutton',
text: 'Add',
handler: SpatialMap.Function.bind(this.showStorePanel, this)
}]
});

this.storePanel = new Ext.Panel({
id: 'storePanel',
autoScroll: true,
hidden: true, // hide by default
tbar: [{
xtype: 'tbbutton',
text: 'Back',
handler: SpatialMap.Function.bind(this.showSelectorPanel, this)
}, {
xtype: 'tbspacer',
width: 5
}, {
xtype: 'label',
html: '<b>Add theme</b>'
}, {
xtype: 'tbfill'
}, {
xtype: 'textfield',
id: 'theme-filter',
enableKeyEvents: true,
listeners: {
keyup: SpatialMap.Function.bind(this.searchTheme, this)
}
}],
buttons: [{
text: 'Top 10'
}, {
text: 'Subjects'
}, {
text: 'Newest'
}, {
text: 'More...'
}],
items: [this.storeView]
});

this.detailsPanel = new Ext.Panel({
id: 'detailsPanel',
hidden: true, // hide by default
tbar: [{
xtype: 'tbbutton',
text: 'Back',
handler: SpatialMap.Function.bind(this.showSelectorPanel, this)
}, {
xtype: 'tbspacer',
width: 5
}, {
xtype: 'label',
id: 'themeNameLabel'
}, {
xtype: 'tbfill'
}, {
xtype: 'tbbutton',
id: 'prevThemeButton',
text: 'Prev'
}, {
xtype: 'tbbutton',
id: 'nextThemeButton',
text: 'Next'
}],
buttons: [{
text: 'Style'
}],
items: [{
xtype: 'panel',
items: [{
xtype: 'label',
id: 'abstractTextLabel'
}, {
xtype: 'label',
html: 'Transparency'
}, {
xtype: 'slider',
id: 'displayTransparencySlider',
increment: 1,
width: 200
}, {
xtype: 'label',
html: 'Scale'
}, {
xtype: 'label',
html: 'Selectable'
}, {
xtype: 'label',
html: 'Editable'
}]
}]
});

this.extWindow = new Ext.Window({
id: this.id,
title: this.options.title,
x: this.options.x,
y: this.options.y,
width: this.options.width,
height: this.options.height,
html: this.options.html,
applyTo: this.options.applyTo,
modal: this.options.modal,
closeAction: 'hide',
layout: 'fit',
listeners: {
hide: this.options.callback,
show: SpatialMap.Function.bind(function() {
this.selectorView.bindStore(new Ext.data.JsonStore({
data: this.data.themes,
idProperty: 'id',
autoLoad: true,
fields: this.recordModel
}));
}, this)
},
items: [
this.selectorPanel,
this.storePanel,
this.detailsPanel
]
});The selectorPanel was shown 'fit' the window, and the scroll bar appears if I decrease the size of the window. But the storePanel wasn't when I show it (default the storePanel is hidden)

If I move the storePanel before the selectorPanel in Window's items, it will be shown 'fit' and the scroll bar appear.

It's strange but why?

Animal
1 Oct 2009, 1:04 AM
What do the docs for layout: 'fit' say? How do they describe that layout manager?

t800t8
1 Oct 2009, 1:31 AM
Yes, use 'card' layout instead.