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 }
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 }
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 }