Ext.ux.RadioGroup的使用（让各radio使用不同的名称）示例

crabdave

浏览: 1294830 次
性别:
来自: 北京

最近访客更多访客>>

hwj385327450

ergjss

寒号鸟whpj

linkoog

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJS

EXT CSS JavaScript UP C

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);

分享到：

ExtJS GroupHeaderPlugin的使用示例 | ExtJS中DatetimeMenu组件（包括时、分）的 ...

2009-02-16 16:13
浏览 9478
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论