PDA

View Full Version : labelStyle replaces FormPanel/Panel's config styles



nthamizhan
24 Sep 2008, 2:22 AM
Hi All,

I am trying to set some common style properties for all the labels using FormPanel/Panel config properties and also setting label specific styles using labelStyle config property. But labelStyle property replaces the FormPanel/Panel's properties which was set by labelAlign and labelWidth. So is there any way to have both the style attributes without overwritten by labelStyle.



var gridForm = new Ext.FormPanel({
id: 'company-form',
frame: true,
labelAlign: 'right',
title: 'Company data',
labelWidth:200,
width: 500,
items: [{
xtype: 'textfield',
fieldLabel: 'First Name',
labelStyle : 'font-weight:bold', //it replaces the labelAlign and labelWidth
name: 'firstname'
}, {
xtype: 'textfield',
fieldLabel: 'Last Name',
// labelStyle : 'font-weight:bold',
name: 'lastname'
}],
renderTo: bd
});

Thanks,
Thamizhan

Condor
24 Sep 2008, 2:32 AM
For labelAlign:left/right you'll need to use: labelStyle:'width:<labelWidth>px;font-weight:bold;'.

nthamizhan
24 Sep 2008, 3:07 AM
Thanks for your suggestion.

Is there anyway to assign the label width globally in FormPanel/Panel using 'labelWidth:200', which will be shared by all the fieldLabel along with specific labelStyle.

Thanks,
Thamizhan

Condor
24 Sep 2008, 3:56 AM
The following override makes labelStyle work independently of other config options:


Ext.override(Ext.layout.FormLayout, {
renderItem : function(c, position, target){
if(c && !c.rendered && c.isFormField && c.inputType != 'hidden'){
var args = [
c.id, c.fieldLabel,
(this.labelStyle||'') + ';' + (c.labelStyle||''),
this.elementStyle||'',
typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator,
(c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
c.clearCls || 'x-form-clear-left'
];
if(typeof position == 'number'){
position = target.dom.childNodes[position] || null;
}
if(position){
this.fieldTpl.insertBefore(position, args);
}else{
this.fieldTpl.append(target, args);
}
c.render('x-form-el-'+c.id);
}else {
Ext.layout.FormLayout.superclass.renderItem.apply(this, arguments);
}
}
});

nthamizhan
24 Sep 2008, 6:40 AM
Thanks for your code. It's working fine.

Slartibartfast
29 Oct 2009, 7:38 PM
I had this issue (http://www.extjs.com/forum/showthread.php?t=77887) with Ext 3.0.0, and couldn't wait until fixed. I modified the args variable to work on Ext 3.0.0.



var args = {id: c.id,
label: c.fieldLabel,
labelStyle: (this.labelStyle || '') + ';' + (c.labelStyle || ''),
elementStyle: this.elementStyle||'',
labelSeparator: !c.fieldLabel || c.hideLabel ? '' : (typeof c.labelSeparator == 'undefined' ? this.labelSeparator : c.labelSeparator),
itemCls: (c.itemCls||this.container.itemCls||'') + (c.hideLabel ? ' x-hide-label' : ''),
clearCls: c.clearCls || 'x-form-clear-left'
};