PDA

View Full Version : Two labels for a formfield; one before and one behind?



torsten.t
15 Mar 2011, 5:38 AM
I would like to have an additional label behind a textfield/combobox, like

"Name" "Combobox" "additional information for this field"

I tried struggling with
Ext.DomHelper.insertAfter( form_panel.form.items.get('id_combobox').el, '<b>extra info</b>');

But the text was squeezed between the Combobox and the tiny arrow-down-image of the combobox.

Any ideas?

walldorff
15 Mar 2011, 7:30 AM
Have a look at http://www.sencha.com/forum/showthread.php?56938.

- You could also make 2 columns in the form, with on the left side the fields and on the right side the additional information.
- Or you could try the table layout (http://dev.sencha.com/deploy/dev/examples/layout/table.html) for this.
- Or you could embed a 2-column form panel layout in a container. Like so:

Ext.ns('App');

App.descriptionField = Ext.extend(Ext.Container, {

constructor:function(config) {
config = config || {};
config.listeners = config.listeners || {};
App.descriptionField.superclass.constructor.call(this, config);
}

,initComponent:function() {
this.fieldType = this.fieldType || 'textfield';
var config = {

layout : 'column'
,anchor : '100%'
,defaults : {xtype: 'container'}
,items:[{
layout : 'form'
,xtype : this.fieldType
,fieldLabel : this.fieldLabel
},{
border : false
,html : this.description
,style :'padding: 3px 0 0 15px'
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
App.descriptionField.superclass.initComponent.apply(this, arguments);

}
});

Ext.reg('descriptionfield', App.descriptionField);

/******************************************/

var frm = new Ext.form.FormPanel({
renderTo: Ext.getBody()
,title: 'testForm'
,items: [{
xtype : 'descriptionfield'
,name : 'firstname'
,fieldLabel : 'First Name'
,description : 'Your first name here'
,fieldType : 'textfield'
}]
});

This is far from perfect, it's just an idea and needs refining to make it suitable for all the other type of fields. Hope you can go further on this.

conorarmstrong
15 Mar 2011, 7:39 AM
A composite field (using a displayfield for the second item) might be a lot simpler

walldorff
15 Mar 2011, 7:40 AM
Of course! I'm sorry, didn't think of that :)

torsten.t
16 Mar 2011, 5:22 AM
Conorarmstrong, Walldorff, thank you very much.

The code snippet looks like


{
xtype: 'compositefield',
fieldLabel: 'Country',
items: [cb_country, {
xtype: 'displayfield',
value: 'Additional info for the country',
margins: '0 0 0 10',
flex: 1
}]
}

cb_country is a normal Combobox with a fixed width.