PDA

View Full Version : Complex layout question



harley.333
15 Feb 2013, 7:55 PM
Can someone help me with the config markup to create the following layout:



--Window--------
| ------------ |
| | Form | |
| ------------ |
| | || | |
| | || | |
| |Tree||Grid| |
| | || | |
| | || | |
| ------------ |
----------------
When resizing the window, I'd like the Form to expand horizontally, but not vertically.
When resizing the window, I'd like the Tree and Grid to expand in both directions.
I'd like the Tree and Grid to have their own, separate scroll bars.

Here's what I've got so far:


Ext.define("xyz", {
extend: "Ext.window.Window",
alias: "widget.xyz",


height: 300,
layout: "fit",
maximizable: true,
resizable: true,
width: 450,
title: "testing",
items: [
{
xtype: "form",
autoScroll: true,
border: false,
layout: {
type: "vbox",
align: "stretch"
},
items: [
{ xtype: "textfield", fieldLabel: "Field #1" },


{
border: false,
flex: 1,
layout: "hbox",
items: [
{
xtype: "treepanel",
border: false,
flex: 1
},
//{ xtype: "splitter" }, // screws the whole thing up
{
xtype: "gridpanel",
border: false,
flex: 1
}
]
}
]
}
]
});


The splitter would be nice, but adding it makes Ext barf.

sword-it
15 Feb 2013, 11:35 PM
Hi,

you can use following code:




var win=new Extend.Window({
title:'My Win'
, height:400
, width:500
, layout:'border'
, items:[
{
xtype:'form'
, region:'north'
, height:120
},
{
xtype:'tree'
, region:'west'
, width:250
},
{
xtype:'grid'
, region:'center'

}
]
})

scottmartin
16 Feb 2013, 9:21 PM
Can you be more specific than barf?

http://jsfiddle.net/Lccpb/

Scott.