`
yl.fighter
  • 浏览: 256196 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

在网上找的好用的radiogroup

阅读更多
1. 使用代码:
new Ext.ux.RadioGroup({     
		fieldLabel : "性别",     
		allowBlank : true,     
		horizontal:true,     
		maxLength : 200,     
		defaultValue: 'N',
		name : "sex",     
		radios:[{boxLabel:'男',value:'Y'},{boxLabel:'女',value:'N'}]
	}) 


2. 创建方法: (以下代码追加到ext的核心代码中)
Ext.namespace('Ext.ux');     
      
Ext.ux.Radio =function(config)     
{     
    Ext.ux.Radio.superclass.constructor.call(this,config);     
    this.group = config.group;     
    this.value=config.value;     
};     
Ext.extend(Ext.ux.Radio ,Ext.form.Radio, {     
     onRender : function(ct, position){     
         Ext.ux.Radio.superclass.onRender.call(this, ct, position);     
          if(this.el && this.el.dom){     
            this.el.dom.value = this.value;//make the value for radio is the value user has given!     
        }     
         this.on('check',this.onCheck);     
     },     
   clearInvalid : function(){     
        this.group.clearInvalid();     
     },markInvalid : function(msg){     
          this.group.markInvalid(msg);     
    },     
    onClick : function(){     
             
        if(this.el.dom.checked !=this.checked){     
             this.group.setValue(this.value);     
        }     
            
    },     
     setValue : function(v){     
        this.checked = (v === true || v === 'true' || v == '1' || String(v).toLowerCase() == 'on');     
        if(this.el && this.el.dom){     
            this.el.dom.checked = this.checked;     
            this.el.dom.defaultChecked = this.checked;     
            this.group.el.dom.value=this.value;     
        }     
    },onCheck:function(radio,checked)     
    {     
             
        Ext.log('radiao change!');     
        if(checked)     
        {     
        var oldValue=this.group.getValue();     
        this.group.onChange(this.group,oldValue,this.getValue());     
        }     
             
        //this.fireEvent('change', this.group, oldValue, newValue);     
    },     
     getValue : function(){     
        if(this.rendered){     
            return this.el.dom.value;     
        }     
         return false;     
    }     
});     
    
Ext.ux.RadioGroup=function(config)     
{     
    this.radios=config.radios;     
    this.defaultValue=config.defaultValue||false;     
    Ext.ux.RadioGroup.superclass.constructor.call(this,config);         
};     
Ext.extend(Ext.ux.RadioGroup,Ext.form.Field,  {     
    defaultAutoCreate:{tag:'input', type:'hidden'},     
     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.radios && this.radios instanceof Array) {     
            this.els=new Array();     
            this.els[0]=this.el;     
            for(var i=0;i<this.radios.length;i++){     
                var r=this.radios[i];     
                this.els[i]=new Ext.ux.Radio(Ext.apply({}, {     
                    renderTo:this.wrap,     
                    hideLabel:true,     
                    group:this    
                },r));     
                if (this.horizontal) {     
                    this.els[i].el.up('div.x-form-check-wrap').applyStyles({     
                        'display': 'inline',     
                        'padding-left': '5px'    
                    });     
                }     
            }     
            if(this.hidden)this.hide();     
         }     
        this.setDefaultValue();     
    },initValue : function(){     
        //Ext.log('initValue for'+this.name);     
        if(this.value !== undefined){     
            this.el.dom.value=this.value;     
                 
        }else if(this.el.dom.value.length > 0){     
            this.value=this.el.dom.value;     
        }     
    },getValue:function()     
    {     
         if(this.rendered){     
            return this.el.dom.value;     
        }     
        return false;     
         /**//*   
          if(this.value !== undefined){   
            return this.value;   
        }else if(this.el.dom.value.length > 0){   
            return this.el.dom.value;   
        }   
        */    
    },setValue:function(v)     
    {     
        var oldValue=this.getValue();     
        if(oldValue==v)return ;     
        for(var j=0;j<this.els.length;j++)     
            {     
                if(this.els[j].value==v)     
                {     
                    this.els[j].setValue(true);     
                }     
                else    
                {     
                    this.els[j].setValue(false);     
                }     
            }     
     this.el.dom.value=v;     
     this.fireEvent('change', this.group, oldValue, v);            
    },     
    setDefaultValue:function()     
    {     
        for(var j=0;j<this.els.length;j++)     
            {     
                if(this.els[j].value==this.defaultValue)     
                {     
                    this.els[j].setValue(true);     
                    return;     
                }     
                else    
                {     
                    if(j<this.els.length-1)     
                    {     
                        this.els[j].setValue(false);     
                  }     
                   else    
                    {     
                        this.els[j].setValue(true);     
                    }     
                         
                }     
            }     
     },     
    // 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);     
   },     
        
    // private     
         
    onChange : function(oldValue, newValue){     
        this.fireEvent('change', this, oldValue, newValue);     
    }     
    
});     

Ext.reg('ux-radiogroup', Ext.ux.RadioGroup);  

分享到:
评论

相关推荐

    换行的RadioGroup可以使用

    在Android开发中,`RadioGroup` 是一个非常常见的布局组件,用于管理一组单选按钮(RadioButton)。通常,`RadioGroup` 内的所有RadioButton是互斥的,用户只能选择其中一个。然而,标准的`RadioGroup`默认是水平...

    RadioGroup

    本示例将详细介绍RadioGroup和RadioButton的基本使用方法、特性以及如何在实际项目中进行集成。 RadioGroup是一个布局容器,它可以包含一个或多个RadioButton。RadioGroup的主要作用是管理其内部的RadioButton,...

    RadioGroup自定义选项卡样式

    在Android开发中,RadioGroup是用于管理一组RadioButton的布局,它允许用户在多个选项中选择一个。本教程将深入探讨如何自定义RadioGroup以创建独特的选项卡样式,从而提升应用程序的用户体验。 首先,RadioGroup的...

    Android 自定义RadioGroup布局,修改源码自定义控件

    3. **递归查找子`RadioButton`s**:由于`RadioGroup`可能包含嵌套的布局,我们需要遍历所有的子视图,找出所有的`RadioButton`s。可以使用递归的方式来处理这种情况,确保所有子层级的`RadioButton`s都被找到并正确...

    dxRibbonTab中的RadioGroup

    在IT行业中,`dxRibbonTab` 和 `RadioGroup` 是两种常见的组件,它们在创建用户界面时扮演着重要角色。`dxRibbonTab` 是一个用于构建类似Microsoft Office风格的Ribbon界面的控件,而`RadioGroup` 则是用于在一组...

    使用RadioGroup与RadioButton

    在Android开发中,`RadioGroup`和`RadioButton`是两种非常重要的选择控件,它们用于实现单选功能,即在多个选项中只能选择一个。`RadioGroup`是一个容器控件,用于管理一组`RadioButton`,确保同一时间只有一个`...

    Dev express radiogroup 动态添加item.zip

    在.NET开发领域,DevExpress是一款广泛使用的控件库,它提供了丰富的UI组件,包括RadioGroup控件。本示例主要探讨如何在Dev Express的RadioGroup中动态添加和管理项目(items)。由于RadioGroup控件并未直接提供设置...

    可多行的RadioGroup

    在Android开发中,`RadioGroup`控件通常用于创建单选按钮组,用户只能选择其中的一个选项。然而,标准的`RadioGroup`默认是水平排列的,这在选项过多时可能会导致一行显示不下,影响用户体验。针对这种情况,我们...

    RadioGroup和RadioButton实现FragmentTabHost导航效果

    在Android开发中,`RadioGroup`和`RadioButton`是一对常用的组件,它们通常用于实现单选功能,即在多个选项中只能选择一个。在本例中,我们将它们应用于`FragmentTabHost`的导航效果,创建一个可以切换不同`Fragment...

    Ext RadioGroup实例

    在Web应用程序中,RadioGroup常用于让用户从多个互斥选项中选择一个。在本文中,我们将深入探讨Ext RadioGroup的使用方法,包括其配置选项、事件处理以及如何提取选定的值和文本。 首先,我们来看RadioGroup的基本...

    用RadioGroup实现fragment的界面切换

    在Android开发中,RadioGroup和Fragment是两个非常重要的组件,它们可以用来构建用户交互丰富的界面。RadioGroup通常用于实现单选按钮(RadioButton)的选择逻辑,而Fragment则用于创建可动态添加、移除或替换的模块...

    RadioGroup多列显示

    RadioGroup在Android开发中是一个非常常见的控件,它主要用于实现单选按钮(RadioButton)的组管理,让用户在多个选项中选择一个。默认情况下,RadioGroup会将所有的RadioButton水平或垂直排列成一列。然而,有时候...

    RadioGroup 和 ViewPager 联动

    RadioGroup 和 ViewPager 联动

    用RadioGroup做的底部切换栏

    RadioGroup在Android开发中是一个非常实用的控件,它用于管理一组RadioButton,形成单选按钮组,用户只能在其中选择一个选项。在这个“用RadioGroup做的底部切换栏”实例中,我们将探讨如何利用RadioGroup来实现类似...

    ViewPager + RadioGroup

    在Android开发中,`ViewPager`和`RadioGroup`是两种常用的UI组件,它们结合使用可以创建出具有丰富交互效果的主界面。`ViewPager`通常用于实现页面的左右滑动切换,而`RadioGroup`则是一个容器,用于管理一组单选...

    Android-支持多行多列等复杂布局的RadioGroup

    在Android开发中,文本输入和显示是用户界面设计的关键部分,RadioGroup作为单选按钮的容器,通常用于实现一组互斥选项的选择。然而,原生的RadioGroup仅支持单行排列,这在需要多行多列展示选项时显得功能有限。`...

    RadioGroup+ViewPager左右滑动

    在Android开发中,RadioGroup和ViewPager是两种常用的组件,它们分别用于实现单选按钮的管理以及页面间的滑动切换。本篇文章将详细讲解如何结合RadioGroup和ViewPager来创建一个可以左右滑动并且通过点击RadioGroup...

    重构RadioGroup

    在Android开发中,`RadioGroup`是一个常用的布局控件,用于管理一组`RadioButton`,它使得用户只能在其中选择一个选项。默认情况下,`RadioGroup`中的`RadioButton`是单行显示的,但如果需要实现多行多列的展示效果...

    fragment + radioGroup 顶部

    在Android开发中,`Fragment`和`RadioGroup`是两个重要的组件,它们分别用于构建可重用的界面模块和实现单选按钮组的功能。在这个场景中,`Fragment`被用作应用程序界面的一部分,通常用于创建可拆分的、动态的用户...

Global site tag (gtag.js) - Google Analytics