您的位置:首页 > Web前端 > extjs > 正文

extjs radiogroup赋值和取值

更多 时间:2013-12-8 类别:Web前端 浏览量:2065

extjs radiogroup赋值和取值

extjs radiogroup赋值和取值

在Extjs项目中通常要用到radiogroup 组件实现单选效果,由于ExtJs中RadioGroup中没有实现getValue和setValue方法,这就在使用过程中给radiogroup 组件赋值和取值带来麻烦,下面通过一个封装的方法介绍如何实现radiogroup赋值和取值

  •  
  • JScript 代码   复制
  • 
    Ext.override(Ext.form.RadioGroup, {   
        getValue: function(){   
            var v;   
            if (this.rendered) {   
                this.items.each(function(item){   
                    if (!item.getValue())    
                        return true;   
                    v = item.getRawValue();   
                    return false;   
                });   
            }   
            else {   
                for (var k in this.items) {   
                    if (this.items[k].checked) {   
                        v = this.items[k].inputValue;   
                        break;   
                    }   
                }   
            }   
            return v;   
        },   
        setValue: function(v){   
            if (this.rendered)    
                this.items.each(function(item){   
                    item.setValue(item.getRawValue() == v);   
                });   
            else {   
                for (var k in this.items) {   
                    this.items[k].checked = this.items[k].inputValue == v;   
                }   
            }   
        }   
    });  
    
    //以上代码重载radiogroup组件,封装 getvalue方法 和 setvalue方法,以便radiogroup组件的取值和赋值
    
    
    var record = Ext.data.Record.create([
        {name: "rg",mapping:"rg"},
    ]);
    
    var myNewRecord = new record ({rg:"2"});
    
     
    
     
    
    var radiogroup= new Ext.form.RadioGroup({
                    fieldLabel : "radioGroup",
                    items : [{
                                boxLabel : '',
                                inputValue : "1",
                                name : "rg",
                                checked : true
                            }, {
                                boxLabel : '',
                                name : "rg",
                                inputValue : "2"
                            }]
                });
    
    var _formpanel = new Ext.form.FormPanel({
            labelAlign : "right",
            labelWidth : 150,
            loadMask : true,
      renderTo:Ext.getBody(),
            frame : true,
            defaults : {
                width : 150
            },
            items : [radiogroup],
            buttonAlign : "center",
            buttons : [{
                text : "获取radioGroup值",
                handler : function() {
                    alert(_formpanel.getForm().getValues()["rg"] );
    
                alert(_formpanel.getForm().getValues().rg);
                 alert(radiogroup.getValue());//三种方式获取所选值
                }
            },{
                text : "Set radioGroup值2",
                handler : function() {
                   radiogroup.setValue(2);//把否选中
                }
            },{
                text : "Set radioGroup值1",
                handler : function() {
                   _formpanel.findByType("radiogroup")[0].setValue(1);//把是选中
                }
            },{
                text : "loadRecord赋值方式",
                handler : function() {
                   _formpanel.form.loadRecord(myNewRecord);//把否选中
                }
            }]]
        });
    
    
    		
  •