PDA

View Full Version : Flow Layout?



cjw
23 Feb 2009, 3:22 AM
Hi,

I'm new to Ext JS but am struggling to layout one of my panels. I basically require a Right aligned flow layout positioned in the North region of a border layout panel. The idea being that i have a number of controls positioned in the top right.

I'm trying to use the anchor layout with a right setting but its not working.

has anyone got a quick example of how this is done?

Thanks,

cjw

Animal
23 Feb 2009, 3:33 AM
The default ContainerLayout just renderes with no positioning and no sizing.

However, form Fields are BoxComponents, and styled display: block, so they are each on a line of their own.

You will need to explain better if you need help. all controls "positioned in top right"? What all at the same position?

cjw
23 Feb 2009, 3:52 AM
I want the controls to be laid out left to right all on a single line but i want them to be aligned from the right hand side rather than the left. They should also be at the top of the panel (North).

Thanks,

cjw

Animal
23 Feb 2009, 4:12 AM
Use a table layout.

cjw
23 Feb 2009, 6:24 AM
I've tried the table layout but the items still appear on the left side.

I want them to be right aligned. Here's some code for the rough layout i have so far. I just need the table items on the right of the screen. any suggestions?


{
xtype:"panel",
title:"main panel",
layout:"border",
items:[{
xtype:"panel",
title:"north panel",
region:"north",
height:200,
bodyStyle:"background-color: yellow;",
layout:"anchor",
items:[{
layout:"table",
layoutConfig:{
columns:4
},
defaults:"",
height:200,
anchor:"-300",
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
},{
xtype:"numberfield",
fieldLabel:"Number",
name:"numbervalue"
},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
}]
}]
},{
xtype:"form",
title:"center form",
region:"center",
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
},{
xtype:"combo",
fieldLabel:"Text",
name:"combovalue",
hiddenName:"combovalue"
},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
}]
}]
}

cjw
24 Feb 2009, 6:17 AM
Still struggling with this layout stuff.

I have this code. can anyone tell me why IE displays the "redPanel" differently in firefox?
I don't see the "redPanel" at all.

function CViewPort()
{

var viewport = new Ext.Viewport(
{
xtype:"panel",
title:"main panel",
layout:"border",
items:[{
xtype:"form",
title:"center form",
region:"center",
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
},{
xtype:"combo",
fieldLabel:"Text",
name:"combovalue",
hiddenName:"combovalue"
}]
},{
layout:"auto",
region:"south",
height:200,
border: true,
bodyStyle:"background-color: yellow;" ,

items:
[{
xtype: "panel",
layout: "fit",
id: "redPanel",
width: 500,
height: 200,
bodyStyle: "position: absolute; right:0px; background-color: red;",

items:[{
xtype:"panel",
title:"Panel south",
layout:"column",

items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue",
columnWidth: .25

},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue",
columnWidth: .25
},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue",
columnWidth: .50
}
]
}]
}]

}]
});

return viewport;

}

mjlecomte
24 Feb 2009, 6:27 AM
http://extjs.com/learn/Ext_Forum_Help#Code_Tags

cjw
24 Feb 2009, 6:40 AM
Sorry, here it is again:

Any help would be much appreciated. Thanks.


Ext.onReady(function() {

var viewport = new Ext.Viewport(
{
xtype:"panel",
title:"main panel",
layout:"border",
items:[{
xtype:"form",
title:"center form",
region:"center",
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
},{
xtype:"combo",
fieldLabel:"Text",
name:"combovalue",
hiddenName:"combovalue"
}]
},{
layout:"auto",
region:"south",
height:200,
border: true,
bodyStyle:"background-color: yellow;" ,

items:
[{
xtype: "panel",
layout: "fit",
id: "redPanel",
width: 500,
height: 200,
bodyStyle: "position: absolute; right:0px; background-color: red;",

items:[{
xtype:"panel",
title:"Panel south",
layout:"column",

items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue",
columnWidth: .25

},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue",
columnWidth: .25
},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue",
columnWidth: .50
}
]
}]
}]

}]
});

viewport.show();

});

mjlecomte
24 Feb 2009, 6:48 AM
what is layout:"auto"?

mjlecomte
24 Feb 2009, 6:50 AM
It also looks like you have an unnecessary panel at the root of the viewport layout.

I don't think you need to call .show() explicitly like that either.

cjw
24 Feb 2009, 7:30 AM
Ok, i've made changes like you suggested but it still won't display the red panel in IE.


Ext.onReady(function() {

var viewport = new Ext.Viewport(
{
xtype:"panel",
title:"main panel",
layout:"border",
items:[{
xtype:"form",
title:"center form",
region:"center",
items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue"
},{
xtype:"combo",
fieldLabel:"Text",
name:"combovalue",
hiddenName:"combovalue"
}]
},{
xtype: "panel",
region:"south",
height:200,
bodyStyle:"background-color: yellow;" ,


items:[{
xtype:"panel",
id: "redPanel",
title:"Panel south",
layout:"column",
bodyStyle: "position: absolute; right:0px; top: 30px; background-color: red;",

items:[{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue",
columnWidth: .25

},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue",
columnWidth: .25
},{
xtype:"textfield",
fieldLabel:"Text",
name:"textvalue",
columnWidth: .50
}
]
}]


}]
});

});

Animal
24 Feb 2009, 7:41 AM
Why put a Panel in a Panel in a Panel in the south?

Why just use a Panel?

cjw
24 Feb 2009, 7:59 AM
The logic was:

The Border Layout was needed to place items along the bottom of the screen.

The South panel so that i can move the column panel around on the screen.

The Column panel so that the items are laid out in a line.

I'm sure there must be a simple fix for this but i really don't know how its done.

Thanks,

cjw

Animal
24 Feb 2009, 8:01 AM
Yes, the south Panel.

You want columns it it?

So why did your original code in fact put a Panel in it which CONTAINS a panel which CONTAINS columns??????

You just took out one layer, so now its a Panel which CONTAINS a Panel which CONTAINS columns

Why did you just decide to stop at three Panels? Just go for it put a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel in a Panel. And then put columns i that!???

cjw
24 Feb 2009, 8:06 AM
As a basic rule i never put more than 6 panels in a panel in a panel. You've gotta keep it readable.

if it's so simple how about a solution to what i want to do?

mjlecomte
24 Feb 2009, 8:10 AM
Have you looked at the layout browser demo or the border layout demo? You're just doing a border layout!

Remember that subclasses to Panel (Grid, Tree, Form, etc) are just Panels, so no need to wrap them.

cjw
24 Feb 2009, 8:18 AM
The thing is it's not just a border layout. Within the south region i want the elements positioned along the far right of the screen in a line. I've looked at the examples but no one does this exactly. If you're familiar with Java at all, this would be equivalent to using a Flow Layout with right alignment in the South Region.

Thanks.

cjw
24 Feb 2009, 8:19 AM
Just to mention again, my example works in Firefox but not in Internet Explorer so you can see what i'm trying to achieve.