基于EXT2的RadioGroup

http://blog.youkuaiyun.com/cxhzqhzq/archive/2009/04/16/4085524.aspx

 

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

首先上图：

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

view plain copy to clipboard print ?

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 plain copy to clipboard print ?

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 plain copy to clipboard print ?

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. )