正文
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代码,所以有空就做点这方面的简化工作,能节省不少后期工作量已经重复设置属性出错的几率。
本文转自over140 51CTO博客,原文链接:http://blog.51cto.com/over140/586551,如需转载请自行联系原作者