0

Toying with Extreact and I have a checkbox on my page that I want to have control over it's checked state. For example I want to set the checked value inside my state and be able to check or uncheck that input without clicking on it as a user.

The problem is that CheckboxField only has a checked prop that refers to the initial state so it's pretty useless afterwards.

Romeo Mihalcea
  • 9,714
  • 12
  • 50
  • 102
  • Not sure about ext-react, but in ExtJS you would use `checkbox.setValue(true)` to check the box (`false` to uncheck). – Alexander Mar 20 '18 at 20:10

1 Answers1

0

It's not possible about of the box to prevent clicks from changing the state, but it's pretty easy to achieve with an override. Fiddle.

Ext.define(null, {
    override: 'Ext.field.Checkbox',

    updateReadOnly: function (value, oldValue) {
        this.callParent([value, oldValue]);
        this.inputElement.dom.onclick = value ? function () {
            return false;
        } : null;
    }
})

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.Viewport.add({
            xtype: 'container',
            items: [{
                id: 'foo',
                xtype: 'checkbox',
                readOnly: true
            }, {
                xtype: 'button',
                text: 'On',
                handler: function () {
                    Ext.getCmp('foo').check();
                }
            }, {
                xtype: 'button',
                text: 'Off',
                handler: function () {
                    Ext.getCmp('foo').uncheck();
                }
            }]
        });
    }
});
Evan Trimboli
  • 29,900
  • 6
  • 45
  • 66
  • I'm having trouble translating/applying your code into Extreact. I tried setting an id or ref but then `Ext.getCmp` complains with `Cannot read property 'uncheck' of undefined` – Romeo Mihalcea Mar 20 '18 at 21:27
  • The only relevant portion to "fix" the issue is above the `Ext.application` call. The rest is just to demonstrate that it "works". – Evan Trimboli Mar 20 '18 at 21:30
  • Nvm got it working by calling `uncheck` on the first param out of `onCheck` event. A little more control over the state would help but works ok this way too. – Romeo Mihalcea Mar 20 '18 at 21:32