PDA

View Full Version : anchor layout issue



MacSimon
30 Oct 2009, 2:18 AM
Hi everyone,

let me just sketch my layout for you.
I have a viewport with borderlayout.
The west-side is a panel with an accordionlayout.
One of the acordions contains a panel with as first element a formpanel
with two comboboxes.
I want the comboboxes to resize with the westpanel and always have a width of 100%

The westpanel:



{
title: 'West Panel',
margins: '0 0 5 5',
cmargins: '0 5 5 5',
region: 'west',
collapsible: true,
floatable: false,
split: true,
width: 180,
minSize: 172,
maxSize: 340,
layout: 'accordion',
layoutConfig: {
animate: true
},
items: [{
id: 'panel1',
contentEl: 'divPanel1',
title: 'Panel1',
collapsed: true,
autoScroll: true,
border: false,
hidden: true
},
{
id: 'panel2',
contentEl: 'divPanel2',
title: 'Panel2',
collapsed: true,
autoScroll: true,
border: false,
hidden: true
}
}


The actual problemarea, the combos and its formpanel



var combo1 = new Ext.form.ComboBox({
id: 'combo1',
anchor: '100%',
valueField: 'Id',
store: storeCombo1,
displayField: 'Name',
fieldLabel: 'Mylabel',
mode: 'local',
triggerAction: 'all',
editable: false,
resizable: true
});

var combo2 = new Ext.form.ComboBox({
id: 'combo2',
anchor: '100%',
valueField: 'Id',
store: storeCombo2,
fieldLabel: 'MyLabel',
displayField: 'Name',
mode: 'local',
triggerAction: 'all',
editable: false,
resizable: true
});

var myFormPanel = new Ext.form.FormPanel({
id: 'myFormPanel',
labelAlign: 'top',
border: false,
items: [poolsCombo, contractsCombo]
});

Ext.getCmp('panel2').add(myFormPanel);


When the page renders the combo's are allways 100%,
but when I resize the westpanel they do not follow.

How can I get this behavior?

Thanks

evant
30 Oct 2009, 2:24 AM
1) You can't really mix contentEl and items.

2) Panel2 has no layout.

MacSimon
30 Oct 2009, 2:31 AM
Thank you for the quick reply.
Maybe I should use a VBox layout for panel 2 and
add another panel to panel2 with contentEl: 'divPanel2'?

Animal
30 Oct 2009, 2:47 AM
Also it's the perennial AccordionLayout autoWidth problem.

By default, AccordionLayout does not manage is child Panel's width.

MacSimon
30 Oct 2009, 2:50 AM
So basically I can't get the behavior I want while using the accordionlayout?

Animal
30 Oct 2009, 2:52 AM
Yes you can.



layout: {
type: 'acordion',
autoWidth: false
}


And don't omit layout specifications. Think what you WANT the container to do with its child items, and tell it. It won't read your mind.

MacSimon
30 Oct 2009, 2:56 AM
Ok, I will try this, and how about the monitorResize: true property of panel2
Wouldn't this fix the problem?

Animal
30 Oct 2009, 3:16 AM
Doesn't need it.

MacSimon
3 Nov 2009, 9:20 AM
I tried playing with the layout some more and got a working result, but I changed it back to a fixed with because it looks better.

Thank you very much for helping.

The layout and layout configs is the most difficult part for me to understand so any helps to make things a bit more clear for me is always appreciated.