Блог

Главная - Вопросы по программированию - RadioButton не проверяется при изменении

RadioButton не проверяется при изменении

#extjs #extjs5

#extjs #extjs5

Вопрос:

я работаю над созданием радиогруппы, содержащей два радиоприемника; Я установил прослушиватель изменений в радиогруппе, и, похоже, все работает нормально, за исключением того, что визуально переключатели не проверяются при нажатии, см. Ниже Полный код :

 Ext.define('Mine.view.headerThemeButton', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.headerThemeButton',
    xtype: 'headerThemeButton',
    width: 50,
    height: 58,
    padding: 'auto 0 auto 0',
    bodyStyle: 'border-color: #FFFFFF !important;',
    //id : 'headerThemeButton',
    //height: 20,
    items: [{
        xtype: 'button',
        height: '100%',
         glyph: 'xf142@FontAwesome',
  
        cls: 'headerButtonsCls',
        listeners: {
            click: function(e, target) {
            
                var coords = e.getXY();
                var x = parseInt(coords[0]);
                var y = parseInt(coords[1]);

                 var finalY = y   50;
                Ext.create('Ext.menu.Menu', {
                    items: [{
                        xtype: 'radiogroup',
                        columns: 1,
                        vertical: true,
                        items: [{
                            //xtype: 'radiofield',
                            boxLabel: 'Dark Mode',
                            name  : 'Mode',
                            //id : 'dmRB',
                            inputValue : 'dm'

                         }, {
                            //xtype: 'radiofield',
                            boxLabel: 'Standard Mode',
                            name  : 'Mode',
                            //id : 'smRB',
                            inputValue : 'sm'

                         }],
                        listeners : {

                             change : function(radio, newValue, oldValue){
                          
                                if (radio.getValue().Mode == 'dm'){

                                    radio.checked = true;
                                     this.onChangeThemeDark();
                                    }
                                else if (radio.getValue().Mode == 'sm'){
                                     radio.checked = true;
 
                                    this.onChangeThemeStandard();
                                    }
                            }
                        }
                    }]
                }).showAt(x, finalY);
            }

        }
    }]
});

Я не могу использовать идентификатор prop для каждого радио, потому что это приведет к дублированию ошибки регистрации.
Любое решение?

Спасибо!

РЕДАКТИРОВАТЬ : вся кнопка включена в интерфейс, определенный :

 Ext.define('Mine.view.newDashboard', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.newDashboard',

    controller: 'newDashboard',
    reference: 'dashboard',
    //overflowY: 'scroll',

    //autoScroll:true,
    layout: {
        type: 'border',
        align: 'stretch '
        //scrollable: true
    },
    /*viewConfig:
    {
        autoScroll: true
    },*/
    //height: 620,

    style: {
        'backgroundColor': '#909090 !important'
    },

    items: [{
            region: 'north',
            html: '',
            border: false,
            collapsible: false,
            margin: '0 0 0 0',
            resizable: false,
            //bodyStyle:'border-bottom-width: 0 !important;',
            layout: {
                type: 'hbox'

                // align: 'stretch'
            },
            items: [{
                    xtype: 'logolink',
                    padding: 'auto 0 auto 0'
                },
                {
                    xtype: 'tbfill'
                },
                {
                    xtype: 'headerThemeButton',
                    width: '100px'
                },...

Ответ №1:

Я не совсем уверен, о чем вы спрашиваете, но я предполагаю, что проблема в том, что когда появляется меню после выбора значения, ничего не выбрано. Также возможно, что вы не можете получить каждую кнопку в событии.

Вот скрипка, которая показывает, как получить каждую кнопку в событии, двумя разными способами.

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

Вы также можете создать меню и сохранить его на панели (или где угодно) и показывать это меню каждый раз, если вы не хотите, чтобы оно было прикреплено к кнопке.

Переключатели для скрипки

Комментарии:

1. Для this.onChangeThemeStandard(); работы метод должен быть определен в контроллере всего интерфейса, верно?

2. если бы вы вызывали это в обработчике событий, метод должен был бы находиться в области действия «this», областью действия которого является radiogroup . в случае скрипки «this» совпадает с переменной radio, поэтому вы можете вызвать this.themeChange или radio.themeChange . Я создал метод, и я вызываю скрипку, перейдите к ее изменению. Пожалуйста, укажите версию extjs, которую вы используете, а также инструментарий, поэтому Extjs 7.3.1 Modern или 6.0 classic.

3. Это ExtJS 6.2.0

4. Кроме того … вы могли бы создать контроллер и поместить метод в контроллер. Вы могли бы добавить метод в контроллер. Затем вы можете настроить контроллер на отслеживание событий, а затем запустить событие, которое запускает метод ….. это хорошо для контроллера представления модели. Тогда у вас нет никакой логики в вашем представлении…

5. Нет, Mine.view.headerThemeButton включен в контейнер с использованием синтаксиса {xtype : headerThemeButton} , этот основной контейнер привязан к контроллеру. Теперь я хочу определить onChangeThemeDark() метод в этом контроллере, и мой вопрос будет заключаться в том, как вызвать его из слушателя радиополя? Спасибо!