Включить / отключить флажок в extjs - PullRequest
Новая
       15

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

2 голосов
/ 12 января 2012

Я хочу включить или отключить флажки в 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();

                }

            }
        }
    }]

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

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

Ответы [ 3 ]

3 голосов
/ 12 января 2012

Я заметил пару ошибок:

Компоненты флажка не могут быть напрямую указаны по их 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 на радио «офлайн», когда вы выберете его, «все» останется выбранным.

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

0 голосов
/ 19 августа 2014

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

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

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

.x-form-readonly .x-form-checkbox {
  background-image: url(/extjs/resources/ext-theme-classic/images/form/checkbox.gif);
  opacity: 0.4;
}
0 голосов
/ 12 января 2012

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

 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(); 
}
...