Ext.form.FieldSet字段集

本文轉載自查看原文 2012-04-22 23:49 7090

1、Ext.form.FieldSet主要配置項

配置項	類型	說明
checkboxName	String	指定字段集中用於展開或隱藏字段集面板的checkbox的名字，該屬性只有在checkboxToggle為true是生效
checkboxToggle	Boolean	設置是否顯示字段集的checkbox選擇框，通過設置該選擇框可以實現隱藏或顯示字段集功能。默認為false
collapsed	Boolean	設置為true則字段集默認為折疊狀態
collapsible	Boolean	設置字段集是否可以折疊
layout	String	字段集的布局方式，默認為“anchor”
title	String	字段集標題
labelWidth	Number	字段標簽的寬度，可以級聯到子容器

2、Ext.form.FieldSet示例

代碼：

<!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>Ext.form.field.FieldSet示例</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 () {
            Ext.create("Ext.form.Panel", {
                title: "Ext.form.field.FieldSet示例",
                frame: true,
                width: 220,
                renderTo: Ext.getBody(),
                bodyPadding: 5,
                items: [{
                    title: "商品信息",
                    xtype: "fieldset",
                    bodyPadding: 5,
                    collapsible: true,
                    defaults: {
                        labelSeparator: "：",
                        labelWidth: 65,
                        width: 175
                    },
                    defaultType: "textfield",
                    items: [{
                        fieldLabel: "商品名稱"
                    }, {
                        fieldLabel: "單價"
                    }]
                }, {
                    title: "商品描述",
                    xtype: "fieldset",
                    bodyPadding: 5,
                    checkboxToggle: true,
                    checkboxName: "Description",
                    defaultType: "textfield",
                    items: [{
                        fieldLabel: "簡介",
                        labelSeparator: "：",
                        labelWidth: 65,
                        width: 175,
                        xtype: "textarea"
                    }]
                }]
            });
        });
    </script>
</head>
<body>
</body>
</html>

效果圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Ext.form.field.Hidden隱藏字段 Ext.form.Label標簽字段 Ext.form.field.Trigger觸發字段 Ext.form.field.HtmlEditor編輯器字段 Ext.form.CheckboxGroup和Ext.form.RadioGroup Ext.form.Panel表單面板 Ext.form.field.ComboBox組合框 Ext 向Ext.form.ComboBox()中添加列表的分類 Ext.form.TextArea文本區 Ext.form.ComboBox常用屬性詳解