前言
  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]