Ext.form.FieldSet字段集

Ext.onReady(function ()
{
    Ext.create('Ext.form.Panel', {
        title: 'Ext.form.FieldSet示例',
        labelWidth: 40,//標籤寬度
        width: 220,
        frame: true,
        renderTo: Ext.getBody(),
        bodyPadding: 5,
        id:"form1",
        items: [{
            title: '產品信息',
            xtype: 'fieldset',
            collapsible: true,//顯示切換展開收縮狀態的切換按鈕
            bodyPadding: 5,
            defaults: {//統一設置表單字段默認屬性
                labelSeparator: '：',//分隔符
                labelWidth: 50,//標籤寬度
                width: 160//字段寬度
            },
            defaultType: 'textfield',//設置表單字段的默認類型
            items: [{
                fieldLabel: '產地',
                id:"Place"
            }, {
                fieldLabel: '售價',
                id:"Price"
            }]
        }, {
            title: '產品描述',
            xtype: 'fieldset',
            bodyPadding: 5,
            checkboxToggle: true,//顯示切換展開收縮狀態的複選框
            checkboxName: 'description',//提交數據時複選框對應的name
            labelSeparator: '：',//分隔符
            items: [{
                fieldLabel: '簡介',
                labelSeparator: '：',//分隔符
                labelWidth: 50,//標籤寬度
                width: 160,//字段寬度
                xtype: 'textarea',
                id:"desc"
            }]
        }],
        buttons: [
            {
                text: "保存", handler: function ()
                {
                    var place = Ext.getCmp("Place").getValue();
                    var price = Ext.getCmp("Price").getValue();
                    var desc = Ext.getCmp("desc").getValue();
                    Ext.MessageBox.alert("提示", "產地:" + place + ",售價:" + price + ",<br/>產品描述:" + desc);
                }
            },
            {
                text: "取消", handler: function ()
                {
                    Ext.getCmp("form1").reset();
                }
            }
        ]
    });
});