extjs radiogroup 互斥

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

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

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

 1 {
 2                     xtype: 'radiogroup',
 3                     height: 96,
 4                     width: 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                     width: 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/archive/2012/05/22/2512969.html