PDA

View Full Version : column layout



mmasters
7 Mar 2008, 1:27 AM
I was playing with GuiDesigner (an awesome tool btw) and I have the following JSON output. I have a column layout in the 'center' for the borderlayout of a viewport (I think it's a viewport). For one of the columns, I have an accordian layout. The accordian doesn't take up the whole column. How can I get it to take up the whole column?



{
layout:"border",
window:{
layout:"fit"
},
items:[{
region:"center",
title:"Release",
items:[{
layout:"column",
items:[{
title:"iteration 1",
columnWidth:0.33,
items:[{
xtype:"treepanel",
animate:true,
autoScroll:true,
containerScroll:true,
root:/*BEGIN*/new Ext.tree.TreeNode({text:'Tree Root',draggable : false})/*END*/,
dropConfig:/*BEGIN*/{
appendOnly:true
}/*END*/
}]
},{
title:"iteration 2",
columnWidth:0.33,
items:[{
layout:"accordion",
layoutConfig:/*BEGIN*/{
activeOnTop:false,
animate:false,
autoWidth:true,
collapseFirst:false,
fill:true,
hideCollapseTool:false,
titleCollapse:true
}/*END*/,
items:[{
title:"Panel 1",
autoHeight:true,
html:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus."
},{
title:"Panel 2",
autoHeight:true,
html:"Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
},{
title:"Panel 3",
autoHeight:true,
html:"Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
},{
title:"Panel 4",
autoHeight:true,
html:"Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat."
}]
}]
},{
title:"iteration 3",
columnWidth:0.34
}]
}]
},{
region:"west",
title:"west",
height:100,
collapsible:true,
titleCollapse:true,
width:200,
items:[{
xtype:"panel",
title:""
}]
}]
}

JamesC
7 Mar 2008, 2:37 AM
Try the following:


title:"iteration 2",
columnWidth:0.33,
layout: "fit"

mmasters
7 Mar 2008, 12:05 PM
Sadly...that didn't work. I tried some other layouts too and they didn't seem to work either.

Any other ideas?

JamesC
7 Mar 2008, 12:38 PM
Did you also try putting fit here:


region:"center",
title:"Release",
layout: "fit",


Otherwise I'm stumped!

mmasters
7 Mar 2008, 10:47 PM
Doesn't work.

Animal
7 Mar 2008, 11:11 PM
Why have your column 2 contain a layout:'accordion' Panel????

Column 2 should be a layout:'accordion' Panel.

Animal
7 Mar 2008, 11:12 PM
Ditto column 1, just have the tree be column 1.

mmasters
8 Mar 2008, 11:49 AM
The question isn't "why do I have an accordion layout in column two?"...it's "why doesn't the accordion take up the whole column?"

Even if I just put the accordion in the first column...it doesn't take up the whole column. The following is the code from the gui designer:



{
layout:"border",
window:{
layout:"fit"
},
items:[{
region:"center",
title:"Release",
layout:"fit",
items:[{
layout:"column",
items:[{
title:"iteration 1",
columnWidth:0.33,
items:[{
layout:"accordion",
layoutConfig:/*BEGIN*/{
activeOnTop:false,
animate:false,
autoWidth:true,
collapseFirst:false,
fill:true,
hideCollapseTool:false,
titleCollapse:true
}/*END*/,
items:[{
title:"Panel 1",
autoHeight:true,
html:"Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus."
},{
title:"Panel 2",
autoHeight:true,
html:"Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor."
},{
title:"Panel 3",
autoHeight:true,
html:"Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi."
},{
title:"Panel 4",
autoHeight:true,
html:"Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat."
}]
}]
},{
title:"iteration 2",
columnWidth:0.33
},{
title:"iteration 3",
columnWidth:0.34
}]
}]
},{
region:"west",
title:"west",
height:100,
collapsible:true,
titleCollapse:true,
width:200,
items:[{
xtype:"panel",
title:""
}]
}]
}

JamesC
9 Mar 2008, 5:37 AM
I think what animal meant was:


title:"iteration 1",
columnWidth:0.33,
layout:"accordion",
items:[{
layoutConfig:/*BEGIN*/{

Animal
9 Mar 2008, 5:47 AM
Yes, that was the question!

Put any kind of Panel inside a Panel which has no layout and it's not going to get sized!