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]