字段集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());
    }
    
});