Ext.ux.RadioGroup的使用（让各radio使用不同的名称） 示例
关键字: ext.ux.radiogroup的使用（让各radio使用不同的名称） 示例
Ext.ux.RadioGroup的使用（让各radio使用不同的名称） 示例
我们在使用Ext.form.RadioGroup的时候需要将各radio组件的name设置成同一个，这样用户在点选时才能保证一次只有一个 radio被选中，但在项目开发中往往需要去取某一个指定的radio做一些操作，如果使用Ext.form.RadioGroup给开发带来了很多的不方便。为避免该类问题，我们在创建RadioGroup组件的时候我们往往使用Ext官方论坛中的Ext.ux.RadioGroup扩展组件来代替。
创建调用的HTML：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title></title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="./Ext.ux.RadioGroup.js"></script>
<style type="text/css">
</style>
<script>
Ext.onReady(function() {
new Ext.Panel({
renderTo : document.body,
layout : 'form',
items : [{
xtype : 'ux-radiogroup',
fieldLabel : 'ux-radiogroup',
name : 'radiobox_a',
horizontal : true,
radios : [{
value : 1,
boxLabel : 'box 1',
name:'b1',
id:'b1',
listeners : {
'check' : function(r, c) {
alert(r.boxLabel + ": " + (c ? "checked" : "unchecked"));
}
}
}, {
value : 2,
name:'b2',
id:'b2',
boxLabel : 'box 2',
checked : true
}, {
value : 3,
name:'b3',
id:'b2',
boxLabel : 'box 3'
}]
},new Ext.form.RadioGroup({
width : 220,
// hideLabel:true,
fieldLabel : 'radiogroup',
style:'margin-left:100px;',
columns : 1,
vertical :true,
items:[
{boxLabel:'box 1',inputValue:'value1',name:'RadioGroup'},
{boxLabel:'box 2',inputValue:'value2',name:'RadioGroup'},
{boxLabel:'box 3',inputValue:'value3',name:'RadioGroup',
listeners:{
check:function(el,checked){
alert(checked);
}
}
}]
})]
});
});
</script>
</head>
<body>
</body>
</html>
Ext.ux.RadioGroup.js文件源码：
/**
* @author Robert Williams (vtswingkid)
* @version 1.0.4
*/
Ext.namespace('Ext.ux');
Ext.ux.RadioGroup = Ext.extend(Ext.form.Field, {
/**
* @cfg {String} focusClass The CSS class to use when the checkbox receives focus (defaults to undefined)
*/
focusClass : undefined,
/**
* @cfg {String} fieldClass The default CSS class for the checkbox (defaults to "x-form-field")
*/
fieldClass: "x-form-field",
/**
* @cfg {Boolean} checked True if the the checkbox should render already checked (defaults to false)
*/
checked: false,
/**
* @cfg {String/Object} autoCreate A DomHelper element spec, or true for a default element spec (defaults to
* {tag: "input", type: "radio", autocomplete: "off"})
*/
defaultAutoCreate : { tag: "input", type: 'radio', autocomplete: "off"},
/**
* @cfg {String} boxLabel The text that appears beside the checkbox
*/
getId:function(){
//if multiple radios are defined use this information
if(this.radios && this.radios instanceof Array){
if(this.radios.length){
var r=this.radios[0];
this.value=r.value;
this.boxLabel=r.boxLabel;
this.checked=r.checked || false;
this.readOnly=r.readOnly || false;
this.disabled=r.disabled || false;
this.tabIndex=r.tabIndex;
this.cls=r.cls;
this.listeners=r.listeners;
this.style=r.style;
this.bodyStyle=r.bodyStyle;
this.hideParent=r.hideParent;
this.hidden=r.hidden;
}
}
Ext.ux.RadioGroup.superclass.getId.call(this);
},
// private
initComponent : function(){
Ext.ux.RadioGroup.superclass.initComponent.call(this);
this.addEvents(
/**
* @event change
* Fires when the radio value changes.
* @param {Ext.vx.RadioGroup} this This radio
* @param {Boolean} checked The new checked value
*/
'check'
);
},
// private
onResize : function(){
Ext.ux.RadioGroup.superclass.onResize.apply(this, arguments);
if(!this.boxLabel){
this.el.alignTo(this.wrap, 'c-c');
}
},
// private
initEvents : function(){
Ext.ux.RadioGroup.superclass.initEvents.call(this);
this.el.on("click", this.onClick, this);
this.el.on("change", this.onClick, this);
},
// private
getResizeEl : function(){
return this.wrap;
},
// private
getPositionEl : function(){
return this.wrap;
},
/**
* Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
* @method
*/
markInvalid : Ext.emptyFn,
/**
* Overridden and disabled. The editor element does not support standard valid/invalid marking. @hide
* @method
*/
clearInvalid : Ext.emptyFn,
// private
onRender : function(ct, position){
Ext.ux.RadioGroup.superclass.onRender.call(this, ct, position);
this.wrap = this.el.wrap({cls: "x-form-check-wrap"});
if(this.boxLabel){
this.wrap.createChild({tag: 'label', htmlFor: this.el.id, cls: 'x-form-cb-label', html: this.boxLabel});
}
if(!this.isInGroup){
this.wrap.applyStyles({'padding-top':'2px'});
}
if(this.checked){
this.setChecked(true);
}else{
this.checked = this.el.dom.checked;
}
if (this.radios && this.radios instanceof Array) {
this.els=new Array();
this.els[0]=this.el;
for(var i=1;i<this.radios.length;i++){
var r=this.radios[i];
this.els[i]=new Ext.ux.RadioGroup({
renderTo:this.wrap,
hideLabel:true,
boxLabel:r.boxLabel,
checked:r.checked || false,
value:r.value,
name:this.name || this.id,
readOnly:r.readOnly || false,
disabled:r.disabled || false,
tabIndex:r.tabIndex,
cls:r.cls,
listeners:r.listeners,
style:r.style,
bodyStyle:r.bodyStyle,
hideParent:r.hideParent,
hidden:r.hidden,
isInGroup:true
});
if (this.horizontal) {
this.els[i].el.up('div.x-form-check-wrap').applyStyles({
'display': 'inline',
'padding-left': '5px'
});
}
}
if(this.hidden)this.hide();
}
},
initValue : function(){
if(this.value !== undefined){
this.el.dom.value=this.value;
}else if(this.el.dom.value.length > 0){
this.value=this.el.dom.value;
}
},
// private
onDestroy : function(){
if (this.radios && this.radios instanceof Array) {
var cnt = this.radios.length;
for(var x=1;x<cnt;x++){
this.els[x].destroy();
}
}
if(this.wrap){
this.wrap.remove();
}
Ext.ux.RadioGroup.superclass.onDestroy.call(this);
},
setChecked:function(v){
if(this.el && this.el.dom){
var fire = false;
if(v != this.checked)fire=true;
this.checked=v;
this.el.dom.checked = this.checked;
this.el.dom.defaultChecked = this.checked;
if(fire)this.fireEvent("check", this, this.checked);
}
},
/**
* Returns the value of the checked radio.
* @return {Mixed} value
*/
getValue : function(){
if(!this.rendered) {
return this.value;
}
var p=this.el.up('form');//restrict to the form if it is in a form
if(!p)p=Ext.getBody();
var c=p.child('input[name='+escape(this.el.dom.name)+']:checked', true);
return (c)?c.value:this.value;
},
// private
onClick : function(){
if(this.el.dom.checked != this.checked){
var p = this.el.up('form');
if (!p)
p = Ext.getBody();
var els = p.select('input[name=' + escape(this.el.dom.name) + ']');
els.each(function(el){
if (el.dom.id == this.id) {
this.setChecked(true);
}
else {
var e = Ext.getCmp(el.dom.id);
e.setChecked.apply(e, [false]);
}
}, this);
}
},
/**
* Checks the radio box with the matching value
* @param {Mixed} v
*/
setValue : function(v){
if(!this.rendered) {
this.value=v;
return;
}
var p=this.el.up('form');//restrict to the form if it is in a form
if(!p)p=Ext.getBody();
var target = p.child('input[name=' + escape(this.el.dom.name) + '][value=' + v + ']', true);
if (target) target.checked = true;
},
clear: function(){
if (!this.rendered) return;
var p = this.el.up('form');//restrict to the form if it is in a form
if (!p) p = Ext.getBody();
var c = p.child('input[name=' + escape(this.el.dom.name) + ']:checked', true);
if (c) c.checked = false;
},
disable: function(){
if (!this.rendered) return;
var p = this.el.up('form');//restrict to the form if it is in a form
if (!p) p = Ext.getBody();
var els = p.select('input[name=' + escape(this.el.dom.name) + ']');
els.each(function(el){
if (el.dom.id == this.id) {
Ext.ux.RadioGroup.superclass.disable.call(this);
}
else {
var e = Ext.getCmp(el.dom.id);
Ext.ux.RadioGroup.superclass.disable.call(e);
}
}, this);
},
enable: function(){
if (!this.rendered) return;
var p = this.el.up('form');//restrict to the form if it is in a form
if (!p) p = Ext.getBody();
var els = p.select('input[name=' + escape(this.el.dom.name) + ']');
els.each(function(el){
if (el.dom.id == this.id) {
Ext.ux.RadioGroup.superclass.enable.call(this);
}
else {
var e = Ext.getCmp(el.dom.id);
Ext.ux.RadioGroup.superclass.enable.call(e);
}
}, this);
},
hide: function(){
if (!this.rendered) return;
this.wrap.hide();
this.wrap.parent().parent().hide();
},
show: function(){
if (!this.rendered) return;
this.wrap.show();
this.wrap.parent().parent().show();
}
});
Ext.reg('ux-radiogroup', Ext.ux.RadioGroup);
Checkbox与RadioGroup的使用方法:http://blog.csdn.net/tianxiaode/archive/2008/07/27/2719027.aspx