How to create a FormPanel with a panel in the right column

Published by: cfz 2009-01-08

Sugar 5.0's Metadata Driven User Interface::
File Format: PDF/Adobe Acrobat - View as HTMLphpQuick Create Panels - sidecreateviewdefs.phpPopups - popupdefs.php If any overall form"panels" - defines one more panels for this formPanel NameField
http://dpatechnology.com/ws/index2.php?option=com_content&do_pdf=1&id=23HOME

Ext Version: 2.0
Browsers: all

Hello,

I'm trying to create a form like the one pictured in the attachment. Basically, I want a FormPanel that contains a field with a label on the left and a Panel containing whatever additional components (a grid, combobox, etc.) on the right.

I have two questions in regard to this:

1. How would you recommend getting the label to appear to the left of the components?

Anything contained in a FormPanel that is not a subclass of field (for example, a Panel) will ignore the fieldLabel parameter. My current approach is to add a panel with a border layout, put a west region in it, and fake it to look like it's a real label (same width, font, etc.). It works but seems like kind of a hack. Am I missing an easier way?

2. What is the best way to lay out the components within a Panel in the right column?

Here's what I'm doing now:

.. FormPanel
.... Panel (layout: 'border')
...... Panel (region 'west') <-- used for the "faked" label
...... Panel (region 'center', layout: 'form', height: 200, width: 450) <-- used for the components
........ Panel w/ ComboBox in it
........ Panel w/ Grid in it.

The approach above works, but I need to manually size the center region to match the height of its contents (= size of the Grid (which is also manually sized) + the height of the combo box) which seems like another hack.

Without manually specifying the size, the components either disappear (in IE) or layout strangely and then disappear when the browser is resizing (in Firefox).

I can't help but think that I'm going about this the wrong way. Any ideas?

Here is some example code.
Ext.onReady(function(){
Ext.QuickTips.init();

function createGrid() {
var myData = [
['3m Co','9/1 12:00am'],
['Alcoa Inc','9/1 12:00am'],
['ACME Corp','9/1 12:00am'],
['Other Corp','9/1 12:00am'],
['United Technologies Corporation','9/1 12:00am'],
['Verizon Communications','9/1 12:00am'],
['Wal-Mart Stores, Inc.','9/1 12:00am']
];

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.loadData(myData);

var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);

var grid = new Ext.grid.GridPanel({
region: 'center',
xtype: 'grid',
ds: ds,
width: 200,
height: 150,
autoScroll: true,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
autoExpandColumn: 'company',
title:'Example grid',
border: true
});
return grid;
};

function createComboBox() {
var ComboRecord = Ext.data.Record.create([
{name: 'item', type: 'string'}
]);

var comboStore = new Ext.data.SimpleStore({
fields: ['item'],
data: [['One'],['Two'],['Three'],['Four'],['Five']],
reader: new Ext.data.ArrayReader({},ComboRecord)
});

var comboBox = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
autoWidth: true,
store: comboStore,
lazyRender:true,
mode: 'local',
displayField:'item',
selectOnFocus:false
});

return comboBox;
}

var grid = createGrid();
var comboBox = createComboBox();

var viewPort = new Ext.Viewport({
layout: 'border',
border: false,
bodyBorder: false,
hideBorders: true,
items: [{
region: 'north',
html: "

Example of a complex form

"
}, {
region: 'center',
xtype: 'form',
labelWidth: 150,
labelAlign: 'right',
frame:false,
defaultType: 'textfield',
items: [
{
fieldLabel: 'Name',
name: 'name',
width: 150
},
{
xtype: 'panel',
layout: 'border',
height: 200, /* needs to be manually set */
width: 450, /* needs to be manually set */
border: false,
bodyBorder: false,
hideBorders: true,
bodyStyle: 'background: white',
items: [ {
/* Fake the creation of the left label */
region: "west",
width: 150,
html: 'Some components:'
},
{
region: "center",
layout: 'form',
margins: {top: 5, left: 5, right:5, bottom: 5},
items: [
{
layout: 'fit',
border: false,
bodyBorder: false,
height: 30,
items: [
comboBox

No Job Name::
All figures are expressed on a daily basis in percentage form. Panel B In the right column panels of Figure 2, we illustrate the sensitivity of the
http://www.blackwell-synergy.com/doi/abs/10.1111/1540-6261.00460HOME

A simple label for field form panel : TextField « Swing JFC « Java::
A simple label for field form panel : TextField « Swing JFC « Java. JTextField really 2 columns wide · A hack to make a JTextField really 2 columns wide
http://www.java2s.com/Code/Java/Swing-JFC/Asimplelabelforfieldformpanel.htmHOME

]
},
{
layout: 'fit',
items: [
grid
]
}
]
}
]
},
{
fieldLabel: 'Age',
name: 'age',
width: 150
}
]
}
]

});
});

