extjs-gpl/examples/kitchensink/modern/src/view/binding/ComponentState.js

GPL licensed version of Sencha Ext JS

Ext.define('KitchenSink.view.binding.ComponentState', {
    extend: 'Ext.form.Panel',

    // <example>
    requires: [
        'Ext.app.ViewModel'
    ],
    // </example>

    viewModel: true,

    shadow: true,
    cls: 'demo-solid-background',

    items: {
        xtype: 'fieldset',
        instructions: [
            'The admin key field is disabled when the admin checkbox is not checked. ',
            'The high priority field is hidden when the priority is toggled.'
        ].join(''),
        items: [{
            xtype: 'checkboxfield',
            label: 'Is Admin',
            reference: 'isAdmin'
        }, {
            xtype: 'textfield',
            label: 'Admin Key',
            enforceMaxLength: true,
            bind: {
                disabled: '{!isAdmin.checked}'
            }
        }, {
            xtype: 'togglefield',
            label: 'Priority',
            reference: 'priority'
        }, {
            xtype: 'textfield',
            label: 'High Priority Code',
            hidden: true,
            bind: {
                hidden: '{!priority.value}'
            }
        }]
    }
});