Ext.form.CheckboxGroup和Ext.form.RadioGroup RadioGroup的获取值和赋值

最新推荐文章于 2023-06-17 22:44:27 发布

周厉

最新推荐文章于 2023-06-17 22:44:27 发布

阅读量1.2k

点赞数

分类专栏： ext框架

ext框架专栏收录该内容

57 篇文章 0 订阅

订阅专栏

Ext.form.CheckboxGroup和Ext.form.RadioGroup

Ext.form.RadioGroup默认值：

    { boxLabel: 'Item 2', name: 'rb', inputValue: '2', checked: true},

  
  
   
    
   
   Extjs中RadioGroup的获取值和赋值
  
  
  
  
   
   
    
    标签： extjsfunction
   
   
   
   
    
    2010-12-09 15:19 
    
    11033人阅读 
    
    评论(1) 
    
    收藏 
    
    举报
   
   
  
  
  
  
   
   
    
     
    
    分类：
   
   
   
   
    
    ExtJS（2） 
   
   
  
  
  
  
   
   版权声明：本文为博主原创文章，未经博主允许不得转载。
  
  
  
  
   
   
   
   
    
    
     
     
      
      [javascript] 
      
      view plain
      
       copy
      
      
      
      
     
     
    
    
    
    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;     
            }     
        }     
    }     
});    
  
//由于使用loadRecord（）方法无法为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);//把否选中  
            }  
        }]]  
    });  
   
   
   
   
   
   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);//把否选中
        }

1、Ext.form.CheckboxGroup主要配置

配置项	类型	说明
allowBlank	Boolean	设置是否必须选中至少一项，true表示可以不选，false表示不能为空，至少选中一项，默认为true。
blankText	String	当allowBlank设置为false，并且没有选中任何复选框时的提示错误消息
columns	String/Number/Array	设置列数量，有效值包括： “auto”：自动平分字段容器的宽度 Number：指定列数 Array指定列宽的数组，可以使用整数和浮点数。
items	Array	复选框或复选框配置对象的数组

2、Ext.form.CheckboxGroup示例

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>CheckboxGroup和RadioGroup示例</title>
    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            new Ext.form.Panel({
                title: "CheckboxGroup和RadioGroup示例",
                bodyStyle: "padding:5",
                frame: true,
                height: 150,
                width: 300,
                renderTo: Ext.getBody(),
                defaults: {
                    labelSeparator: "：",
                    labelWidth: 80,
                    width: 250,
                    labelAlign: "left"
                },
                items: [{
                    xtype: "radiogroup",
                    fieldLabel: "性别",
                    columns: 2,
                    items: [
                        { boxLabel: "男", name: "sex", inputValue: "male" },
                        { boxLabel: "女", name: "sex", inputValue: "female" }
                    ]
                }, {
                    xtype: "checkboxgroup",
                    fieldLabel: "爱好",
                    columns: 3,
                    items: [
                        { boxLabel: "游泳", name: "swim" },
                        { boxLabel: "散步", name: "walk" },
                        { boxLabel: "阅读", name: "read" },
                        { boxLabel: "游戏", name: "game" },
                        { boxLabel: "电影", name: "movie" }
                    ]
                }]
            });
        });
    </script>
</head>
<body>
</body>
</html>