字段集Ext.form.FieldSet

<div id="fieldSetForm" class="w_320">
    <h2>字段集</h2>
</div>

Ext.onReady(function(){
    //Ext表單
    
    //Ext.form.Basic 基本表單組件二(拾取器字段Picker)
    //開發中使用表單面板組件Ext.form.Panel,它本質是一個標準的(面板)Ext.panel.Panel,它內置並自動建立了Ext.form.Basic基本表單組件
    //與原始表單主要3點不一樣(1.提交方式 2.表單驗證 3.表單組件)
    //1.提交方式(同步---異步)
    //2.表單驗證(須要手動驗證----配置便可使用)
    //3.表單組件(基本的組件------擴展的功能強大的組件)
    
    //Picker抽象類,具備惟一的觸發按鈕用於在字段下方動態彈出面板
    //拾取器組件如：(1.ComboBox,2.Date,3.Time)
    
    //初始化信息提示功能
    Ext.QuickTips.init();
    
    //字段集Ext.form.FieldSet
    //經常使用來將含義相近的字段組織在一塊兒，使結構清晰明瞭
    //字段集不會從表單中集成字段的配置信息，而須要在每一個字段集組件中分別指定
    var fieldSetForm = new Ext.form.Panel({
        title : '(fieldSet)字符集',
        width : 220,
        labelWidth : 40,
        renderTo : 'fieldSetForm',
        frame : true,
        bodyPadding : 5,
        items : [{
            title : '產品信息',
            xtype : 'fieldset',
            bodyPadding : 5,
            collapsible : true,//經過切換按鈕控制字段集的顯示隱藏
            defaultType : 'textfield',
            defaults : {
                width : 160,
                labelWidth : 50,
                labelSeparator : ': '
            },
            items : [{
                name : 'proAddress',
                fieldLabel : '產地'
            },{
                name : 'price',
                xtype : 'numberfield',
                fieldLabel : '售價',
                allowDecimals : true,//容許輸入小數
                decimalPrecision : 3,//小數四捨五入的位數
                nanText : '請輸入有效的價格'
            }]
        },{
            title : '產品描述',
            xtype : 'fieldset',
            bodyPadding : 5,
            labelSeparator : ': ',
            checkboxToggle : true,//經過複選框控制字段集的顯示隱藏
            checkboxName : 'desCheckbox',//提交數據時複選框對應的name
            items : [{
                width : 160,
                labelWidth : 50,
                labelSeparator : ': ',
                xtype : 'textarea',
                name : 'proDescription',
                fieldLabel : '簡介'
            }]
        }],
        
        buttons : [ {text : '肯定', handler : getMyFormJsonValue} ]
    });
    
    //回調函數
    function getMyFormJsonValue(){
        console.info(fieldSetForm.getForm().getValues());
    }
    
});