Ext.form.CheckboxGroup和Ext.form.RadioGroup

1、Ext.form.CheckboxGroup主要配置

配置项 类型 说明
allowBlank Boolean 设置是否必须选中至少一项,true表示可以不选,false表示不能为空,至少选中一项,默认为true。
blankText String 当allowBlank设置为false,并且没有选中任何复选框时的提示错误消息
columns String/Number/Array

设置列数量,

有效值包括:

“auto”:自动平分字段容器的宽度

Number:指定列数

Array指定列宽的数组,可以使用整数和浮点数。

items Array 复选框或复选框配置对象的数组

2、Ext.form.CheckboxGroup示例

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>CheckboxGroup和RadioGroup示例</title>

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

    <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>

    <script type="text/javascript">

        Ext.onReady(function () {

            new Ext.form.Panel({

                title: "CheckboxGroup和RadioGroup示例",

                bodyStyle: "padding:5",

                frame: true,

                height: 150,

                width: 300,

                renderTo: Ext.getBody(),

                defaults: {

                    labelSeparator: "",

                    labelWidth: 80,

                    width: 250,

                    labelAlign: "left"

                },

                items: [{

                    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>

</body>

</html>

效果图:

Ext.form.CheckboxGroup和Ext.form.RadioGroup

你可能感兴趣的:(checkbox)