Bryntum Support Forums

Posted: **Thu Oct 24, 2019 10:18 am**

For some reasons, click actions don't work anymore on checkboxes. It used to work, but now I cannot get it running.
I've tried different selectors, but none seems to do the job anymore.

The other fields seem ok.
Ext.ComponentQuery.query delivers the object but the click action doesn't work.

Any ideas?

A demo test-case. Using, Extjs 6.7 Modern and Siesta-Lite


StartTest(function (t) {

    Ext.Viewport.removeAll(true);
    Ext.Viewport.add({
        xtype: 'formpanel',
        items: [
            {
                xtype: 'checkboxfield',
                name: 'tomato',
                label: 'Tomato',
                value: 'tomato',
                checked: true
            }, {
                xtype: 'checkboxfield',
                name: 'salami',
                label: 'Salami'
            }, {
                xtype: 'togglefield',
                label: 'Toggle'
            }
        ]
    });

    t.pass('View could be rendered');

    console.log(Ext.ComponentQuery.query('field[label=Tomato]'));

    t.chain(
        { click: '>> togglefield => .x-component' },
        { click: '>> field[label=Tomato]' },
        { click: '>> checkbox' }
    );

});

: Screenshot_465.png (29.03 KiB) Viewed 4270 times

Posted: **Thu Oct 24, 2019 10:21 am**

Might be some markup change in the recent Ext. I'll check in the evening. What if you try to click the dom element directly?

Posted: **Thu Oct 24, 2019 1:08 pm**

{ click: Ext.ComponentQuery.query('field[label=Tomato]')[0].el.dom },

This works, as said, I have this problem only with checkboxes.

Posted: **Fri Oct 25, 2019 10:28 am**

Thanks for the detailed report. Its now fixed and pushed (fully cycle of nightly testing in all browsers is still pending). You can verify in the tomorrow nightly, or in the upcoming 5.3.0.

If you are ok with hotpatching, you can also find this place in "siesta-all.js"

            if (Ext && Ext.form && Ext.form.Field && locateInputEl) {
                // Deal with bizarre markup in Ext 5.1.2+
                if (
                    (Ext.form.Checkbox && comp instanceof Ext.form.Checkbox || Ext.form.Radio && comp instanceof Ext.form.Radio)
                    && comp.el
                ) {
                    var displayEl   = comp.displayEl;

                    if (displayEl && comp.boxLabel) {
                        return displayEl;
                    }
                    //                                                    Ext6 Modern
                    return comp.el.down('.x-form-field') || comp.el.down('.x-field-input') || comp.inputEl;
                }

                if (comp instanceof Ext.form.Field && comp.inputEl) {
                    var field       = comp.el.down('.x-form-field');

                    return (field && field.dom) ? field : comp.inputEl;
                }

                if (Ext.form.HtmlEditor && comp instanceof Ext.form.HtmlEditor) {
                    //     Ext JS 3       Ext JS 4
                    return comp.iframe || comp.inputEl;
                }
            }

            // Sencha Touch: Form fields can have a child input component
            if (Ext && Ext.field && Ext.field.Field && comp instanceof Ext.field.Field && locateInputEl && comp.getComponent) {

and update it to:

            if (Ext && Ext.form && Ext.form.Field && locateInputEl) {
                // Deal with bizarre markup in Ext 5.1.2+
                if (
                    (Ext.form.Checkbox && comp instanceof Ext.form.Checkbox || Ext.form.Radio && comp instanceof Ext.form.Radio)
                    && comp.el
                ) {
                    var displayEl   = comp.displayEl;

                    if (displayEl && comp.boxLabel) {
                        return displayEl;
                    }

                    var inputComponent  = Ext.ComponentQuery.query('checkboxinput', comp)[ 0 ]

                    if (inputComponent) return this.compToEl(inputComponent)

                    //                                                    Ext6 Modern               Ext6.7                                   Fallback
                    return comp.el.down('.x-form-field') || comp.el.down('.x-field-input') || comp.el.down('.x-input-el') || comp.inputEl || comp.el;
                }

                if (comp instanceof Ext.form.Field && comp.inputEl) {
                    var field       = comp.el.down('.x-form-field');

                    return (field && field.dom) ? field : comp.inputEl;
                }

                if (Ext.form.HtmlEditor && comp instanceof Ext.form.HtmlEditor) {
                    //     Ext JS 3       Ext JS 4
                    return comp.iframe || comp.inputEl;
                }
            }

            if (Ext && Ext.field && Ext.field.Slider && (comp instanceof Ext.field.Slider)) {
                return this.compToEl(Ext.ComponentQuery.query('slider', comp)[ 0 ])
            }

            // Sencha Touch: Form fields can have a child input component
            if (Ext && Ext.field && Ext.field.Field && comp instanceof Ext.field.Field && locateInputEl && comp.getComponent) {

Posted: **Fri Oct 25, 2019 2:26 pm**

Thanks for the update. I'll wait for the fix, as it comes from npm repos

Bryntum Support Forums

Checkbox clicks not working anymore?

Checkbox clicks not working anymore?

Re: Checkbox clicks not working anymore?

Re: Checkbox clicks not working anymore?

Re: Checkbox clicks not working anymore?

Re: Checkbox clicks not working anymore?