ExtJs 动态RadioGroup的子项 [ Ext | RadioGroup | items ]

前言
　　ExtJs的RadioGroup在3.0中正式的放在了Ext.form命名空间下面，也是常用的控件之一，本文将实现简化该元件并动态指定子项。

版本
　　 ext-3.0.0

正文
　　 1.　　实现代码
 

//Ext.form.RadioGroup扩展
Ext.override(Ext.form.RadioGroup, {
    getItems:function(){
        return this.items;
    },
    setItems:function(data){
        this.items = data;
    }
});

function RadioGroup(_name,fLable,_items,_columns)
{
    /// <summary>
    ///
    /// 作 者：农民伯伯
    /// 邮 箱：[e-mail]
    /// 博 客：http://over140.cnblogs.com/
    /// 时 间：2009-7-23
    /// 描 述：Ext.form.RadioGroup封装
    /// 
    /// </summary>
    /// <param name="_name">name</param>
    /// <param name="fLable">fieldLabel</param>
    /// <param name="_items">items</param>
    /// <param name="_columns">columns</param>
    /// <returns>Ext.form.DateField</returns>
    var rg = new Ext.form.RadioGroup({
        name:_name,
        fieldLabel:fLable
    });
    
    if(_columns!=null)
        rg.columns = _columns;
    //动态绑定       
    var items = new Array();
    if(_items !=null){
        for(var i = 0 ;i<_items.length; i++)
        {
            items[i] = {};
            items[i].name = _name;
            items[i].boxLabel = _items[i][0];
            items[i].inputValue = _items[i][1];
            if(_items[i].length > 2)
                items[i].checked = _items[i][2];
        }
    }
    
    rg.setItems(items);
    
    return rg;
}

　　　　代码说明：
　　　　　　a).　　首先需要将RadioGroup的items属性通过拓展暴露出来。
　　　　　　b).　　需要注意动态绑定子项部分的代码。

　　 2.　　使用代码
 

            var pnlZB = new Ext.FormPanel({
                layout: 'form',
                frame:true,
                buttonAlign:'center',
                bodyStyle:'padding:20px',
                defaults:{
                    width:200,
                    allowBlank:false,
                    blankText:'该项不能为空!'
                },
                labelAlign:'right',
                labelWidth:150, 
                items:[
                    new RadioGroup('Gender','性别',[['男','男',true],['女','女']])
                ],
                buttons:[{
                    text:"提  交",
                    handler:function(){
                            alert(Ext.encode(pnlZB.form.getValues()));
                    }
                },{
                    text:"取  消",
                    handler:function(){
                        pnlZB.form.reset();
                    }
                }]
            });

　　代码说明：
　　　　a).　　如果要取选择的值，可以直接RadioGroup对象的实例.getValue().inputValue就能取到了。

补充
      1.      2009-7-28      如果出现js错误，比如setItems为空，请将Ext.override(Ext.form.RadioGroup...部分代码放入函数RadioGroup内，放在setItems前面就行;如果还报prototype错误，请将adapter\prototype\ext-prototype-adapter.js也加入工程，目录同样。


结束语
　　Ext很好，但动辄上百行JS代码，所以有空就做点这方面的简化工作，能节省不少后期工作量已经重复设置属性出错的几率。


 

本博相关的文章

1.　　ExtJs Grid 合计 [Ext | GridPanel | GridSummary]