前言
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代码，所以有空就做点这方面的简化工作，能节省不少后期工作量已经重复设置属性出错的几率。
ExtJs的RadioGroup在3.0中正式的放在了Ext.form命名空间下面，也是常用的控件之一，本文将实现简化该元件并动态指定子项。
版本
ext-3.0.0
正文
1. 实现代码
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. 使用代码
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代码，所以有空就做点这方面的简化工作，能节省不少后期工作量已经重复设置属性出错的几率。
