Ext4.2学习之复选框与单选按钮

最新推荐文章于 2023-06-17 23:11:22 发布

lang20150928

最新推荐文章于 2023-06-17 23:11:22 发布

阅读量422

点赞数

分类专栏： extjs 文章标签： js html checkbox

本文链接：https://blog.csdn.net/m0_37607945/article/details/115024396

版权

extjs 专栏收录该内容

17 篇文章 2 订阅

订阅专栏

要在表单里加入复选框，就需要用到Ext.form.CheckBox。
在这里插入图片描述
注意需要使用inputValue来指定这三个CheckBox的值。另外还可以通过checked: true指定是否在一开始就处于选定状态。结果如下

至于单选按钮是继承复选框的，只需要一个改动即可，就是将items中的name设置为一致就可以了。
在这里插入图片描述
因为名称是一样的，所以inputValue就显得尤为重要了。否则我们无法判断用户选择了哪个单选按钮。

除了Checkbox所拥有的功能之外，Radio还有一个自己独特的函数getGroupValue，可以获取到某个分组中被选中的Radio的值。
在这里插入图片描述

对应的源码如下

<!DOCTYPE html>
<html>
<head>
    <title>Hello World</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="ext-4/resources/css/ext-all.css"/>
    <script type="text/javascript" src="ext-4/ext-all.js"></script>
    <script type="text/javascript" src="ext-4/locale/ext-lang-zh_CN.js"></script>
    <script>
        Ext.onReady(function () {

            var form = new Ext.form.FormPanel({
                labelAlign: 'right',
                title: 'form',
                labelWidth: 50,
                buttonAlign: 'center',
                frame:true,
                url: 'form2.jsp',
                width: 280,

                items: [{
                    // 使用fieldset将三个复选框放在一起
                    xtype: 'fieldset',
                    title: '多选',
                    autoHeight:true,
                    defaultType: 'checkbox',
                    hideLabels: true,
                    items: [
                        // boxLable是checkBox和Radio两个控件独有的，支持在控件右侧显示标签，与labelField的区别只是位置不同
                        {boxLabel: '多选一', inputValue: '1', checked: true},
                        {boxLabel: '多选二', inputValue: '2'},
                        {boxLabel: '多选三', inputValue: '3'}
                    ]
                }],
                buttons: [{
                    text: '提交',
                    handler: function() {
                        form.getForm().submit();
                    }
                }]
            });
            form.render("form");

            var form2 = new Ext.form.FormPanel({
                labelAlign: 'right',
                title: 'form',
                labelWidth: 50,
                buttonAlign: 'center',
                frame:true,
                url: 'form2.jsp',
                width: 280,

                items: [{
                    xtype: 'fieldset',
                    title: '单选',
                    autoHeight:true,
                    defaultType: 'radio',
                    hideLabels: true,
                    items: [
                        {boxLabel: '单选一', name: 'radio', inputValue: '1', checked: true},
                        {boxLabel: '单选二', name: 'radio', inputValue: '2'},
                        {boxLabel: '单选三', name: 'radio', inputValue: '3'}
                    ]
                }],
                buttons: [{
                    text: '提交',
                    handler: function() {
                        form2.getForm().submit();
                    }
                }, {
                    text: 'getGroupValue',
                    handler: function() {
                        Ext.Msg.alert('信息', form2.getForm().findField('radio').getGroupValue());
                    }
                }]
            });
            form2.render("form2");
        });
    </script>
</head>
<body>
<div id="form" style="margin:100px;"></div>
<div id="form2" style="margin:100px;"></div>
</body>
</html>