Question

我有一组6个单选按钮：All，Time，Suppression，Address，Session和Tags。

我有一个与每个按钮相关联的处理程序，它会在单击它时触发一个事件。处理程序将触发网格过滤事件，并根据选择的无线电加载网格的某些部分。

单选按钮代码示例。

{

    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',

        }

Answer 1

您需要将它们组合成一个广播组，因此只会选择其中一个。然后你的事件处理程序将一次又一次地被解雇。

更新：首先将所有处理程序更改为：

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
}

Update3：做这样的事情（见例http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.RadioGroup）

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

Answer 2

处理程序事件查看change事件。如果单击已经检查过的无线电，它将不会触发，因为没有任何变化。没有点击事件。我非常想念的东西。

单选按钮处理程序无法正常触发

2 个答案: