ExtJs之Radio和CheckBox实例

最新推荐文章于 2020-05-15 08:14:56 发布

Vezn

最新推荐文章于 2020-05-15 08:14:56 发布

阅读量616

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Vezn_King/article/details/54100024

版权

前端专栏收录该内容

26 篇文章

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <link href="Ext4.2/resources/css/ext-all.css" rel="stylesheet" />
    <script src="Ext4.2/bootstrap.js"></script>
    <script>
        Ext.onReady(function () {
            new Ext.form.Panel({
                title: 'Ext.form.field.checkbox和Ext.form.field.Radio实例',
                bodyStyle: 'pading:5 5 5 5',// 表单边距
                frame: true,
                height: 350,
                width: 350,
                renderTo: 'form',
                defaults: { //统一设置表单字段默认属性
                    labelSeparator: ':',//分隔符
                    labelWidth: 80, //标签宽度
                    width: 200, //字段宽度
                    labelAlign:'left' //标签对齐方式

                },
                items: [{
                    xtype: 'radio',
                    name: 'sex',
                    fieldLabel: '性别',
                    boxLabel:'男'
                },
                {
                    xtype: 'radio',
                    name: 'sex',
                    fieldLabel: '性别',
                    boxLabel: '女'
                },
                {
                    xtype: 'checkboxfield',
                    name: 'swim',
                    fieldLabel: '爱好',
                    boxLabel: '游泳'
                },
                {
                    xtype: 'checkboxfield',
                    name: 'walk',
                    fieldLabel: '爱好',
                    boxLabel: '散步'
                },
                {
                    xtype: 'radiogroup',
                    fieldLabel: '性别',
                    columns: 2,
                    items: [
                        { boxLabel: '男', name: 'sex', inputValue: 'male' },
                        { boxLabel: '女', name: 'sex', inputValue: 'female' }
                    ]
                },
                {
                    xtype: 'checkboxgroup',
                    fieldLabel: '爱好',
                    columns: 3,
                    items: [
                        { boxLabel: '游泳', name: 'swim' },
                        { boxLabel: '散步', name: 'walk' },
                        { boxLabel: '阅读', name: 'read' },
                        { boxLabel: '游戏', name: 'game' },
                        { boxLabel: '电影', name: 'movie' }
                    ]
                }
                ]
            });
        })
    </script>
</head>
<body>
     <form id="form"></form>
</body>
</html>