PDA

View Full Version : CheckBox - Do not trigger change on boxLabel click



strickjb
31 Jan 2012, 7:40 AM
I'd like to disable toggling/checking the checkbox when it's boxLabel is clicked. I have a link in the boxLabel that I want to be clicked separately.

In the source, it looks like the event handler IS bound to the input element only. However, it's definitely triggering when the boxLabel is clicked as well...



Ext.define('Ext.form.field.Checkbox', {

...

initEvents: function() {
var me = this;
me.callParent();
me.mon(me.inputEl, 'click', me.onBoxClick, me);
},


onBoxClick: function(e) {
var me = this;
if (!me.disabled && !me.readOnly) {
this.setValue(!this.checked);
}
},

...

});

Any ideas?

jay@moduscreate.com
31 Jan 2012, 8:03 AM
I always thought this was something that was done by the browser natively.

jay@moduscreate.com
31 Jan 2012, 8:04 AM
... besides.. This is normal in application UIs. The idea is that the checkbox is a small target, but the label represents a larger click target, therefore increasing usability.

strickjb
31 Jan 2012, 8:09 AM
I like the fact that the boxLabel acts as a larger target. This is a great default action. In this case, I do not want it to be this way.

Basically, I'm using a checkbox as a file attachment to an email modal. The checkBOX (trigger) is used to detach the attachment. The boxLabel will be styled to be a link and can download the original attachment.

It basically mimics google and many other email clients out there.

Does anyone have any idea where the event handler is coming from that is binding it to the entire checkbox wrapper? I'd like to override it and add in a configuration option for disabling the boxLabel trigger. It'd be handy if the change event was passed an event object so you can check for the actual event target...

strickjb
31 Jan 2012, 8:55 AM
I'm looking into it a bit more and found something rather odd, I added in a console.log statement to track which element I clicked on the checkbox.


Ext.override(Ext.form.field.Checkbox, {
onBoxClick: function (e) {
console.log(e.target);

if (!this.disabled && !this.readOnly) {
this.setValue(!this.checked);
}
}
});


I get some interesting results. No matter where I click on the checkbox at I always get the same target --


<input id="ext-gen1120" class="x-form-field x-form-checkbox x-form-cb-focus" type="button" hidefocus="true" autocomplete="off" aria-checked="true" aria-invalid="false" role="checkbox" aria-describedby="checkboxfield-1030-errorEl" style="-moz-user-select: text;" data-errorqtip="">

So if I click on the label, it says I clicked on the input (trigger)!! There has to be some code in the source that is delegating a new event as if I clicked on the trigger. That's a bummer because otherwise I'd be able to override the above function and check the real target to get the results I want.

I'm determined to get to the bottom of this...

strickjb
31 Jan 2012, 9:57 AM
@jay now I know what you meant by being handled natively by the browser. I didn't realize the boxLabel was an actual <label for="id1"> <input id="id1" /> which completely explains why the checkbox is being triggered.

So yes, it is handled natively by the browser :)

I'm going to make this configurable - maybe say 'disableLabelLink: true' as an option? And then remove the for="" from the label.

Cheers!


My override (contains only a few edits) -



Ext.override(Ext.form.field.Checkbox, {
fieldSubTpl: [
'<tpl if="boxLabel && boxLabelAlign == \'before\'">',
'<label id="{cmpId}-boxLabelEl" class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" ',
'<tpl if="disableLabelLink !== true"> for="{id}"</tpl>', //added (wrapped in an IF)
'>{boxLabel}</label>',
'</tpl>',

'<input type="button" id="{id}" ',
'<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
'class="{fieldCls} {typeCls}" autocomplete="off" hidefocus="true" />',
'<tpl if="boxLabel && boxLabelAlign == \'after\'">',
'<label id="{cmpId}-boxLabelEl" class="{boxLabelCls} {boxLabelCls}-{boxLabelAlign}" ',
'<tpl if="disableLabelLink !== true"> for="{id}" </tpl>', //added (wrapped in an IF)
'>{boxLabel}</label>',
'</tpl>',
{
disableFormats: true,
compiled: true
}
],
onRender : function(ct, position) {
var me = this;

me.addChildEls('boxLabelEl');

Ext.applyIf(me.subTplData, {
boxLabel: me.boxLabel,
boxLabelCls: me.boxLabelCls,
boxLabelAlign: me.boxLabelAlign,
disableLabelLink: me.disableLabelLink //added
});

me.callParent(arguments);
}
});


Adds a configuration option to disable linking the label to the checkbox.

disableLabelLink: true

fabio.policeno
31 May 2013, 11:51 AM
I tried to apply this 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? Thank you!