博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ExtJs 动态RadioGroup的子项 [ Ext | RadioGroup | items ]
阅读量:6411 次
发布时间:2019-06-23

本文共 1987 字,大约阅读时间需要 6 分钟。

正文
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,如需转载请自行联系原作者

你可能感兴趣的文章
查看nginx配置文件路径的方法
查看>>
接口性能调优方案探索
查看>>
kali安装包或更新时提示“E: Sub-process /usr/bin/dpkg return”
查看>>
网站管理后台模板 Charisma
查看>>
EL:empty的用法
查看>>
Saltstack配置之 nodegroups
查看>>
Servlet和JSP优化经验总结
查看>>
squid使用rotate轮询(分割)日志
查看>>
VS2015安装EF Power Tools
查看>>
MySQL主从复制(笔记)
查看>>
keepalived高可用集群的简单配置
查看>>
Android Java Framework显示Toast(无Activity和Service)
查看>>
通过 SignalR 类库,实现 ASP.NET MVC 的实时通信
查看>>
NavigationController修改状态条颜色
查看>>
16大跨平台游戏引擎
查看>>
NPS如何配置基于mac地址的8021x认证
查看>>
XenServer架构之XAPI的调用流程
查看>>
redhat下搭建LAMP架构
查看>>
GitHub详细教程
查看>>
raid技术的读与想
查看>>