Включить/отключить флажок в extjs

Я хочу включить или отключить флажки в EXTJS

 dockedItems: [{
        xtype: 'toolbar',
        dock: 'top',
        items: [{
            xtype: 'radiofield',
            id: 'all',
            name: 'show',
            boxLabel: 'All',
            checked: true,
            inputValue: 'all'
        }, {
            xtype: 'radiofield',
            id: 'online',
            name: 'show',
            boxLabel: 'Online',
            inputValue: 'online'
        }, {
            xtype: 'radiofield',
            id: 'offline',
            name: 'show',
            boxLabel: 'Offline',
            inputValue: 'offline'
        }, {
            xtype: 'checkboxfield',
            id: 'cb1',
            boxLabel: 'Sometimes',
            checked: true,
            inputValue: 'sometimes'
        }, {
            xtype: 'checkboxfield',
            id: 'cb2',
            boxLabel: 'Always',
            checked: true,
            inputValue: 'always'
        }],
        listeners: {
            change: function (field, newValue, oldValue) {
                var value = newValue.show;
                if (value == 'all') {
                    var cb1 = Ext.getCmp('cb1');
                    var cb2 = Ext.getCmp('cb2');

                    cb1.disable();
                    cb2.disable();
                }
                if (value == 'online') {
                    var cb1 = Ext.getCmp('cb1');
                    var cb2 = Ext.getCmp('cb2');

                    cb1.disable();
                    cb2.disable();
                }
                if (value == 'offline') {

                    var cb1 = Ext.getCmp('cb1');
                    var cb2 = Ext.getCmp('cb2');

                    cb1.enable();
                    cb2.enable();

                }

            }
        }
    }]

Как я могу включить эти флажки? Они должны быть включены, когда пользователь выбирает автономный режим, и отключены, когда пользователь выбирает другой вариант.

Спасибо за вашу помощь!


checkbox radio-button extjs
person Rick Weller    schedule 12.01.2012    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Пара ошибок, которые я заметил:

На компоненты флажка нельзя напрямую ссылаться по их id, но вы можете вызывать их с помощью Ext.getCmp('id').

Ваш прослушиватель в приведенном выше примере прикреплен к панели инструментов, на которой нет события change. Вместо этого вам нужно прикрепить его к радио.

На самом деле, если вы хотите, чтобы флажки были включены только тогда, когда «автономное» радио заполнено, я бы рекомендовал добавить конфигурацию handler к «автономному» радио с функцией включения или отключения флажков в зависимости от того, на какое значение изменено это радио. Например, это работает:

dockedItems: [{
    xtype: 'toolbar',
    dock: 'top',
    items: [{
        xtype: 'radiofield',
        id: 'all',
        name: 'show',
        boxLabel: 'All',
        checked: true,
    }, {
        xtype: 'radiofield',
        id: 'online',
        name: 'show',
        boxLabel: 'Online',
        inputValue: 'online',
    }, {
        xtype: 'radiofield',
        id: 'offline',
        name: 'show',
        boxLabel: 'Offline',
        inputValue: 'offline',
        handler: function(field, value) {
            if (value) {
                Ext.getCmp('cb1').enable();
                Ext.getCmp('cb2').enable();
            } else {
                Ext.getCmp('cb1').disable();
                Ext.getCmp('cb2').disable();        
            }            
        }
    }, {
        xtype: 'checkboxfield',
        id: 'cb1',
        boxLabel: 'Sometimes',
        checked: true,
        inputValue: 'sometimes',
        disabled: true
    }, {
        xtype: 'checkboxfield',
        id: 'cb2',
        boxLabel: 'Always',
        checked: true,
        inputValue: 'always',
        disabled: true
    }]
}],

Я предлагаю использовать конфигурацию handler (как указано выше) и не иметь слушателя для события change.

Если вы добавите прослушиватель change, он переопределит обработчик по умолчанию change, используемый ExtJS внутри для отмены выбора других полей радио в той же группе имен. Например. с change слушателем на «оффлайн» радио, когда вы выбираете его, «все» останутся выбранными.

Другими словами... просто скопируйте приведенный выше пример и все будет хорошо.

person egerardus    schedule 12.01.2012
comment
Когда я устанавливаю checked: true и disabled: true для флажка и отправляю форму, сервер не получает значение параметра флажка как on. Он опущен в параметрах поста. Как я могу использовать как отключенное, так и проверенное значение для флажка и получить его в качестве параметра при отправке? - person August; 22.04.2014

arrow_upward
0
arrow_downward

Вы можете сделать следующее, чтобы установить идентификаторы для флажков, чтобы найти их в этом примере:

 if (value == 'offline') {
            var cb1 = Ext.getCmp('cbox1');//look up by given checkbox ids
            var cb2 = Ext.getCmp('cbox2');//look up by given checkbox ids

cb1.enable();
cb2.enable(); 

online 
  }
else {
        var cb1 = Ext.getCmp('cbox1');//look up by given checkbox ids
            var cb2 = Ext.getCmp('cbox2');//look up by given checkbox ids

cb1.disable();
cb2.disable(); 
}
person b3verelabs    schedule 12.01.2012
comment
ха-ха, я думаю, что сделал что-то не так. Мои радиокнопки отключены, а флажки включены по умолчанию :) - person Rick Weller; 12.01.2012

arrow_upward
0
arrow_downward

Стандартный подход к включению/отключению флажка в ExtJS заключается в установке параметров конфигурации disable: true или disable: false при создании компонента.

А вот что касается ExtJS 4.2 — в нем есть некоторые неудобства. Отключение или установка флажка в readOnly делает компонент очень прозрачным. В классическом дизайне фреймворка и, возможно, в некоторых других вы даже не увидите галочку в поле, если оно отключено или установлено только для чтения. Как будто он был пуст.

Лучшее решение, которое мы нашли, — это создать глобальный класс css проекта для всех элементов ExtJS этого типа. Он смещается к лучшему знаку галочки на изображении стандартной темы фреймворка и добавляет некоторую непрозрачность:

.x-form-readonly .x-form-checkbox {
  background-image: url(/extjs/resources/ext-theme-classic/images/form/checkbox.gif);
  opacity: 0.4;
}
person Zon    schedule 19.08.2014