`
kidiaoer
  • 浏览: 824827 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

Checkbox与RadioGroup的使用方法

EXT配置管理PHP 
阅读更多
Checkbox与RadioGroup的使用方法

没错！是Checkbox与RadioGroup而不是Checkbox与Radio。

Ex提供的Checkbox与Radio，在控件同名成组时，例如将性别的男与女两个Radio控件都使用sex作为名称时，findField方法只能获取第一个控件，setValue也只能设置第一个控件，这样就造成了如果要使用Form的Load方式加载编辑数据或者用SetValues加载编辑数据时出现问题。要解决这个问题，第一种方法是定义名称不同的控件；第二种方法是控件名称相同，在加载编辑数据时手动处理控件状态。第一种方法对Checkbox问题不是太大，因为各Checkbox之间没关联。但是Radio就不同，彼此间是关联，例如性别选择男了，那女须为未选择状态，这个在名称相同时，会自动处理，不需要写多余代码，但是名称不同，则要通过check事件去修改其它控件的状态。第二种方法存在问题是，Checkbox同名，要获取第一个控件后的控件比较困难，要处理也困难。基于以上原因，笔者习惯的做法是Checkbox使用不同名的定义方法，Radio使用Ext官方论坛用户vtswingkid开发的Ext.ux.RadioGroup扩展代替。

Ext.ux.RadioGroup在的下载地址是：http://extjs.com/forum/showthread.php?t=23250。

Checkbox在定义时必须使用ColumnLayout，第一列的控件有标签，后续列的控件则隐藏标签。不然，会很难实现习惯的Checkbox对齐方式。Ext.ux.RadioGroup在扩展的同时已经处理好对齐问题了，所以不必象Checkbox那样使用ColumnLayout。

Checkbox的主要配置参数请看表1。

表1 Checkbox主要配置参数

配置参数


描述

boxLabel


在复选框后显示的文本

checked


值为true表示初始状态为已选，false则表示未选，默认值是false

disabled


值为true表示初始状态为禁止使用，false则表示可以使用，默认值是false

fieldLabel


控件标签

hideLabel


值为true表示隐藏标签，false则显示，默认值是true

labelSeparator


标签分隔符

inputValue


Checkbox的实际提交值。如果不设置该值，无论value设置为什么值，Checkbox提交值都为“on”，

msgTarget


错误信息显示位置，默认值是qtip，详细信息请看Form校验与错误信息显示一节

name


控件名称

readOnly


值为true则表示初始状态为只读，false则表示可写，默认值为false，不推荐使用该值设置只读，因为设置后不允许再修改，如果要设置只读属性，请参考本书第7章编辑控件只读插件一节

tabIndex


键盘tab键移动时的索引




Ext.ux.RadioGroup的主要配置参数请看表2。


表2 Ext.ux.RadioGroup主要配置参数

配置参数


描述

fieldLabel


控件标签

name


控件名称

horizontal


值为true则表示Radio选项水平排列，false则表示垂直排列，默认值为false

radios


Radio选项组成的数组

radios子项配置：value


Radio选项正式值

radios子项配置：checked


值为true则表示已选，false则表示未选，默认值是false

radios子项配置：boxLabel


在单选框后显示的文本


Checkbox与RadioGroup的使用方法请看例子：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html debug='true'>

<head>

  <title>Checkbox与RadioGroup例子</title>

         <meta http-equiv="content-type" content="text/html; charset=utf-8">

         <link rel="stylesheet" type="text/css" href="../lib/ext/resources/css/ext-all.css" />

        <script type="text/javascript" src="../lib/ext/ext-base.js"></script>

  <script type="text/javascript" src="../lib/ext/ext-all.js"></script>

  <script type="text/javascript" src="../lib/ext/radiogroup.js"></script>

  <script type="text/javascript" src="../lib/ext/locale/ext-lang-zh_CN.js"></script>

  <style>

        </style>

</head>

<body>

         <h1 style="margin:20px 0px 0px 20px;">第4章 Checkbox与RadioGroup例子</h1>

         <br />

         <div style="padding-left:20px;">

<p>

    <div id="form1"></div><br>

    <div >执行操作：</div>

    <textarea id='op' rows="10" style="width:800px;"></textarea>

</p>

<br />

</div>

<script>

         var app={};

       

         Ext.onReady(function(){

                   var frm = new Ext.form.FormPanel({ 

                            applyTo: "form1",

                            autoHeight: true,

                            width: 860,

                            height:300,

                            frame: true,

                            labelWidth:80,

                            labelSeparator:"：",

                            title:'Checkbox与RadioGroup例子',

                            items:[

                          {layout:'column',border:false,items:[

                                    {columnWidth:.5,layout: 'form',border:false,items: [

                                                        {xtype:'fieldset',title:'控件名不同',height:110,items:[

                                                      {layout:'column',border:false,items:[

                                                                {columnWidth:.5,layout: 'form',border:false,items: [

                                                                         {xtype:'checkbox',fieldLabel:'角色',boxLabel:'系统管理员',name:'role1',anchor:'100%'}

                                                                           ]},

                                                                {columnWidth:.25,layout: 'form',border:false,items: [

                                                                         {xtype:'checkbox',hideLabel:true,boxLabel:'经理',name:'role2',anchor:'100%'}

                                                                           ]},

                                                                {columnWidth:.25,layout: 'form',border:false,items: [

                                                                         {xtype:'checkbox',hideLabel:true,boxLabel:'普通用户',name:'role3',anchor:'100%'}

                                                                           ]}

                                                                 ]},

                                                      {layout:'column',border:false,items:[

                                                                {columnWidth:.3,layout: 'form',border:false,items: [

                                                                                    {xtype:'button',text:'选择“系统管理员”',scope:this,

                                                                                             handler:function(){

                                                                                                       frm.form.findField('role1').setValue('true');

                                                                                                       Ext.get('op').dom.value+="执行：frm.form.findField('role1').setValue('true')\n";

                                                                                             }

                                                                                    }

                                                                           ]},

                                                                {columnWidth:.4,layout: 'form',border:false,items: [                                                          

                                                                                    {xtype:'button',text:'不选择“系统管理员”',scope:this,

                                                                                             handler:function(){

                                                                                                       frm.form.findField('role1').setValue('false');

                                                                                                       Ext.get('op').dom.value+="执行：frm.form.findField('role1').setValue('false')\n";

                                                                                             }

                                                                                    }

                                                                           ]},

                                                                {columnWidth:.3,layout: 'form',border:false,items: [

                                                                                    {xtype:'button',text:'选择“经理”',scope:this,

                                                                                             handler:function(){

                                                                                                       frm.form.findField('role2').setValue('true');

                                                                                                       Ext.get('op').dom.value+="执行：frm.form.findField('role2').setValue('true')\n";

                                                                                             }

                                                                                    }

                                                                           ]}

                                                                 ]},

                                                      {layout:'column',border:false,items:[

                                                                {columnWidth:.3,layout: 'form',border:false,items: [

                                                                                    {xtype:'button',text:'不选择“经理”',scope:this,

                                                                                             handler:function(){

                                                                                                       frm.form.findField('role2').setValue('false');

                                                                                                       Ext.get('op').dom.value+="执行：frm.form.findField('role2').setValue('false')\n";

                                                                                             }

                                                                                    }

                                                                           ]},

                                                                {columnWidth:.4,layout: 'form',border:false,items: [                                                          

                                                                                    {xtype:'button',text:'选择“普通用户”',scope:this,

                                                                                             handler:function(){

                                                                                                       frm.form.findField('role3').setValue('true');

                                                                                                       Ext.get('op').dom.value+="执行：frm.form.findField('role3').setValue('true')\n";

                                                                                             }

                                                                                    }

                                                                           ]},

                                                                {columnWidth:.3,layout: 'form',border:false,items: [

                                                                                    {xtype:'button',text:'不选择“普通用户”',scope:this,

                                                                                             handler:function(){

                                                                                                       frm.form.findField('role3').setValue('false');

                                                                                                       Ext.get('op').dom.value+="执行：frm.form.findField('role3').setValue('false')\n";

                                                                                             }

                                                                                    }

                                                                           ]}

                                                                 ]}

                                                        ]}

                                               ]},

                                    {columnWidth:.5,bodyStyle:'padding: 0 0 0 5px',layout:'form',border:false,items: [

                                                        {xtype:'fieldset',title:'控件名相同',height:110,items:[

                                                      {layout:'column',border:false,items:[

                                                                {columnWidth:.5,layout: 'form',border:false,items: [

                                                                         {xtype:'checkbox',fieldLabel:'角色2',boxLabel:'系统管理员',name:'role',anchor:'90%',inputValue:"系统管理员"}

                                                                           ]},

                                                                {columnWidth:.25,layout: 'form',border:false,items: [

                                                                         {xtype:'checkbox',hideLabel:true,boxLabel:'经理',name:'role',anchor:'90%',inputValue:"经理"}

                                                                           ]},

                                                                {columnWidth:.25,layout: 'form',border:false,items: [

                                                                         {xtype:'checkbox',hideLabel:true,boxLabel:'普通用户',name:'role',anchor:'90%',inputValue:"普通用户"}

                                                                           ]}

                                                                 ]},

                                                      {layout:'column',border:false,items:[

                                                                {columnWidth:.3,layout: 'form',border:false,items: [

                                                                                    {xtype:'button',text:'findField("role")',scope:this,

                                                                                             handler:function(){

                                                                                                       var obj=frm.form.findField('role');

                                                                                                       Ext.get('op').dom.value+="执行：var obj=frm.form.findField('role')\n"+

                                                                                                                'obj.inputValue：'+obj.inputValue+'\n';

                                                                                             }

                                                                                    }

                                                                           ]},

                                                                {columnWidth:.4,layout: 'form',border:false,items: [                                                          

                                                                                    {xtype:'button',text:"setValue('true')",scope:this,

                                                                                             handler:function(){

                                                                                                       frm.form.findField('role').setValue('true');

                                                                                                       Ext.get('op').dom.value+="执行：frm.form.findField('role').setValue('true')\n";

                                                                                             }

                                                                                    }

                                                                           ]},

                                                                {columnWidth:.3,layout: 'form',border:false,items: [

                                                                                    {xtype:'button',text:"setValue('false')",scope:this,

                                                                                             handler:function(){

                                                                                                       frm.form.findField('role').setValue('false');

                                                                                                       Ext.get('op').dom.value+="执行：frm.form.findField('role').setValue('false')\n";

                                                                                             }

                                                                                    }

                                                                           ]}

                                                                 ]}

                                                        ]}

                                               ]}

                                     ]},   

                                     {xtype:'fieldset',title:'RadioGroup',height:60,items:[

                                   {layout:'column',border:false,items:[

                                             {columnWidth:.3,layout: 'form',border:false,items: [

                                                                 {xtype:'ux-radiogroup',

                                                                           fieldLabel:'性别',

                                                                           name:'sex',

                                                                           horizontal:true,

                                                                           radios:[{

                                                                                    value:'男',

                                                                                    checked:true,

                                                                                    boxLabel:'男'

                                                                           }, {

                                                                                    value:'女',

                                                                                    boxLabel:'女'

                                                                           }]

                                                                 }

                                                        ]},

                                             {columnWidth:.3,layout: 'form',border:false,items: [

                                                                 {xtype:'button',text:"setValue('男')",scope:this,

                                                                           handler:function(){

                                                                                    frm.form.findField('sex').setValue('男');

                                                                                    Ext.get('op').dom.value+="执行：frm.form.findField('sex').setValue('男')\n";

                                                                          }

                                                                 }

                                                        ]},

                                             {columnWidth:.3,layout: 'form',border:false,items: [

                                                                 {xtype:'button',text:"setValue('女')",scope:this,

                                                                           handler:function(){

                                                                                    frm.form.findField('sex').setValue('女');

                                                                                    Ext.get('op').dom.value+="执行：frm.form.findField('sex').setValue('女')\n";

                                                                           }

                                                                 }

                                                        ]}

                                               ]}

                                     ]},

                          {layout:'column',border:false,items:[

                                    {columnWidth:.5,layout: 'form',border:false,items: [

                                                        {xtype:'button',text:"form.setValues({role1:true,role:true,sex:'男'})",scope:this,

                                                                 handler:function(){

                                                                           frm.form.setValues({role1:true,role:true,sex:'男'});

                                                                           Ext.get('op').dom.value+="执行：frm.form.setValues({role1:true,role:true,sex:'男'})\n";

                                                                 }

                                                        }

                                               ]},

                                    {columnWidth:.5,layout: 'form',border:false,items: [

                                                        {xtype:'button',text:"form.getValues()",scope:this,

                                                                 handler:function(){

                                                                           Ext.get('op').dom.value+="执行：frm.form.getValues()\n"

                                                                           +'结果：'+Ext.encode(frm.form.getValues())+'\n';

                                                                 }

                                                        }

                                               ]}

                                     ]}

                            ],

             buttons: [{

                 text: '保存',

                 scope:this,

                 handler:function(){

                    if(frm.form.isValid()){

                             frm.form.doAction('submit',{

                                                                           url:'form.ashx',

                                                                           method:'post',

                                                                           params:'',

                                                                           success:function(form,action){

                                                                                    Ext.Msg.alert('操作',action.result.data);

                                                                           },

                                                                           failure:function(){

                                                                                    //Ext.Msg.alert('操作','保存失败！');

                                                                           }

                             });

                    }

                 }          

             },{

                 text: '取消',

                 scope:this,

                 handler:function(){frm.form.reset();}

             }]

                   });



       

         })

</script>

</body>

</html>
分享到：
| ext 控件属性
评论
发表评论

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

相关推荐

    Radiogroup、Checkbox、Toast

    Checkbox，另一方面，是多选按钮，与RadioGroup中的RadioButton不同，Checkbox允许用户同时选择多个选项。在Android应用中，Checkbox通常用于设置或取消某种功能或设置。Checkbox的事件监听器包括...

    Android控件系列之RadioButton与RadioGroup使用方法

    本文将深入探讨这两个控件的使用方法、它们之间的关系以及如何监听选中状态的变化。 首先，RadioButton是一种单选按钮，用户只能在一组RadioButton中选择其中一个。它的特性是，一旦被选中，就不能通过用户交互变为...

    界面控件之选项组件(RadioGroup和CheckBox)--代码

    与RadioGroup不同，用户可以在CheckBox中选择任意数量的选项。每个CheckBox都有一个独立的选中状态，可以单独控制。 1. **添加CheckBox**：同样，我们先在XML布局文件中创建CheckBox。 ```xml &lt;CheckBox android:...

    在Android中使用Radio和Checkbox的源码例子.rar

    RadioGroup与RadioButton RadioGroup是Android中管理多个RadioButton的容器，它允许用户在一组选项中选择一个。RadioGroup会监听其内部所有RadioButton的点击事件，并确保每次只有一个RadioButton被选中。在布局文件...

    RadioButton、CheckBox和Toast的使用

    本文将深入探讨这三个组件的使用方法、功能特性以及如何在实际项目中灵活应用。 首先，我们来看RadioButton。RadioButton属于Android的单选按钮，它用于提供一组互斥的选择选项。用户只能在这些选项中选择一个。...

    checkBox的单选多选

    本教程将详细介绍如何在Android中实现CheckBox的单选和多选，并简要介绍迭代器的使用方法。 首先，让我们来理解一下“单选”和“多选”的概念。单选指的是用户只能从一组选项中选择一个，而多选则允许用户选择多个...

    Android checkbox 实现单选

    在这种情况下，我们可以借助RadioGroup和RadioButton来实现，而不是直接使用Checkbox。下面将详细介绍如何在Android中实现Checkbox的单选功能。 首先，我们需要理解Checkbox和RadioButton的区别。Checkbox是多选框...

    Android：CheckBox的初步学习

    同时，还可以探索CheckBox与其他组件的联动，如RadioGroup，实现单选效果。 总的来说，CheckBox是Android UI设计中不可或缺的一部分，熟练掌握它的使用能帮助开发者构建更加丰富的交互体验。通过实践和不断学习，你...

    RadioGroup简单应用

    为了实现更复杂的逻辑，如分组选择，可以考虑使用多个RadioGroup，或者使用Spinner、CheckBox等其他组件。对于需要多选的场景，建议使用CheckBox或者Switch控件。 通过以上内容，你应该对RadioGroup有了基本的了解...

    GridView And CheckBox

    在getView()方法中，我们需要创建并设置CheckBox，以及与数据项关联。同时，这里也是处理CheckBox状态的地方，根据选择列表来设置CheckBox的初始选中状态。 5. 回调通知： 当CheckBox的状态改变时，可能需要通知父...

    自定义ListView加CheckBox

    - 在`getView()`方法中，我们将为每个ListView项设置一个CheckBox，并关联其状态。 2. **CheckBox的单选** - 对于单选，我们可以使用RadioGroup和RadioButton来实现。每个ListView项是一个RadioButton，它们都...

    好看的单选框（radiogroup）和多选框（checkbox）.zip

    好看的单选框（radiogroup）和多选框（checkbox），效果可以在我的博客里看到：https://blog.csdn.net/wy313622821/article/details/108202189，希望大家能喜欢

    Android CheckBox

    `OnCheckedChangeListener`是专为CheckBox设计的接口，提供`onCheckedChanged`方法，当CheckBox状态改变时会被调用。 ```java myCheckbox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener...

    android mars视频代码 Activity Activity_07源码 RadioGroup RadioButton CheckBox

    RadioGroup RadioButton CheckBox www.mars-droid.com/Android开发视频教程 代码 源码 mars老师讲课 android 视频源码 Activity_07（在此特别感谢mars的无私奉献，此代码为跟随视频边学边做的）

    ListView带CheckBox 你懂的

    - 如果需要实现单选模式，可以使用RadioGroup和RadioButton替代CheckBox，或者在CheckBox上添加监听器限制只能有一个选中。多选模式下，CheckBox可以自由选择，无需额外限制。 6. **事件监听**： - 可以通过设置...

    RadioBox_and_CheckBox

    三、RadioGroup与CheckBoxGroup 1. **RadioGroup** 对于`RadioBox`，通常需要配合`RadioGroup`使用，`RadioGroup`可以管理一组`RadioButton`，确保同一时间只有一个被选中。在XML布局中： ```xml &lt;RadioGroup ...

    C#_winform_动态生成RadioButton和CheckBox并获取选中值

    C#的winform是没有webform的RadioButtonList和CheckBoxList这两个控件的。要实现从数据库取出数据后动态生成N个RadioButton和CheckBox并获取选中项目的值，请看本例。思路很简单，有问题请指出，相互学习共同进步，...

    android RadioButton和CheckBox组件的使用方法

    本次实验中主要是学习如何使用RadioGroup，CheckBox，RadioButton和Toast这几个控件，android UI开发中也会经常用到他们

    Listview checkbox 单选,多选,删除,单击选择，显示选择结果

    在Android开发中，ListView是一种常用的UI组件，用于展示大量数据列表。...在这个特定的场景中，我们关注的是如何将...对于初学者来说，分析和学习这样的源码能够加深对ListView与CheckBox结合使用以及事件处理的理解。

Magicbox
Global site tag (gtag.js) - Google Analytics