Java Blog for Alex Wan

Let life be beautiful like summer flowers and death like autumn leaves.

统计

留言簿(10)

BlogJava

Blogs

DIV+CSS

JQuery相关

友情链接

常去的地方

数据供应

阅读排行榜

评论排行榜

[ExtJs]基于EXT2的RadioGroup

背景:
Ext2标准实现的Radio不够用!一方面是布局不太方便,另一方面是事件比较难用.所以我实现了一种以onChange事件为中心的RadioGroup.
实现代码:

  1Ext.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.

posted on 2008-06-27 09:40 Alexwan 阅读(5713) 评论(3)  编辑  收藏 所属分类: JavaScript

评论

# re: [ExtJs]基于EXT2的RadioGroup 2008-06-27 12:25 aGuang(cRipple.Li(at)gmail.com)

3q,博主!
这里有个问题,我用firebug查看使用这个控件的表单post数据时发现会附带一个参数值,
如下:
ext-comp-1029(这应该是ext生成的一个id)=true(或者是false,具体根据设置而定).不知道这个有什么用?还是只是个hidden表单数据?能否去掉呢?  回复  更多评论   

# re: [ExtJs]基于EXT2的RadioGroup 2008-06-27 13:18 万洪泉


呵呵,当选中一个radio时就会发送当前选中的值,这个可以不去理会它.如果要去掉的话,可以在提交之前把group的所有成员都disable了,这样就不会发送数据.但是这样做会带来一个问题,就是disable之后什么时候再去enable的问题.目前我还没找到关于去掉这个隐藏的值的行之有效的方法..   回复  更多评论   

# re: [ExtJs]基于EXT2的RadioGroup 2008-06-28 11:15 长江三峡

学习  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航: