基于EXT2的RadioGroup

http://blog.csdn.net/cxhzqhzq/archive/2009/04/16/4085524.aspx

 

被Ext 2.0的radio折磨了好久，好容易找到这么个方法，记录下来，

首先上图：

在ext-all.js的最后加入：

view plaincopy to clipboardprint?

1. Ext.namespace('Ext.ux');     
2.       
3. Ext.ux.Radio =function(config)     
4. {     
5.     Ext.ux.Radio.superclass.constructor.call(this,config);     
6.     this.group = config.group;     
7.     this.value=config.value;     
8. };     
9. Ext.extend(Ext.ux.Radio ,Ext.form.Radio, {     
10.      onRender : function(ct, position){     
11.          Ext.ux.Radio.superclass.onRender.call(this, ct, position);     
12.           if(this.el && this.el.dom){     
13.             this.el.dom.value = this.value;//make the value for radio is the value user has given!     
14.         }     
15.          this.on('check',this.onCheck);     
16.      },     
17.    clearInvalid : function(){     
18.         this.group.clearInvalid();     
19.      },markInvalid : function(msg){     
20.           this.group.markInvalid(msg);     
21.     },     
22.     onClick : function(){     
23.              
24.         if(this.el.dom.checked !=this.checked){     
25.              this.group.setValue(this.value);     
26.         }     
27.             
28.     },     
29.      setValue : function(v){     
30.         this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');     
31.         if(this.el && this.el.dom){     
32.             this.el.dom.checked = this.checked;     
33.             this.el.dom.defaultChecked = this.checked;     
34.             this.group.el.dom.value=this.value;     
35.         }     
36.     },onCheck:function(radio,checked)     
37.     {     
38.              
39.         Ext.log('radiao change!');     
40.         if(checked)     
41.         {     
42.         var oldValue=this.group.getValue();     
43.         this.group.onChange(this.group,oldValue,this.getValue());     
44.         }     
45.              
46.         //this.fireEvent('change', this.group, oldValue, newValue);     
47.     },     
48.      getValue : function(){     
49.         if(this.rendered){     
50.             return this.el.dom.value;     
51.         }     
52.          return false;     
53.     }     
54. });     
55.     
56. Ext.ux.RadioGroup=function(config)     
57. {     
58.     this.radios=config.radios;     
59.     this.defaultValue=config.defaultValue||false;     
60.     Ext.ux.RadioGroup.superclass.constructor.call(this,config);         
61. };     
62. Ext.extend(Ext.ux.RadioGroup,Ext.form.Field,  {     
63.     defaultAutoCreate:{tag:'input', type:'hidden'},     
64.      onRender : function(ct, position){     
65.               
66.         Ext.ux.RadioGroup.superclass.onRender.call(this, ct, position);     
67.         this.wrap = this.el.wrap({cls: "x-form-check-wrap"});     
68.         if (this.radios && this.radios instanceof Array) {     
69.             this.els=new Array();     
70.             this.els[0]=this.el;     
71.             for(var i=0;i<this.radios.length;i++){     
72.                 var r=this.radios[i];     
73.                 this.els[i]=new Ext.ux.Radio(Ext.apply({}, {     
74.                     renderTo:this.wrap,     
75.                     hideLabel:true,     
76.                     group:this    
77.                 },r));     
78.                 if (this.horizontal) {     
79.                     this.els[i].el.up('div.x-form-check-wrap').applyStyles({     
80.                         'display': 'inline',     
81.                         'padding-left': '5px'    
82.                     });     
83.                 }     
84.             }     
85.             if(this.hidden)this.hide();     
86.          }     
87.         this.setDefaultValue();     
88.     },initValue : function(){     
89.         //Ext.log('initValue for'+this.name);     
90.         if(this.value !== undefined){     
91.             this.el.dom.value=this.value;     
92.                  
93.         }else if(this.el.dom.value.length > 0){     
94.             this.value=this.el.dom.value;     
95.         }     
96.     },getValue:function()     
97.     {     
98.          if(this.rendered){     
99.             return this.el.dom.value;     
100.         }     
101.         return false;     
102.          /**//*   
103.           if(this.value !== undefined){   
104.             return this.value;   
105.         }else if(this.el.dom.value.length > 0){   
106.             return this.el.dom.value;   
107.         }   
108.         */    
109.     },setValue:function(v)     
110.     {     
111.         var oldValue=this.getValue();     
112.         if(oldValue==v)return ;     
113.         for(var j=0;j<this.els.length;j++)     
114.             {     
115.                 if(this.els[j].value==v)     
116.                 {     
117.                     this.els[j].setValue(true);     
118.                 }     
119.                 else    
120.                 {     
121.                     this.els[j].setValue(false);     
122.                 }     
123.             }     
124.      this.el.dom.value=v;     
125.      this.fireEvent('change', this.group, oldValue, v);            
126.     },     
127.     setDefaultValue:function()     
128.     {     
129.         for(var j=0;j<this.els.length;j++)     
130.             {     
131.                 if(this.els[j].value==this.defaultValue)     
132.                 {     
133.                     this.els[j].setValue(true);     
134.                     return;     
135.                 }     
136.                 else    
137.                 {     
138.                     if(j<this.els.length-1)     
139.                     {     
140.                         this.els[j].setValue(false);     
141.                   }     
142.                    else    
143.                     {     
144.                         this.els[j].setValue(true);     
145.                     }     
146.                          
147.                 }     
148.             }     
149.      },     
150.     // private     
151.     onDestroy : function(){     
152.         if (this.radios && this.radios instanceof Array) {     
153.           var cnt = this.radios.length;     
154.             for(var x=1;x<cnt;x++){     
155.                 this.els[x].destroy();     
156.             }     
157.         }     
158.         if(this.wrap){     
159.             this.wrap.remove();     
160.         }     
161.         Ext.ux.RadioGroup.superclass.onDestroy.call(this);     
162.    },     
163.         
164.     // private     
165.          
166.     onChange : function(oldValue, newValue){     
167.         this.fireEvent('change', this, oldValue, newValue);     
168.     }     
169.     
170. });     
171. Ext.reg('ux-radiogroup', Ext.ux.RadioGroup);    

