Ext CheckBoxGroup使用

1、效果圖展現

　　我這裏主要是爲了實現選擇週期時間。如周1、周2、週三等

2、界面界面代碼

　　下面就是我實現的代碼，包含了界面、數據處理、回填數據等。可能架構的方式，您的代碼和個人代碼有差別，可是大致就是這樣的。須要注意的地方，我已經使用顏色標出。

Ext.define('zxx.view.CreateOrUpdate', {
    extend: 'Ext.form.Panel',
    xtype: 'zxx-createorupdate',
    
    viewModel: {
        data: {
            semesterCourse: Eui.createModel('edu.semesterCourse', 'SemesterCourseEditDto')
        }
    },
    
    waitMsgTarget: true,
    border: false,
    layout: 'fit',
    fieldDefaults: {
        msgTarget: 'under',
        labelAlign: 'left',
        labelWidth: 100,
        labelStyle: 'font-weight:bold',
        flex: 1
    },
    defaultType: 'textfield',
    initComponent: function () {
        var me = this;
        var vm = this.getViewModel();
        this.items = [
            {
                flex: 1,
                checkboxToggle: true,
                defaultType: 'checkbox',
                layout: 'anchor',
                defaults: {
                    anchor: '100%',
                    hideEmptyLabel: false
                },
                xtype: 'checkboxgroup',
                items: [
                    {
                        xtype: 'fieldcontainer',
                        fieldLabel: '上課時間',
                        checkboxToggle: true,
                        defaultType: 'checkbox',
                        xtype: 'checkboxgroup',
                        id: 'courseDate',
                        name: 'courseDate',
                        labelWidth: 110,
                        layout: 'hbox',
                        items: [
                            {
                                boxLabel: '週一',
                                inputValue: '週一',
                                flex: 1,
                            },
                            {
                                boxLabel: '週二',
                                inputValue: '週二',
                                flex: 1,
                            },
                            {
                                boxLabel: '週三',
                                inputValue: '週三',
                                flex: 1,
                            },
                            {
                                boxLabel: '週四',
                                inputValue: '週四',
                                flex: 1,
                            },
                            {
                                boxLabel: '週五',
                                inputValue: '週五',
                                flex: 1,
                            },
                            {
                                boxLabel: '週六',
                                inputValue: '週六',
                                flex: 1,
                            },
                            {
                                boxLabel: '週日',
                                inputValue: '週日',
                                flex: 1,
                            }
                        ]
                    }
                ]
            }
        ];

        this.callParent(arguments);
    },

    buttons: [{
        text: l('Cancel'),
        handler: 'closeForm',
        iconCls: 'fa fa-window-close'
    },
    {
        text: l('Save'),
        handler: 'saveForm',
        iconCls: 'fa fa-save',
        disabled: true,
        formBind: true
    }],

    //編輯回填數據
    setViewData: function (data, isEdit) {
        var vm = this.getViewModel();

        //經過 courseDate 找到items
        var itmes = Ext.getCmp("courseDate").items;

        var semesterCourse = Eui.createModel('edu.semesterCourse', 'SemesterCourseEditDto', data.semesterCourse);
        vm.set('semesterCourse', semesterCourse);
        
        //判斷回填的數據是否有值
        if (semesterCourse.data.courseDate.length > 0) {
            //將值使用 split 函數分割
            var courseDates = semesterCourse.data.courseDate.split(',');
            for (var i = 0; i < courseDates.length; i++) {
                const element = courseDates[i];
                itmes.each(function (item) {
                    if (item.inputValue == element) {//若是組件中的inputValue對應的值 與字符串數組匹配，則設置勾選該組件
                        item.setValue(true);//設置勾選
                    }
                });
            }
        }
    },


    /**
     * 獲取提交到服務器的數據
     * @param {boolean} isEdit 是否編輯
     * @returns {object} 提交的數據
     */
    getSubmitData: function (isEdit, uploadData) {
        var vm = this.getViewModel();

        //找到 courseDate 下面的 items
        var itmes = Ext.getCmp("courseDate").items.items;

        //定義字符串
        var courseDate = "";

        //拼接字符串
        for (var i = 0; i < itmes.length; i++) {
            const element = itmes[i];
            if (element.value) {
                courseDate += element.inputValue + ","
            }
        }

        //將最後的一個逗號去掉
        if (courseDate.length > 0) {
            courseDate = courseDate.substring(0, courseDate.length - 1)
        }
        //賦值
        vm.data.semesterCourse.data.courseDate = courseDate;

        //最後一步就是提交數據到服務器
        var result = {
            semesterCourse: vm.data.semesterCourse.data,
        };
        return result;
    }
});

3、服務端的話

　　服務端的話，我就很少介紹。展現一點代碼就能夠。

        public async Task UpdateSemesterCourse(CreateOrUpdateSemesterCourseInput input)
        {
　　　　　　　//處理時間
            input.SemesterCourse.ScoreTemplate = string.IsNullOrEmpty(input.SemesterCourse.ScoreTemplate) ? "" : input.SemesterCourse.ScoreTemplate.Replace('，', ',');

            var semesterCourse = await _semesterCourseRepository.GetAsync(input.SemesterCourse.Id.Value);
            ObjectMapper.Map(input.SemesterCourse, semesterCourse);
            semesterCourse.Remain = semesterCourse.Limit - semesterCourse.Selected;
　　　　　　　//保存數據
            await _semesterCourseRepository.UpdateAsync(semesterCourse);
        }