I'm not sure if your requirement is literally that you must have the components within a panel, or that you just need a layout like that. For the layout you want this will do it, but in separate fields like before:

Ext.onReady(function(){
Ext.QuickTips.init();

var myData = [
['3m Co','9/1 12:00am'],
['Alcoa Inc','9/1 12:00am'],
['ACME Corp','9/1 12:00am'],
['Other Corp','9/1 12:00am'],
['United Technologies Corporation','9/1 12:00am'],
['Verizon Communications','9/1 12:00am'],
['Wal-Mart Stores, Inc.','9/1 12:00am']
];

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.loadData(myData);

var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);

var ComboRecord = Ext.data.Record.create([
{name: 'item', type: 'string'}
]);

var comboStore = new Ext.data.SimpleStore({
fields: ['item'],
data: [['One'],['Two'],['Three'],['Four'],['Five']],
reader: new Ext.data.ArrayReader({},ComboRecord)
});

var viewPort = new Ext.Viewport({
layout: 'border',
border: false,
bodyBorder: false,
hideBorders: true,
items: [{
title: 'Example of a complex form',
region: 'north'
}, {
region: 'center',
xtype: 'form',
labelWidth: 150,
labelAlign: 'right',
frame:false,
bodyStyle: 'padding:15px;',
defaultType: 'textfield',
defaults: {width:300},
items: [{
fieldLabel: 'Name',
name: 'name'
},{
xtype: 'componentfield',
fieldLabel: "Some components",
item: {
xtype: 'combo',
width: 300,
typeAhead: true,
triggerAction: 'all',
store: comboStore,
lazyRender:true,
mode: 'local',
displayField:'item',
selectOnFocus:false
}
},{
xtype: 'componentfield',
fieldLabel: "",
labelSeparator: "",
item: {
xtype: 'grid',
ds: ds,
width: 300,
height: 150,
autoScroll: true,
cm: colModel,
autoExpandColumn: 'company',
title:'Example grid'
}
},{
fieldLabel: 'Age',
name: 'age'
}]
}]
});
});

If you really want a full BorderLayout within a panel nested in the form, then my ComponentField approach would have to me modified accordingly or exchanged with something else. It should be doable, but it really depends on your specific requirements. I'm not sure if what you need could be done in a completely generic fashion, at least not without some work.

Hi David,

At the moment, I don't have a totally generic solution for you. However, the approach I would take is something like this:

Ext.ux.ComponentField = Ext.extend(Ext.form.Field, {

defaultAutoCreate: {tag: 'div', cls: 'x-component-field'},

// private
initValue : function(){
if(this.value !== undefined){
this.setValue(this.value);
}
},

// private
onRender : function(ct, position){
Ext.ux.ComponentField.superclass.onRender.call(thi s, ct, position);
var c = this.item.render ? this.item : Ext.ComponentMgr.create(this.item);
if(!c.rendered){
c.render(this.el);
}else{
this.el.appendChild(c.getEl());
}
}
});
Ext.reg('componentfield', Ext.ux.ComponentField);

This would allow you to add any arbitrary Ext.Component subclass into a form with automatic layout, label, etc. handling. This is not fully tested for all components, and currently would only support rendering something for view purposes only. If you actually needed to store/post a discreet form value for the field, you'd have to provide additional method overrides for all the value handling (perhaps an optional hidden field, similar to how ComboBox is implemented).

Label of TextField do not appear - Ext JS Forums::
6 posts - Last post: Nov 7setBorders(false); // Create a FormPanel FormPanel login = new FormPanel(); login. But now, i can't include one more column in a form.
http://extjs.net/forum/showthread.php?p=250459HOME

Read This Way: Me and MangaNEXT | PopCultureShock::
For instance, there was a Manga 4 Kids panel and a Manga for Parents panel. You’re right about the extremely young age of the attendees - I got this
http://www.popcultureshock.com/columns/read-this-way-me-and-manganext/HOME

With this code, you can now do this:

