背景:
Ext2標準實現的Radio不夠用!一方面是布局不太方便,另一方面是事件比較難用.所以我實現了一種以onChange事件為中心的RadioGroup.
實現代碼:
1
Ext.namespace('Ext.ux');
2
3Ext.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
};
9Ext.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
56Ext.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};
62Ext.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});
171Ext.reg('ux-radiogroup', Ext.ux.RadioGroup);
例子:
var boolField= new Ext.ux.RadioGroup({
fieldLabel : "actionNow",
allowBlank : true,
horizontal:true,
maxLength : 200,
defaultValue:'true',
name : "activity.ishavecare",
radios:[{boxLabel:'Yes',value:'true'},{boxLabel:'No',value:'false'}]
});
boolField.on('change',function(radioGroup,oldValue,newValue)
{
Ext.log('value changes from '+oldValue+" to "+newValue);
}
)
Let life be beautiful like summer flowers and death like autumn leaves.