Ext.js5（验证）（CheckboxGroup 类的布局能力）(37)

view

/**
 * This example demonstrates the flexible layout capabilities of the CheckboxGroup class.
 * 这个例子演示了CheckboxGroup 类灵活的布局能力
 * It also shows that you can validate checkboxes as a group - try submitting the form
 * before changing any values to see this.
 * 验证
 */
Ext.define('KitchenSink.view.form.CheckboxGroupForm', {
    extend: 'Ext.form.Panel',
    xtype: 'form-checkboxgroup',
    controller: 'form-checkboxgroup',


    title: 'Checkbox Group Example',
    frame: true,
    width: 650,
    bodyPadding: 10,

    fieldDefaults: {
        labelWidth: 120
    },

    items: [{
        /*====================================================================
         * Individual checkbox/radio examples
         * Using checkbox/radio groups will generally be more convenient and flexible than
         * using individual checkbox and radio controls, but this shows that 
         * you can certainly do so if you only have a single control at a time.
         * 使用checkbox/radio groups比使用individual（单一的） checkbox and radio
         * 更加方便和灵活。下面这个Individual checkbox/radio examples也说明，如果你仅仅
         * 只需要单一的控制，你也可以使用individual checkbox and radio

         *====================================================================*/


        xtype: 'container',
        layout: 'hbox',
        margin: '0 0 10',
        items: [{
            xtype: 'fieldset',
            flex: 1,
            title: 'Individual Checkboxes',
            defaultType: 'checkbox', // each item will be a checkbox
            layout: 'anchor',
            defaults: {
                anchor: '100%',
                //hideEmptyLabel 当设置为true，如果fieldLabel为空，则标签元素（fieldLabel和labelSeparator）会被自动隐藏。 如果设置为false，会导致空标签元素被渲染，预留空格； 这对于想要在同一个表单里有一个没有标签的域于其他有标签的域对齐很有用。如果想无条件隐藏标签，即使一个非空的fieldLabel配置，那么设置hideLabel配置为true。
                hideEmptyLabel: false
            },
            items: [{
                xtype: 'textfield',
                name: 'txt-test1',
                fieldLabel: 'Alignment Test'
            }, {
                fieldLabel: 'Favorite Animals',
                boxLabel: 'Dog',
                name: 'fav-animal-dog',
                inputValue: 'dog'//
            }, {
                boxLabel: 'Cat',
                name: 'fav-animal-cat',
                inputValue: 'cat'
            }, {
                checked: true,//设置为被选中的状态
                boxLabel: 'Monkey',
                name: 'fav-animal-monkey',
                inputValue: 'monkey'
            }]
        }, {
            xtype: 'component',
            width: 10
        }, {
            xtype: 'fieldset',
            flex: 1,
            title: 'Individual Radios',
            defaultType: 'radio', // each item will be a radio button
            layout: 'anchor',
            defaults: {
                anchor: '100%',
                hideEmptyLabel: false
            },
            items: [{
                xtype: 'textfield',
                name: 'txt-test2',
                fieldLabel: 'Alignment Test'
            }, {
                checked: true,
                fieldLabel: 'Favorite Color',
                boxLabel: 'Red',
                name: 'fav-color',
                inputValue: 'red'
            }, {
                boxLabel: 'Blue',
                name: 'fav-color',
                inputValue: 'blue'
            }, {
                boxLabel: 'Green',
                name: 'fav-color',
                inputValue: 'green'
            }]
        }]
    }, {
        /*====================================================================
         * CheckGroup example
         *====================================================================*/
        xtype: 'fieldset',
        title: 'Checkbox Groups (initially collapsed)',
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
        collapsible: true,
        collapsed: true,
        items: [{
            xtype: 'textfield',
            name: 'txt-test3',
            fieldLabel: 'Alignment Test'
        },{
            // Use the default, automatic layout to distribute the controls evenly
            // across a single row
            //使用默认的，自动化布局均匀的将控制（checkbox）分配到每一行
            xtype: 'checkboxgroup',
            fieldLabel: 'Auto Layout',
            cls: 'x-check-group-alt',
            items: [
                {boxLabel: 'Item 1', name: 'cb-auto-1'},
                {boxLabel: 'Item 2', name: 'cb-auto-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-auto-3'},
                {boxLabel: 'Item 4', name: 'cb-auto-4'},
                {boxLabel: 'Item 5', name: 'cb-auto-5'}
            ]
        },{
            xtype: 'checkboxgroup',
            fieldLabel: 'Single Column',
            // Put all controls in a single column with width 100%
            //将所有控制（checkbox）放在单独的一列
            columns: 1,
            items: [
                {boxLabel: 'Item 1', name: 'cb-col-1'},
                {boxLabel: 'Item 2', name: 'cb-col-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-col-3'}
            ]
        },{
            xtype: 'checkboxgroup',
            fieldLabel: 'Multi-Column (horizontal)',
            cls: 'x-check-group-alt',
            // Distribute controls across 3 even columns, filling each row
            // from left to right before starting the next row
            将（checkbox）放置为3列，填满每一列（从左到右的方式）才开始下一列
            columns: 3,
            items: [
                {boxLabel: 'Item 1', name: 'cb-horiz-1'},
                {boxLabel: 'Item 2', name: 'cb-horiz-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-horiz-3'},
                {boxLabel: 'Item 4', name: 'cb-horiz-4'},
                {boxLabel: 'Item 5', name: 'cb-horiz-5'}
            ]
        },{
            xtype: 'checkboxgroup',
            fieldLabel: 'Multi-Column (vertical)',
            // Distribute controls across 3 even columns, filling each column
            // from top to bottom before starting the next column
            //将（checkbox）放置为3列，填满每一列(从上到下的方式)才开始下一列
            columns: 3,
            vertical: true,
            items: [
                {boxLabel: 'Item 1', name: 'cb-vert-1'},
                {boxLabel: 'Item 2', name: 'cb-vert-2', checked: true},
                {boxLabel: 'Item 3', name: 'cb-vert-3'},
                {boxLabel: 'Item 4', name: 'cb-vert-4'},
                {boxLabel: 'Item 5', name: 'cb-vert-5'}
            ]
        },{
            xtype: 'checkboxgroup',
            fieldLabel: 'Multi-Column<br />(custom widths)',
            cls: 'x-check-group-alt',
            // Specify exact column widths (could also include float values for %)
            //指定列宽（也可以用浮点数设置）
            columns: [100, 100],
            vertical: true,
            items: [
                {boxLabel: 'Item 1', name: 'cb-custwidth', inputValue: 1},//inputValue 这个值被当作是一般的input元素的值，当form提交时它被作为一个参数提交。
                {boxLabel: 'Item 2', name: 'cb-custwidth', inputValue: 2, checked: true},
                {boxLabel: 'Item 3', name: 'cb-custwidth', inputValue: 3},
                {boxLabel: 'Item 4', name: 'cb-custwidth', inputValue: 4},
                {boxLabel: 'Item 5', name: 'cb-custwidth', inputValue: 5}
            ]
        },{
            xtype: 'checkboxgroup',
            fieldLabel: 'Custom Layout<br />(w/ validation)',
            //验证条件
            allowBlank: false,
            msgTarget: 'side',
            //autoFitErrors 是否调整组件的body区域，给'side'或'under'的错误消息留出空间。
            autoFitErrors: false,
            anchor: '-18',
            // You can change the 'layout' to anything you want, and include any nested
            // container structure, for complete layout control. In this example we only
            // want one item in the middle column, which would not be possible using the
            // default 'checkboxgroup' layout's columns config.  We also want to put
            // headings at the top of each column.
            //理论上，布局，嵌套结构什么的都可以自定义。在下面的例子我们想要的实现的效果是：在中间的那列只想要一个元素。这个元素不会用'checkboxgroup'布局配置。我们还想让headings在每一列的上方。
            layout: 'column',
            defaultType: 'container',
            items: [{
                columnWidth: .25,
                items: [
                    {xtype: 'component', html: 'Heading 1', cls:'x-form-check-group-label'},
                    {xtype: 'checkboxfield', boxLabel: 'Item 1', name: 'cb-cust-1'},
                    {xtype: 'checkboxfield', boxLabel: 'Item 2', name: 'cb-cust-2'}
                ]
            },{
                columnWidth: .4,
                items: [
                    {xtype: 'component', html: 'Heading 2', cls:'x-form-check-group-label'},
                    {xtype: 'checkboxfield', boxLabel: 'A long item just for fun', name: 'cb-cust-3'}
                ]
            },{
                columnWidth: .25,
                items: [
                    {xtype: 'component', html: 'Heading 3', cls:'x-form-check-group-label'},
                    {xtype: 'checkboxfield', boxLabel: 'Item 4', name: 'cb-cust-4'},
                    {xtype: 'checkboxfield', boxLabel: 'Item 5', name: 'cb-cust-5'}
                ]
            }]
        }]
    }],

    buttons: [{
        text: 'Save',
        handler: 'onSaveFormClick'
    }, {
        text: 'Reset',
        handler: 'onResetFormClick'
    }]
});

viewcontroller

Ext.define('KitchenSink.view.form.CheckboxGroupController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.form-checkboxgroup',
    //验证
    onSaveFormClick: function() {
        var form = this.getView().getForm();

        if (form.isValid()) {
            Ext.Msg.alert({
                title: 'Submitted Values',
                //弹出选中的信息
                message: 'The following will be sent to the server: <br />' +
                         form.getValues(true).replace(/&/g,', '),
                height: 200
            });
        }
        else {
            Ext.Msg.alert(
                'Form incomplete',
                'You must fill out the form with valid values, <br/ >' +
                'including the (initially collapsed) Checkbox group.'
            );
        }
    },

    onResetFormClick: function() {
        this.getView().getForm().reset();
    }
});