Ext.namespace('Ext.ux'); Ext.ux.Radio =function(config) { Ext.ux.Radio.superclass.constructor.call(this,config); this.group = config.group; this.value=config.value; }; Ext.extend(Ext.ux.Radio ,Ext.form.Radio, { onRender : function(ct, position){ Ext.ux.Radio.superclass.onRender.call(this, ct, position); if(this.el && this.el.dom){ this.el.dom.value = this.value;//make the value for radio is the value user has given! } this.on('check',this.onCheck); }, clearInvalid : function(){ this.group.clearInvalid(); },markInvalid : function(msg){ this.group.markInvalid(msg); }, onClick : function(){ if(this.el.dom.checked !=this.checked){ this.group.setValue(this.value); } }, setValue : function(v){ this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on'); if(this.el && this.el.dom){ this.el.dom.checked = this.checked; this.el.dom.defaultChecked = this.checked; this.group.el.dom.value=this.value; } },onCheck:function(radio,checked) { Ext.log('radiao change!'); if(checked) { var oldValue=this.group.getValue(); this.group.onChange(this.group,oldValue,this.getValue()); } //this.fireEvent('change', this.group, oldValue, newValue); }, getValue : function(){ if(this.rendered){ return this.el.dom.value; } return false; } }); Ext.ux.RadioGroup=function(config) { this.radios=config.radios; this.defaultValue=config.defaultValue||false; Ext.ux.RadioGroup.superclass.constructor.call(this,config); }; Ext.extend(Ext.ux.RadioGroup,Ext.form.Field, { defaultAutoCreate:{tag:'input', type:'hidden'}, onRender : function(ct, position){ Ext.ux.RadioGroup.superclass.onRender.call(this, ct, position); this.wrap = this.el.wrap({cls: "x-form-check-wrap"}); if (this.radios && this.radios instanceof Array) { this.els=new Array(); this.els[0]=this.el; for(var i=0;i<this.radios.length;i++){ var r=this.radios[i]; this.els[i]=new Ext.ux.Radio(Ext.apply({}, { renderTo:this.wrap, hideLabel:true, group:this },r)); if (this.horizontal) { this.els[i].el.up('div.x-form-check-wrap').applyStyles({ 'display': 'inline', 'padding-left': '5px' }); } } if(this.hidden)this.hide(); } this.setDefaultValue(); },initValue : function(){ //Ext.log('initValue for'+this.name); if(this.value !== undefined){ this.el.dom.value=this.value; }else if(this.el.dom.value.length > 0){ this.value=this.el.dom.value; } },getValue:function() { if(this.rendered){ return this.el.dom.value; } return false; /**//* if(this.value !== undefined){ return this.value; }else if(this.el.dom.value.length > 0){ return this.el.dom.value; } */ },setValue:function(v) { var oldValue=this.getValue(); if(oldValue==v)return ; for(var j=0;j<this.els.length;j++) { if(this.els[j].value==v) { this.els[j].setValue(true); } else { this.els[j].setValue(false); } } this.el.dom.value=v; this.fireEvent('change', this.group, oldValue, v); }, setDefaultValue:function() { for(var j=0;j<this.els.length;j++) { if(this.els[j].value==this.defaultValue) { this.els[j].setValue(true); return; } else { if(j<this.els.length-1) { this.els[j].setValue(false); } else { this.els[j].setValue(true); } } } }, // private onDestroy : function(){ if (this.radios && this.radios instanceof Array) { var cnt = this.radios.length; for(var x=1;x<cnt;x++){ this.els[x].destroy(); } } if(this.wrap){ this.wrap.remove(); } Ext.ux.RadioGroup.superclass.onDestroy.call(this); }, // private onChange : function(oldValue, newValue){ this.fireEvent('change', this, oldValue, newValue); } }); Ext.reg('ux-radiogroup', Ext.ux.RadioGroup);

最后附上使用的例子：

view plaincopy to clipboardprint?

1. new Ext.ux.RadioGroup({     
2.                 fieldLabel : "调度模式",     
3.                 allowBlank : true,     
4.                 horizontal:true,     
5.                 maxLength : 200,     
6.                 defaultValue:'true',     
7.                 name : "activity.ishavecare",     
8.                 radios:[{boxLabel:'即时调度',value:'jishi'},{boxLabel:'预约调度',value:'yuyue'}],     
9.                 listeners:{"change":function(radioGroup,oldValue,newValue){     
10.                     alert("chage "+" oldValue "+oldValue+" newValue "+newValue);     
11.                     }}     
12.                 })    

new Ext.ux.RadioGroup({ fieldLabel : "调度模式", allowBlank : true, horizontal:true, maxLength : 200, defaultValue:'true', name : "activity.ishavecare", radios:[{boxLabel:'即时调度',value:'jishi'},{boxLabel:'预约调度',value:'yuyue'}], listeners:{"change":function(radioGroup,oldValue,newValue){ alert("chage "+" oldValue "+oldValue+" newValue "+newValue); }} })

还有另外一个例子：

view plaincopy to clipboardprint?

1. var boolField= new Ext.ux.RadioGroup({     
2.         fieldLabel : "actionNow",     
3.         allowBlank : true,     
4.         horizontal:true,     
5.         maxLength : 200,     
6.         defaultValue:'true',     
7.         name : "activity.ishavecare",     
8.         radios:[{boxLabel:'Yes',value:'true'},{boxLabel:'No',value:'false'}]     
9.              
10.              
11.     });     
12. boolField.on('change',function(radioGroup,oldValue,newValue)     
13. {     
14.     
15. Ext.log('value changes from '+oldValue+"  to "+newValue);     
16. }     
17. )