extjs radiogroup 互斥

extjs 中的 radiogroup 中的 radio,在选中一个后,之前被选中的,不能自动设置为false

通过下面的代码,可以实现。但这个是因为在通过程序设置某radio的状态后,radiogoup会

两次触发change事件,然后通过比较变化前后的值来判断,不是太好。应该有其它方法可以实现的。

 1 {
 2                     xtype: 'radiogroup',
 3                     height: 96,
 4                      365,
 5                     fieldLabel: 'Label',
 6                     items: [
 7                         {
 8                             xtype: 'radiofield',
 9                             boxLabel: 'Box Label',                        
10                             name : 'rd0'
11                         },
12                         {
13                             xtype: 'radiofield',
14                             boxLabel: 'Box Label',
15                             name : 'rd1'
16                         },
17                         {
18                             xtype: 'radiofield',
19                             boxLabel: 'Box Label',
20                                 checked:true,
21                             name: 'rd2'
22                         },
23                         {
24                             xtype: 'radiofield',
25                             boxLabel: 'Box Label',
26                             name : 'rd3'
27                         },
28                         {
29                             xtype: 'radiofield',
30                             boxLabel: 'Box Label',
31                             name: 'rd4'
32                         }
33                     ],
34                     listeners:{
35                         'change':function(view,newrd,oldrd){  
36                             var cur = -1;
37                             
38                             //Radiogroup的选中,先将上一个选中的按钮设置为false,会触发下一次change事件
39                             for(var i=0;i<view.items.items.length;i++)
40                             {
41                                 if(newrd['rd'+i] == 'on' && oldrd['rd'+i] == 'on')
42                                 {                                  
43                                     view.items.items[i].setValue( false);
44                                     return;
45                                 }
46                             }                            
47                             
48                             //第二次触发,将真正被选中的按钮设置为true
49                             for(var i=0;i<view.items.items.length;i++)
50                             {
51                                 if(newrd['rd'+i] == null && oldrd['rd'+i] == 'on')
52                                 {                                  
53                                     view.items.items[i].setValue( true);
54                                     return;
55                                 }
56                             }
57                         }
58                       
59                     }
60                 }

上面的实现是错误的,正确的方法是将radiogroup中所有的radio的name属性都设置为一样的,这样就可以实现互斥了。

 1 {
 2                     xtype: 'radiogroup',
 3                     height: 96,
 4                      365,
 5                     fieldLabel: 'Label',
 6                     items: [
 7                         {
 8                             xtype: 'radiofield',
 9                             boxLabel: 'Box Label',                        
10                             name : 'rd0'
11                         },
12                         {
13                             xtype: 'radiofield',
14                             boxLabel: 'Box Label',
15                             name : 'rd0'
16                         },
17                         {
18                             xtype: 'radiofield',
19                             boxLabel: 'Box Label',
20                                 checked:true,
21                             name: 'rd0'
22                         },
23                         {
24                             xtype: 'radiofield',
25                             boxLabel: 'Box Label',
26                             name : 'rd0'
27                         },
28                         {
29                             xtype: 'radiofield',
30                             boxLabel: 'Box Label',
31                             name: 'rd0'
32                         }
33                     ]
34                 }
原文地址:https://www.cnblogs.com/baishahe/p/2512969.html