Ext.onReady(function(){
Ext.QuickTips.init();

var myData = [
['3m Co','9/1 12:00am'],
['Alcoa Inc','9/1 12:00am'],
['ACME Corp','9/1 12:00am'],
['Other Corp','9/1 12:00am'],
['United Technologies Corporation','9/1 12:00am'],
['Verizon Communications','9/1 12:00am'],
['Wal-Mart Stores, Inc.','9/1 12:00am']
];

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.loadData(myData);

var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);

var ComboRecord = Ext.data.Record.create([
{name: 'item', type: 'string'}
]);

var comboStore = new Ext.data.SimpleStore({
fields: ['item'],
data: [['One'],['Two'],['Three'],['Four'],['Five']],
reader: new Ext.data.ArrayReader({},ComboRecord)
});

var viewPort = new Ext.Viewport({
layout: 'border',
border: false,
bodyBorder: false,
hideBorders: true,
items: [{
title: 'Example of a complex form',
region: 'north'
}, {
region: 'center',
xtype: 'form',
labelWidth: 150,
labelAlign: 'right',
frame:false,
bodyStyle: 'padding:15px;',
defaultType: 'textfield',
defaults: {width:300},
items: [{
fieldLabel: 'Name',
name: 'name'
},{
xtype: 'combo',
typeAhead: true,
triggerAction: 'all',
store: comboStore,
lazyRender:true,
mode: 'local',
displayField:'item',
fieldLabel: 'Some Components',
selectOnFocus:false
},{
// Add your grid as a config object:
xtype: 'componentfield',
fieldLabel: 'Grid Field',
item: {
xtype: 'grid',
ds: ds,
height: 150,
width: 300,
autoScroll: true,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
autoExpandColumn: 'company',
title:'Example grid'
}
},{
// Add other component configs:
xtype: 'componentfield',
fieldLabel: 'A Button',
autoWidth: true,
item: {
xtype: 'button',
text: 'Click Me',
handler: function(){
Ext.Msg.alert('Click', 'Button clicked');
}
}
},{
// Add a component by reference:
xtype: 'componentfield',
fieldLabel: 'A Button',
autoWidth: true,
item: new Ext.Button({text:'Foo'})
},{
fieldLabel: 'Age',
name: 'age'
}]
}]
});
});

Note that it's also using deferred rendering for your grid and combo via config objects and xtype, which is the preferred style in 2.0. Also, I threw in a couple of buttons just to illustrate that it supports other components, and you can use a config or a component reference.

One more thing, by default form fields have a style that adds a blue border to fields on focus. However, for custom components like the ones we're adding here, that is not always desirable, so you'd want to add a CSS override, for example:

.x-component-field.x-form-focus {border:0pt;}

This would turn off the focus border generically for any ComponentField. You could turn it on/off selectively per component type with more custom rules.

Hope this helps. We may look at something like this to add into Ext as it could be useful in some cases. I'm just not sure yet if it makes sense as a truly generic feature since value handling would really be specific to the type of component being wrapped...

Brian,

Thanks for your help! It seems to work great for combo boxes, buttons, and grids, but what I really was looking for was to put a number of components in the right column inside of a panel.

I took a shot at this by modifying the code you provided (see below) to add a Panel with a border layout in the right column. I had to manually size the panel to get the components within it to appear.

The resulting layout looks good initially but seems to have other strange behavior (such as: button on the combo box disappears after the combo box is clicked, scroll bar on the grid doesn't show up until you click the button on the combo box).

As you said in your post, "this is not fully tested for all components" and I'm guessing making this work within a Panel is non-trivial.

At this point, unless you see something simple I missed, I'm going to abandon this approach and see if I can rearrange my UI to move the more complicated pieces within a tab panel which is completely separate from the form.

I thought I'd as least follow up though for the benefit of those following this thread.

Thanks again,
-dclaussen

---------------
Altered example showing a panel in the right column:
Ext.onReady(function(){
Ext.QuickTips.init();

var myData = [
['3m Co','9/1 12:00am'],
['Alcoa Inc','9/1 12:00am'],
['ACME Corp','9/1 12:00am'],
['Other Corp','9/1 12:00am'],
['United Technologies Corporation','9/1 12:00am'],
['Verizon Communications','9/1 12:00am'],
['Wal-Mart Stores, Inc.','9/1 12:00am']
];

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.loadData(myData);

var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);

var ComboRecord = Ext.data.Record.create([
{name: 'item', type: 'string'}
]);

var comboStore = new Ext.data.SimpleStore({
fields: ['item'],
data: [['One'],['Two'],['Three'],['Four'],['Five']],
reader: new Ext.data.ArrayReader({},ComboRecord)
});

var viewPort = new Ext.Viewport({
layout: 'border',
border: false,
bodyBorder: false,
hideBorders: true,
items: [{
title: 'Example of a complex form',
region: 'north'
}, {
region: 'center',
xtype: 'form',
labelWidth: 150,
labelAlign: 'right',
frame:false,
bodyStyle: 'padding:15px;',
defaultType: 'textfield',
defaults: {width:300},
items: [{
fieldLabel: 'Name',
name: 'name'
},{
xtype: 'componentfield',
fieldLabel: "Some components",
item: {
xtype: 'panel',
width: 300,
height: 175,
autoWidth: true,
layout: 'border',
items: [
{
region: 'north',
xtype: 'combo',
typeAhead: true,
triggerAction: 'all',
store: comboStore,
lazyRender:true,
mode: 'local',
displayField:'item',
selectOnFocus:false
},
{
region: 'center',
xtype: 'grid',
ds: ds,
width: 300,
autoScroll: true,
cm: colModel,
autoExpandColumn: 'company',
title:'Example grid'
}
]
}
},{
fieldLabel: 'Age',
name: 'age'
}]
}]
});
});

Try please the simplest thing possible:

var grid = new Ext.grid.grid({fieldLabel:'Grid Label', ...});

var form = new Ext.form.FormPanel({
// ...
items:[{
xtype:'textfield',
fieldLabel:'Text label'
}, grid]
})

I haven't tested it; it's just an idea.

Well the difficulty goes on. The above approach falls apart (translation: none of the fields show up) once the components are inside a fieldset, as shown below:
Ext.onReady(function(){
Ext.QuickTips.init();

function createGrid() {
var myData = [
['3m Co','9/1 12:00am'],
['Alcoa Inc','9/1 12:00am'],
['ACME Corp','9/1 12:00am'],
['Other Corp','9/1 12:00am'],
['United Technologies Corporation','9/1 12:00am'],
['Verizon Communications','9/1 12:00am'],
['Wal-Mart Stores, Inc.','9/1 12:00am']
];

var ds = new Ext.data.Store({
reader: new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.loadData(myData);

var colModel = new Ext.grid.ColumnModel([
{id:'company',header: "Company", width: 160, sortable: true, locked:false, dataIndex: 'company'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);

var grid = new Ext.grid.GridPanel({
region: 'center',
xtype: 'grid',
ds: ds,
width: 200,
height: 150,
autoScroll: true,
cm: colModel,
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
}),
autoExpandColumn: 'company',
title:'Example grid',
border: true
});
return grid;
};

function createComboBox() {
var ComboRecord = Ext.data.Record.create([
{name: 'item', type: 'string'}
]);

var comboStore = new Ext.data.SimpleStore({
fields: ['item'],
data: [['One'],['Two'],['Three'],['Four'],['Five']],
reader: new Ext.data.ArrayReader({},ComboRecord)
});

var comboBox = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
autoWidth: true,
store: comboStore,
lazyRender:true,
mode: 'local',
displayField:'item',
selectOnFocus:false
});

return comboBox;
}

var grid = createGrid();
var comboBox = createComboBox();

var fields = [
{
fieldLabel: 'Name',
name: 'name',
width: 150
},
{
xtype: 'panel',
layout: 'border',
height: 200,
width: 450,
border: false,
bodyBorder: false,
hideBorders: true,
bodyStyle: 'background: white',
items: [ {
/* Fake the creation of the left label */
region: "west",
width: 150,
html: 'Some components:'
},
{
region: "center",
layout: 'form',
margins: {top: 5, left: 5, right:5, bottom: 5},
items: [
{
layout: 'fit',
border: false,
bodyBorder: false,
height: 30,
items: [
comboBox
]
},
{
layout: 'fit',
items: [
grid
]
}
]
}
]
},
{
fieldLabel: 'Age',
name: 'age',
width: 150
}
];

var viewPort = new Ext.Viewport({
layout: 'border',
border: false,
bodyBorder: false,
hideBorders: true,
items: [{
region: 'north',
html: "

Example of a complex form

"
}, {
region: 'center',
xtype: 'form',
labelWidth: 150,
labelAlign: 'right',
frame:false,
defaultType: 'textfield',
// items: fields
items:
[

{

xtype: 'fieldset',
title: 'General',
// autoHeight: true,
defaultType: 'textfield',
defaults: {width: 450},
items: [
fields
]
}
]
}
]

});
});