PDA

View Full Version : Remove property 'for' in label checkbox



fabio.policeno
31 May 2013, 11:54 AM
Hello,

I tried to apply a override and even changed directly in the template class checkbox removing the for property, but it did not work, it is continuous. Is there anywhere else the template this checkbox you just overwriting?

I need remove the onClick of label, to not change the value of checkbox

Thank you!

slemmon
2 Jun 2013, 9:03 PM
Have you tried overriding the labelableRenderTpl for Ext.form.Labelable?

fabio.policeno
3 Jun 2013, 2:23 AM
Yes, the "for" continue:

Ext.define('Overrides.override.form.Labelable', { override : 'Ext.form.Labelable',


labelableRenderTpl: [


// body row. If a heighted Field (eg TextArea, HtmlEditor, this must greedily consume height.
'<tr id="{id}-inputRow" <tpl if="inFormLayout">id="{id}"</tpl>>',


// Label cell
'<tpl if="labelOnLeft">',
'<td id="{id}-labelCell" style="{labelCellStyle}" {labelCellAttrs}>',
'{beforeLabelTpl}',
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"></tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>',
// Required for Opera
' unselectable="on"',
'>',
'{beforeLabelTextTpl}',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'{afterLabelTextTpl}',
'</label>',
'{afterLabelTpl}',
'</td>',
'</tpl>',


// Body of the input. That will be an input element, or, from a TriggerField, a table containing an input cell and trigger cell(s)
'<td class="{baseBodyCls} {fieldBodyCls}" id="{id}-bodyEl" colspan="{bodyColspan}" role="presentation">',
'{beforeBodyEl}',


// Label just sits on top of the input field if labelAlign === 'top'
'<tpl if="labelAlign==\'top\'">',
'{beforeLabelTpl}',
'<div id="{id}-labelCell" style="{labelCellStyle}">',
'<label id="{id}-labelEl" {labelAttrTpl}<tpl if="inputId"></tpl> class="{labelCls}"',
'<tpl if="labelStyle"> style="{labelStyle}"</tpl>',
// Required for Opera
' unselectable="on"',
'>',
'{beforeLabelTextTpl}',
'<tpl if="fieldLabel">{fieldLabel}{labelSeparator}</tpl>',
'{afterLabelTextTpl}',
'</label>',
'</div>',
'{afterLabelTpl}',
'</tpl>',


'{beforeSubTpl}',
'{[values.$comp.getSubTplMarkup(values)]}',
'{afterSubTpl}',


// Final TD. It's a side error element unless there's a floating external one
'<tpl if="msgTarget===\'side\'">',
'{afterBodyEl}',
'</td>',
'<td id="{id}-sideErrorCell" vAlign="{[values.labelAlign===\'top\' && !values.hideLabel ? \'bottom\' : \'middle\']}" style="{[values.autoFitErrors ? \'display:none\' : \'\']}" width="{errorIconWidth}">',
'<div id="{id}-errorEl" class="{errorMsgCls}" style="display:none"></div>',
'</td>',
'<tpl elseif="msgTarget==\'under\'">',
'<div id="{id}-errorEl" class="{errorMsgClass}" colspan="2" style="display:none"></div>',
'{afterBodyEl}',
'</td>',
'</tpl>',


'</tr>',
{
disableFormats: true
}
]
});

Ext JS Version 4.1.0

http://cl.ly/image/1J0i3j452V3T

slemmon
4 Jun 2013, 12:57 PM
Sorry for any misdirection. I wasn't thinking about checkbox having its own boxLabel template. Try with:



Ext.define('Overrides.override.form.Labelable', { override : 'Ext.form.field.Checkbox',




fieldSubTpl: [
'<tpl if="boxLabel && boxLabelAlign == \'before\'">',
'{beforeBoxLabelTpl}',
'<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
// Creates an input of the configured type. By default, this is "button" to enable theming.
// When ARIA is enabled, this reverts to a "checkbox"
'<input type="{inputTypeAttr}" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<tpl if="boxLabel && boxLabelAlign == \'after\'">',
'{beforeBoxLabelTpl}',
//'<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" for="{id}">',
'<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}">',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
{
disableFormats: true,
compiled: true
}
]
});






Ext.widget('checkboxfield', {
renderTo: document.body,
boxLabel: 'Checkbox Label'
});

