Обработчик радиокнопок не срабатывает должным образом - PullRequest
Новая
       8

Обработчик радиокнопок не срабатывает должным образом

0 голосов
/ 12 марта 2012

У меня есть набор из 6 переключателей: «Все», «Время», «Подавление», «Адрес», «Сессия» и «Теги».

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

Пример кода переключателя. 

{

    boxLabel: 'Source',
    name: 'source',
    inputValue: 4,
    handler: function () {
        gridstore.clearFilter();
        gridstore.filter('id', '2');
        gridstore.load();
    }
}

При первом нажатиирадио, обработчик загружается и работает правильно, отображая правую часть сетки для каждого из 6 радио, но если я попытаюсь запустить его снова (вернитесь к уже активированному радио и нажмите на него снова), это не сработает,Я уверен, что мне нужно отправить некоторые параметры обработчику.Может кто-нибудь помочь мне с тем, что они должны быть?

РЕДАКТИРОВАТЬ: Это весь мой код для этого раздела 

var radioGroup = {
    xtype: 'fieldset',
    // title: 'Radio Groups',
    layout: 'anchor',
    height: 250,
    border: false,
    defaults: {
        anchor: '100%',
        labelStyle: 'padding-left:4px;',
        border: false
    },
    collapsible: false,
    items: [{
        xtype: 'radiogroup',
        // fieldLabel: 'Single Column',
        columns: 1,
        border: false,

        items: [{
            boxLabel: 'All',
            name: 'all',
            inputValue: 1,
            border: false,
            checked: true,
            id: 'All',
            handler: function () {
                var all = Ext.getCmp('All');
                if (all.getValue()) {
                    gridstore.clearFilter();

                    gridstore.load();
                }
            }
        }, {
            boxLabel: 'Time',
            name: 'time',
            inputValue: 2,
            id: 'Time',



            handler: function () {
                var time = Ext.getCmp('Time');
                if (time.getValue()) {
                    gridstore.clearFilter();
                    gridstore.filter('id', '3');
                    gridstore.load();
                }
            },



        }, {
            boxLabel: 'Assignment',
            name: 'assignment',
            inputValue: 3,
            id: 'Assignment',
            handler: function () {
                var assignment = Ext.getCmp('Assignment');
                if (assignment.getValue()) {
                    gridstore.clearFilter();
                    gridstore.filter('id', '5');
                    gridstore.load();
                }
            }
        }, {
            boxLabel: 'Source',
            name: 'source',
            inputValue: 4,
            id: 'Source',
            handler: function () {
                var source = Ext.getCmp('Source');
                if (source.getValue()) {
                    gridstore.clearFilter();
                    gridstore.filter('id', '2');
                    gridstore.load();
                }
            }
        }, {
            boxLabel: 'Address',
            name: 'address',
            inputValue: 5,
            id: 'Address',
            handler: function () {
                var address = Ext.getCmp('Address');
                if (address.getValue()) {
                    gridstore.clearFilter();
                    gridstore.filter('id', '5');
                    gridstore.load();
                }
            }
        }, {
            boxLabel: 'Supression',
            name: 'supression',
            id: 'Supression',
            inputValue: 6,
            handler: function () {
                var supression = Ext.getCmp('Supression');
                if (supression.getValue()) {
                    gridstore.clearFilter();
                    gridstore.filter('id', '6');
                    gridstore.load();
                }
            }
        }, {
            boxLabel: 'Tags',
            name: 'tags',
            id: 'tags',
            inputValue: 7,
            handler: function () {
                var tags = Ext.getCmp('tags');
                if (tags.getValue()) {
                    gridstore.clearFilter();
                    gridstore.filter('id', '7');
                    gridstore.load();
                }
            }
        }]
    }]
};

Обновленный код 2: 

var radioGroup = Ext.create('Ext.form.Panel', {


    //defaultType: 'radiofield',
    // title: 'Radio Groups',
    layout: 'anchor',
    height: 250,
    border: false,
    defaults: {
        anchor: '100%',
        labelStyle: 'padding-left:4px;',
        border: false
    },
    collapsible: false,
    items: [{
        xtype: 'radiogroup',
        // fieldLabel: 'Single Column',
        columns: 1,
        border: false,
        listeners: {
            change: function (name, newValue, oldValue) {
                alert('new value is ', newValue);
            },

        },

        items: [{
            boxLabel: 'All',
            name: 'all',
            inputValue: 'all',
            border: false,
            checked: true,
            id: 'All',

        }, {
            boxLabel: 'Time',
            name: 'time',
            inputValue: 'time',
            id: 'Time',

        }

Ответы [ 2 ]

1 голос
/ 25 апреля 2012

Событие-обработчик смотрит на событие изменения.Если вы нажмете на уже проверенное радио, оно не сработает, потому что ничего не меняетсяНет события клика.Что-то, чего мне очень не хватает.

1 голос
/ 12 марта 2012

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

Обновление: прежде всего измените весь ваш обработчик так: 

handler: function(radio, checked) {
   if (checked) {
      // Do filtering
   }
}

Не делайте getCmp и не создавайте дополнительные и не используемые переменные. Все, что вам нужно, уже отправлено обработчику. Также вы можете добавить console.log(radio) перед if (checked), чтобы увидеть, действительно ли вызывается обработчик во второй раз.

И удалить 

name: xxx
id: xxx
border: xxx

из каждого определения переключателя.

Update2: попробуйте добавить слушателя в саму RadioGroup: 

listeners: {
   change: function(el, newValue, oldValue) { console.log('new value is ', newValue); }
   scope: me
}

Обновление 3: сделать что-то подобное (см. Пример http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.RadioGroup)

Panel
  -- RadioGroup
  --- listeners {}
  --- items: [
  ----- Radiobutton
  ----- Radiobutton
  ----- Radiobutton
      ]
...