Design a form with columns, how to do it?

[treadmill]

Hi, I'm trying to replicate the following hand-coded component in Ext Designer and simply can't find a way of doing it.


It's a form with the first two components in two columns and then the rest in a single column.

Any ideas?




id: 'boxtab-' + n,
closable: true,
iconCls: 'tab-icon',
title: 'Box ' + n,
autoScroll: true,
autoHeight: true,
tbar: [{
id: 'preview-button-' + n,
text: 'Preview box',
formBind: true,
cls: 'x-btn-text-icon',
icon: '/extjs/resources/icon_images/application_form.png',
handler: function(e) {
var boxColour = Ext.getCmp('box_title_colour_' + n).getValue();
var boxTitle = Ext.getCmp('box_button_text_' + n).getValue();

Ext.Ajax.request({
url: '/ajax_includes/newsletter-box-preview.php',
params: { id: n, button: boxColour, title: boxTitle },
method: "POST",
success: function(r,o) {
var d = Ext.util.JSON.decode(r.responseText);
if (d.success) {
var fcmp = e.id;
var n = fcmp.replace("preview-button-","");
fcmp = 'preview_' + n;

var pbox = Ext.getCmp(fcmp);
var gPC = processPreview(d.data,n);
pbox.setValue(gPC);
} else {
Ext.Msg.alert(dlgTitle, 'Failure: ' + d.data);
}
},
failure: function(f,a) {
if (a.failureType == 'client') {
Ext.Msg.show({
title: dlgTitle,
msg: 'A client browser error occured.',
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR,
minWidth: 200
});
}
else if (a.failureType == 'server') {
//var r = Ext.util.JSON.decode(a.response.responseText);
Ext.Msg.show({
title: dlgTitle,
msg: 'ERROR OCCURED:<br /><br />' + a.response.responseText,
buttons: Ext.Msg.OK,
icon: Ext.MessageBox.ERROR,
minWidth: 200
});
}
}
});

}
}],
items:[{
layout:'column',
items:[{
columnWidth:.5,
layout: 'form',
labelAlign: 'top',
items: [{
xtype: 'textfield',
fieldLabel: 'Box title',
id: 'box_title_' + n,
//name: 'box_title_' + n,
name: 'box_title[]',
allowBlank:false,
anchor:'95%',
listeners: {
'render': function(c) {
c.getEl().on('keyup', function() {
Ext.getCmp('boxtab-' + n).setTitle(this.getValue());
}, c);
}
}
}]
},{
columnWidth:.5,
layout: 'form',
labelAlign: 'top',
items: [{
xtype: 'combo',
fieldLabel: 'Box title colour',
id: 'box_title_colour_' + n,
name: 'box_title_colour_' + n,
store: titleClr,
valueField: 'id',
displayField: 'name',
hiddenName: 'box_main_title_colour[]',
forceSelection : true,
mode: 'local',
triggerAction: 'all',
anchor:'95%',
tpl: '<tpl for="."><div class="x-combo-list-item" style="background-color:#{hex_colour};color:#FFFFFF;font-weight:bold;">{name}</div></tpl>'
}]
}]
},{
columnWidth:.5,
layout: 'form',
labelAlign: 'top',
items: [{
xtype: "tinymce",
fieldLabel: 'Box content',
id: 'box_content_' + n,
name: 'box_content[]',
allowBlank: false,
height: 160,
closeAction: "hide",
hideMode: "offsets",
anchor: '98%',
tinymceSettings: {
mode: "none",
language: "en",
theme: "advanced",
cleanup_on_startup: true,
cleanup: true,
debug: false,
skin: "o2k7",
plugins: "safari,spellchecker,save,emotions,iespell,preview,searchreplace,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras",
// Theme options
theme_advanced_buttons1: "bold,|,cut,copy,paste,pastetext,pasteword,|,search,replace,|,undo,redo,|,fullpage,|,charmap,|,iespell,|,fullscreen,|,code",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "none",
theme_advanced_resizing: false
}
},{
xtype: "tinymce",
fieldLabel: 'Box image',
id: 'box_image_' + n,
name: 'box_image[]',
allowBlank: false,
height: 220,
closeAction: "hide",
hideMode: "offsets",
anchor: '98%',
tinymceSettings: {
mode: "none",
language: "en",
theme: "advanced",
cleanup_on_startup: true,
cleanup: true,
debug: false,
forced_root_block : false,
force_br_newlines : false,
force_p_newlines : false,
skin: "o2k7",
plugins: "safari,media,imagemanager",
// Theme options
theme_advanced_buttons1: "image,code",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "none",
theme_advanced_resizing: false
}
},{
xtype: "tinymce",
fieldLabel: 'Button text',
id: 'box_button_text_' + n,
name: 'box_button_text[]',
allowBlank: false,
height: 100,
closeAction: "hide",
hideMode: "offsets",
anchor: '98%',
tinymceSettings: {
mode: "none",
language: "en",
theme: "advanced",
cleanup_on_startup: true,
cleanup: true,
debug: false,
forced_root_block : false,
force_br_newlines : false,
force_p_newlines : false,
skin: "o2k7",
plugins: "safari,style,",
filemanager_remember_last_path : false,
theme_advanced_buttons1: "bold", //,|,code",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "none",
theme_advanced_resizing: false
}
},{
xtype: "tinymce",
fieldLabel: 'Button link',
id: 'box_button_link_' + n,
name: 'box_button_link[]',
allowBlank: false,
height: 100,
closeAction: "hide",
hideMode: "offsets",
anchor: '98%',
tinymceSettings: {
mode: "none",
language: "en",
theme: "advanced",
cleanup_on_startup: true,
cleanup: true,
debug: false,
forced_root_block : false,
force_br_newlines : false,
force_p_newlines : false,
filemanager_insert_template : '{$url}',
skin: "o2k7",
plugins : 'filemanager',
filemanager_remember_last_path : false,
theme_advanced_buttons1: "insertfile",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "none",
theme_advanced_resizing: false
}
},{
anchor:'98%',
xtype: 'htmleditor',
id: 'preview_' + n,
fieldLabel: 'Preview',
name: 'preview[]',
allowBlank: true,
height: 210,
html: '',
enableColors: false,
enableAlignments: false,
enableFont: false,
enableFontSize: false,
enableFormat: false,
enableLinks: false,
enableLists: false,
enableSourceEdit: false
}]
}]

[firefoxSafari]

So it looks like you want your FormPanel to have a column layout and two Container children. The first child has column layout and additional Container children with layout form to receive the text fields. The second child of the FormPanel is a Container with layout form and all the components are layed out vertically.

Something like this? (attachment)

I think you might be better off with an hbox layout with 3 containers with form layout. This might allow you to get rid of some extra containers / nesting.

If this isn't what you're looking for, a screenshot might be more helpful. Your posted code has a lot of plugins and other artifacts that we won't have, and so I cannot run it cleanly on my machine to test it out.