fabio.policeno
4 Jun 2013, 1:33 PM
Cool! But, the label is after of field and not before, and my style (style of fieldLabel) not is applied in boxLabel. I have work in this template?

Thank's

slemmon
4 Jun 2013, 3:13 PM
Perhaps you can share your code you're using to create the checkbox so I can see what you're doing when rendering the component.

fabio.policeno
4 Jun 2013, 3:15 PM
The code is very extensive and dynamic, I am working with metadata fields to ride, but overall I would put the label on left chest marking, but anyway, thank you, I will try here, if it is not possible, I phaco a test specific part.

fabio.policeno
20 Jun 2013, 4:46 AM
I need of boxLabelAlign: 'before', then, I remove the for:

'<tpl if="boxLabel && boxLabelAlign == \'before\'">', '{beforeBoxLabelTpl}',
'<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}">',
'{beforeBoxLabelTextTpl}',
...

fabio.policeno
20 Jun 2013, 5:19 AM
In reality, this is not okay solving my problem. If I change the template, everywhere will be applied and I want to change this behavior only in one place only, so I preferred a flag (true | false) in the class to determine if that label will link box or not. Preferably not to be used boxLabel but the FieldLabel, to follow the pattern.


Thank you!

fabio.policeno
20 Jun 2013, 8:28 AM
Resolve:


Ext.define('App.override.form.field.Checkbox', {
override: 'Ext.form.field.Checkbox',
linkLabel: true,


initComponent: function() {
var me = this;


me.fieldSubTpl = [
'<tpl if="boxLabel && boxLabelAlign == \'before\'">',
'{beforeBoxLabelTpl}',
'<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}"',
'<tpl if="this.linkLabel"> for="{id}"</tpl>>',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
// Creates an input of the configured type. By default, this is "button" to enable theming.
// When ARIA is enabled, this reverts to a "checkbox"
'<input type="{inputTypeAttr}" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
'<tpl if="ariaAttrs"> {ariaAttrs}</tpl>',
' class="{fieldCls} {typeCls} {inputCls} {childElCls}" autocomplete="off" hidefocus="true" />',
'<tpl if="boxLabel && boxLabelAlign == \'after\'">',
'{beforeBoxLabelTpl}',
'<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}"',
'<tpl if="this.linkLabel"> for="{id}"</tpl>>',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
{
disableFormats: true,
compiled: true,
linkLabel: me.linkLabel
}
];


me.callParent(arguments);
}
});

fabio.policeno
20 Jun 2013, 9:10 AM
Ext.define('Konecty.override.form.field.Checkbox', { override: 'Ext.form.field.Checkbox',
linkLabel: true,
fieldSubTpl: [
'<tpl if="boxLabel && boxLabelAlign == \'before\'">',
'{beforeBoxLabelTpl}',
'<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}"',
'<tpl if="linkLabel"> for="{id}"</tpl>>',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
// Creates not an actual checkbox, but a button which is given aria role="checkbox" (If ARIA is required) and
// styled with a custom checkbox image. This allows greater control and consistency in
// styling, and using a button allows it to gain focus and handle keyboard nav properly.
'<input type="button" id="{id}" {inputAttrTpl}',
'<tpl if="tabIdx"> tabIndex="{tabIdx}"</tpl>',
'<tpl if="disabled"> disabled="disabled"</tpl>',
'<tpl if="fieldStyle"> style="{fieldStyle}"</tpl>',
' class="{fieldCls} {typeCls}" autocomplete="off" hidefocus="true" />',
'<tpl if="boxLabel && boxLabelAlign == \'after\'">',
'{beforeBoxLabelTpl}',
'<label id="{cmpId}-boxLabelEl" {boxLabelAttrTpl} class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}"',
'<tpl if="linkLabel"> for="{id}"</tpl>>',
'{beforeBoxLabelTextTpl}',
'{boxLabel}',
'{afterBoxLabelTextTpl}',
'</label>',
'{afterBoxLabelTpl}',
'</tpl>',
{
disableFormats: true,
compiled: true
}
],


getSubTplData: function() {
var me = this;


return Ext.apply(me.callParent(), {
disabled : me.readOnly || me.disabled,
boxLabel : me.boxLabel,
boxLabelCls : me.boxLabelCls,
boxLabelAlign : me.boxLabelAlign,
inputTypeAttr : me.inputTypeAttr,
linkLabel : me.linkLabel
});
}
});