PDA

View Full Version : Gap space between items for anchor layout



woeisiong
9 Jul 2009, 1:11 AM
I am using anchor layout to simulate row layout effect. Now I am stuck on how to add gap between panel.



new Ext.Viewport({
items: [
new Ext.Panel({
bodyStyle: 'padding: 2px;',
border: false,
frame: true,
items: [
new Ext.Panel({
anchor: '100% 33%',
baseCls: 'x-panel',
buttons: [
{ text: 'Manage Roles' }
],
colspan: 1,
contentEl: 'rolesPanel',
frame: true,
margins: '5 5 5 5',
region: 'north',
rowSpan: 1,
title: 'Roles'
}),
new Ext.Panel({
anchor: '100% 34%',
baseCls: 'x-panel',
colspan: 1,
frame: true,
items: [
new Ext.grid.EditorGridPanel({
columns: [
new Ext.grid.RowNumberer(),
{ dataIndex: 'Code', header: 'Name' },
{ dataIndex: 'Description', header: 'Description' },
{ dataIndex: 'CanAccess', header: 'Accessible' }
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
store: stModules,
viewConfig: {
forceFit: true
}
})
],
layout: 'fit',
margins: '5 5 5 5',
region: 'center',
rowspan: 1,
title: 'Manage Modules Roles'
}),
new Ext.Panel({
anchor: '100% 33%',
baseCls: 'x-panel',
colspan: 1,
frame: true,
height: 1.0,
items: [
new Ext.grid.EditorGridPanel({
columns: [
new Ext.grid.RowNumberer(),
{ dataIndex: 'Code', header: 'Name' },
{ dataIndex: 'Description', header: 'Description' },
{ dataIndex: 'CanAccess', header: 'Accessible' }
],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
store: stModules,
viewConfig: {
forceFit: true
}
})
],
layout: 'fit',
margins: '5 5 5 5',
region: 'south',
rowspan: 1,
title: 'Manage Modules Roles'
})
],
layout: 'anchor',
region: 'center'
})
],
layout: 'border'
});

Animal
9 Jul 2009, 1:40 AM
Why have a layout: 'border' Viewport containing only one 'center' region which is layout: 'anchor'???

Just make the Viewport layout: 'anchor'!

Those embedded Panels. Why do they have a region config? AnchorLayout does not use that.

To make gaps between Panels, use CSS to give them margins

woeisiong
9 Jul 2009, 2:14 AM
Thx. It's work!.

Regarding why I add a panel instead of using border layout is due to I need the background to have the color like Frame. I wonder is there any better way to achieve it.

Animal
9 Jul 2009, 2:21 AM
If you really must have that, then use layout: 'fit' in the Viewport to size the framed Panel.

woeisiong
9 Jul 2009, 2:27 AM
Sorry for any trouble I bought due to I am still new in javascript and ExtJs. High appreciate your guidance. thank you so much. =D>