PDA

View Full Version : How to define margins/insets between Panel components



Farid
21 Jul 2010, 1:24 AM
I wonder how to configure a Panel to add margins/insets between it's components ?

(I'm new to ExtJS and sorry if a similar question posted earlier, but I couldn't find anything to help me!)

for example:

------------------------
| panel
| -------------------
| | component 1 |
| -------------------
| {10 px margins}
| -------------------
| | component 2 |
| -------------------
| {10 px margins}
| -------------------
| | component 3 |
| -------------------
.
.
.

Animal
21 Jul 2010, 1:30 AM
Looks like a vbox layout to me.

And that takes a margins hint from its child Components.

Animal
21 Jul 2010, 1:31 AM
But you could also just use the default layout and ordinary CSS style margins.

Or anchor layout with CSS style margins.

Depends what you actually, really want.

Farid
21 Jul 2010, 5:03 AM
But you could also just use the default layout and ordinary CSS style margins.

Or anchor layout with CSS style margins.

Depends what you actually, really want.

top\bottom margins style on 'label' doesn't work !!

for example:


Ext.extend(Ext.Panel, {
border:false,
title: '',
width: 240,
height: 300,
split:true,
initComponent: function() {
Ext.applyIf(this, {
items: [
{ xtype: 'panel',
layout:'table',
border: false,
layoutConfig: {
columns: 1
},
items:[
{
xtype: 'label',
text: 'label',
style: '{font-size:14px;}'
},
{
xtype: 'label',
text:'lable2',
style: '{font-weight:bold; font-size:14px; margin-left:10px; margin-top:10px;}'
},
....

'label2' moves 10 px to right, but doesn't moves down 10px !!

Could you please demonstrate this option in any short sample?
I mean, the CSS style is belongs to the panel config or I must define it for each child's component?

Animal
21 Jul 2010, 6:38 AM
A style definition does not contain "{" characters!

Farid
21 Jul 2010, 7:07 AM
A style definition does not contain "{" characters!

1)
I see...so how it works 'partially' ?!
The result is a bold a label and with font size 14...

2)
I just found out that i can do this:

#OrderConfirmationPanel .x-table-layout td {
padding-bottom: 2px;
padding-right: 5px;
}

where 'OrderConfirmationPanel' is my componet id.
is this a good approach or I must do something else?

Animal
21 Jul 2010, 7:10 AM
I wouldn't bother using a single column table to place your child items in. What's the point?

Why not just use the defaults config to set the margin-top style in child items?

Farid
22 Jul 2010, 3:01 AM
I'm not sure I've got your point.
Could you please give me an example? because what I've did:

#OrderConfirmationPanel .x-table-layout td {
padding-bottom: 2px;
padding-right: 5px;
}

works fine!

Animal
22 Jul 2010, 4:33 AM
But why wrap everything in a table????