PDA

View Full Version : Layout issues, trying to apply correct spacing.



ajmas
17 Dec 2010, 1:44 PM
I am unable to apply any spacing between my laid out panels:

I am trying to implement a page that will be used for form input. The presentation consists of two columns, each with form elements (of varying vertical sizes) and panels for grouping certain data groups. So far I have managed to display the two columns using a column layout and then a panel in each using a FormLayout. The problem is that I am having trouble controlling the spacing between the two columns and the spacing between the elements vertically.

The essential code is shown below. Can anyone suggest what I should be doing?


var MyPanel = Ext.extend(Ext.form.FormPanel, {

constructor: function ( config )
{

var form = this;

config = config || {};

var column1Items = [];
var column2Items = [];

column1Items.push({
xtype: 'panel',
title: 'L Basic Panel',
bodyStyle: {padding: '5px'},
html: 'Some content',
tools: [
{id:'help'}
],
height: 150
});

column1Items.push({
xtype: 'panel',
title: 'L Basic Panel 2',
html: 'Some content',
tools: [
{id:'help'}
],
height: 150
});

column2Items.push({
xtype: 'panel',
title: 'R Basic Panel',
html: 'Some content',
tools: [
{id:'help'}
]
});

column2Items.push({
xtype: 'panel',
title: 'R Basic Panel 2',
html: 'Some content',
tools: [
{id:'help'}
]
});

// INFO apply config

config = Ext.apply({
layout:'column',
padding: 5,
border: false,
margins: {
top:5,
right:5,
bottom:5,
left:5
},
items: [{
xtype: 'panel',
anchor:'95%',
border: false,
layoutConfig: {
type: 'form'
},
defaults: {
bodyStyle: 'padding:4px'
},
columnWidth: .75,
items: column1Items,

},{
border: false,
margins: {
top:5,
right:5,
bottom:5,
left:5
},
layoutConfig: {
type: 'form'
},
columnWidth: .25,
items: column2Items
}]
});

MyPanel.superclass.constructor.call(this, config);

}

});

Edit: for clarification I am looking to have about 5-10px between the elements in the left column and the right column and 5-10px vertically as well. I am not sure of the exact spacing, since I have not been able to see it laid out properly yet.

ajmas
17 Dec 2010, 2:53 PM
I have made some headway, but I now find that the labels for my fields aren't being rendered and that the fields aren't being placed on separate lines (they are all grouping together on one line):

var column1Items = [];
var column2Items = [];


column1Items.push(
new Ext.form.TextField({
fieldLabel: 'Sub-desk',
name: 'subdesk',
anchor: '100%'
})
);

column1Items.push(
new Ext.form.TextField({
fieldLabel: 'Title',
name: 'title',
anchor: '100%'
})
);

column1Items.push(
new Ext.form.TextArea({
fieldLabel: 'Abstract',
name: 'abstract',
anchor: '100%'
})
);

column1Items.push({
xtype: 'panel',
title: 'L Basic Panel',
bodyStyle: {padding: '5px'},
html: 'Some content',
tools: [
{id:'help'}
],
height: 150
});

column1Items.push({
xtype: 'panel',
title: 'L Basic Panel 2',
html: 'Some content',
tools: [
{id:'help'}
],
height: 150
});

column2Items.push({
xtype: 'panel',
title: 'R Basic Panel',
html: 'Some content',
tools: [
{id:'help'}
]
});

column2Items.push({
xtype: 'panel',
title: 'R Basic Panel 2',
html: 'Some content',
tools: [
{id:'help'}
]
});

// INFO apply config

config = Ext.apply({
layout:'column',
padding: 5,
border: false,
items: [{
xtype: 'panel',
border: false,
defaultType: 'textfield',
hideLabels: false,
layoutConfig: {
type: 'form'
},
defaults: {
style: {
marginBottom: '10px',
marginRight: '5px',
marginLeft: '5px'
},

},
columnWidth: .75,
items: column1Items,

},{
xtype: 'panel',
border: false,
defaultType: 'textfield',
layoutConfig: {
type: 'form'
},
defaults: {
style: {
marginBottom: '10px',
marginRight: '5px',
marginLeft: '5px'
}
},
columnWidth: .25,
items: column2Items
}]
});Any ideas?

Edit: turns out I had to define "layout: 'form'" at the panel level and not in the layoutConfig. Now I just want to see if there is a way to have the label on a separate line to the field.