PDA

View Full Version : Ext.Form: showing a checkBox before than a fieldLabel



sorfrena
24 Jan 2011, 8:34 AM
Hello people,

I am writing a form:

Ext.extend(Ext.form.FormPanel, {
border:false,
frame:true,
labelWidth:80,
initComponent:function() {
var config = {
defaultType:'textfield',
defaults:{anchor:'-24'},
monitorValid:true,
items:[{
id:'snapshotName',
fieldLabel:'Search name',
allowBlank:false
},{
id:'useDefaultValues',
xtype:'checkbox',
fieldLabel: 'Use default dates'
}],
buttons:[{
text:'Save',
handler:this.onSaveClick,
scope:this,
formBind:true
},{
text:'Cancel',
handler:this.onCancelClick,
scope:this
}]
};
Ext.apply(this, Ext.apply(this.initialConfig, config));
Snapshot.Form.superclass.initComponent.apply(this, arguments);
},
onSaveClick:function() {
SnapshotFunctions.save();
},
onCancelClick:function() {
Ext.getCmp('snapshotform-win').close();
}
});

I have omitted no important code.
Since the message (fieldLabel) associated to the checkBox can be pretty long, I'd like to change the layout of the second "row" of the form: I'd like to visualize the checkBox before and then the fieldLabel. Actually the checkBox should be centered down to "Search Name".

I have tried putting the checkbox like this:

{
id:'useDefaultValues',
xtype:'checkbox',
boxLabel: 'Use default dates',
hideLabel: true
}

but the checkBox will not be centered and the boxLabel text is smaller than the one provided by fieldLabel.

Thank you for your help,
Freddy

valititi
24 Jan 2011, 5:16 PM
instead one field with a label... you can made it, via a one composite field, with 2 elements :



{xtype : 'compositefield' ,
items : [
{ xtype : 'checkbox' },
{ xtype : 'label' , text : 'Your Text' }
]
} ,

hope this may help

sorfrena
25 Jan 2011, 2:57 AM
thank you for your answer but I am using an older version of Ext and the
compositefield

is not available. :(

valititi
25 Jan 2011, 12:43 PM
then change the FormPanel layout... for examples, using vbox... then on the checkbox line using an inside hbox (with first the checknox, then the label)...