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>
     // /
     // / 作 者：农民伯伯
     // / 邮 箱：over140@gmail.com
     // / 博 客：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]