ExtJS学习笔记(十三) Ext Form checkboxgroup、radiogroup和其他字段 设置和获取数据

第十章末尾有源码地址

// 控制层修改
Ext.define("Demo.controller.form.Form", {
    extend: "Ext.app.ViewController",
    alias: "controller.demo_form_controller",
    init: function () {
        this.control({
            "demo_view_form button[action=reset]": {
                click: this.onReset
            },
            "demo_view_form button[action=save]": {
                click: this.onSave
            },
            "demo_view_form button[action=voluation]": {
                click: this.onVoluation
            }
        });
        this.loadData();
        this.overrideCheckboxgroupSetGet();
        this.overrideRadiogroupSetGet();
    },
    onSave: function () {
        // 保存数据到后台
        var form = this.getView();
        if (form.isValid()) {
            form.submit({
                url: "/app/server/form/Form.ashx?action=formUpload",
                type: "json",
                failure: function (form, action) {
                    Ext.Msg.alert("操作失败", action.result.data);
                }
            });
        }
    },
    loadData: function () {
        // 加载后台的数据
        this.getView().load({
            url: "/app/server/form/Form.ashx",
            type: "json",
            params: {
                "action": "formGetData",
                "id": "1"
            },
            failure: function (form, action) {
                Ext.Msg.alert("操作失败");
            }
        });
    },
    onReset: function () {
        this.getView().reset();
    },
    onVoluation: function () {
        var view = this.getView();
        var form = view.getForm();
        /*

        原本的赋值方式
        var checkbox = {
        "checkbox2": "2",   // name:inputValue
        "checkbox3": "3"
        }
        form.findField("checkbox").setValue(checkbox);
        alert(form.findField("checkbox").getValue());   // 得到一个对象
        var radio = {
        "radioC": "C"       // name:inputValue
        }
        form.findField("radio").setValue(radio);
        alert(form.findField("radio").getValue()); // 得到一个对象

        */

        // 重写后的赋值方式
        form.findField("checkboxgroup").setValue("1,2,3");
        alert(form.findField("checkboxgroup").getValue());

        form.findField("radiogroup").setValue("A");
        alert(form.findField("radiogroup").getValue());
    },
    // 重写radiogroup setValue和getValue方法
    overrideRadiogroupSetGet: function () {
        Ext.override(Ext.form.RadioGroup, {
            getValue: function () {
                var val = "";
                this.items.each(function (item) {
                    if (item.getValue()) {
                        val = item.inputValue;
                        return false;
                    }
                });
                return val;
            },
            setValue: function (val) {
                this.items.each(function (item) {
                    item.setValue(item.inputValue == val);
                });
            }
        });
    },
    // 重写checkboxgroup setValue和getValue方法
    overrideCheckboxgroupSetGet: function () {
        Ext.override(Ext.form.CheckboxGroup, {
            getValue: function () {
                var val = "";
                this.items.each(function (item) {
                    if (item.getValue()) {
                        val += item.inputValue + ",";
                    }
                });
                return val.slice(0, val.length - 1);
            },
            setValue: function (val) {
                var valAry = val.split(",");
                this.items.each(function (item) {
                    if (valAry.indexOf(item.inputValue) != -1) item.setValue(true);
                    else item.setValue(false);
                });
            }
        });
    }
});

// view层
Ext.define("Demo.view.form.Form", {
    extend: "Ext.form.Panel",
    requires: [
        "Demo.ux.DateTimeField",
        "Demo.controller.form.Form",
        "Demo.store.combobox.Combobox",
        "Demo.view.toolbar.Toolbar"
    ],
    controller: "demo_form_controller",
    alias: "widget.demo_view_form",
    title: "表单样例",
    bodyPadding: 10,
    collapsible: true,
    width: 580,
    height: 600,
    fieldDefaults: {
        labelWidth: 75,
        labelAlign: "right",
        anchor: "100%",
        margin: 5
    },
    tbar: {
        xtype: 'toolbar',
        items: [{
            text: "赋值测试",
            action: "voluation"
        }]
    },
    items: [{
        xtype: "fieldset",
        title: "基本信息",
        collapsible: true,
        defaults: {
            anchor: "100%"
        },
        items: [{
            xtype: "container",
            layout: "hbox",
            items: [{
                xtype: "textfield",
                name: "username",
                fieldLabel: "姓名",
                allowBlank: false
            }, {
                xtype: "textfield",
                name: "password",
                inputType: "password",
                fieldLabel: "密码",
                allowBlank: false
            }]
        }, {
            xtype: "hiddenfield",
            name: "hiddne",
            value: "隐藏的控件"
        }, {
            xtype: "filefield",
            name: "upload",
            fieldLabel: "文件上传",
            allowBlank: false,
            buttonText: "预览",
            buttonConfig: {
                glyph: "xf093@FontAwesome"
            }
        }, {
            xtype: "textareafield",
            name: "textarea",
            fieldLabel: "输入框",
            allowBlank: false
        }]
    }, {
        xtype: "fieldset",
        title: "详细信息",
        collapsible: true,
        defaults: {
            anchor: "100%"
        },
        items: [{
            xtype: "container",
            layout: "hbox",
            items: [{
                xtype: "datefield",
                name: "date",
                fieldLabel: "日期控件",
                format: "Y-m-d",
                altFormats: "Y-m-d|Y/m/d|Y m d",
                minValue: new Date(),
                allowBlank: false
            }, {
                xtype: "timefield",
                name: "time",
                fieldLabel: "时间控件",
                format: "H:i",
                altFormats: "H:i|H:i:s|H i|H i s",
                minValue: "08:30",
                maxValue: "17:30",
                increment: "5",
                allowBlank: false
            }]
        }, {
            xtype: "container",
            layout: "hbox",
            items: [{
                xtype: "combobox",
                name: "combobox",
                fieldLabel: "下拉菜单",
                store: {
                    type: "demo_combobox_combobox"
                },
                queryMode: 'local',
                displayField: 'title',
                valueField: 'id',
                allowBlank: false
            }, {
                xtype: "numberfield",
                name: "numberfield",
                fieldLabel: "数字输入框",
                minValue: 0,
                maxValue: 50,
                allowBlank: false
            }]
        }, {
            xtype: "displayfield",
            name: "displayfield",
            fieldLabel: "显示字段",
            value: "只能显示值，<span style=\"color:green;\">无法输入值</span>",
            allowBlank: false
        }, {
            xtype: "checkboxgroup",
            fieldLabel: "多选按钮",
            name: "checkboxgroup",
            columns: 4,
            allowBlank: false,
            items: [{ boxLabel: "选项1", inputValue: "1" },
                    { boxLabel: "选项2", inputValue: "2" },
                    { boxLabel: "选项3", inputValue: "3" },
                    { boxLabel: "选项4", inputValue: "4" },
                    { boxLabel: "选项5", inputValue: "5"}]
        }, {
            xtype: "radiogroup",
            fieldLabel: "单选按钮",
            name: "radiogroup",
            columns: 4,
            allowBlank: false,
            // items中必须有name且name一致 否则无法实现单选
            items: [{ boxLabel: "选项A", name: "radio", inputValue: "A" },
                    { boxLabel: "选项B", name: "radio", inputValue: "B" },
                    { boxLabel: "选项C", name: "radio", inputValue: "C" },
                    { boxLabel: "选项D", name: "radio", inputValue: "D" },
                    { boxLabel: "选项E", name: "radio", inputValue: "E"}]
        }]
    }, {
        xtype: "datetimefield",
        name: "datetime",
        format: "Y-m-d H:i:s",
        fieldLabel: "日期时间",
        allowBlank: false
    }],
    buttons: [{
        text: "保存",
        glyph: "xf0c7@FontAwesome",
        formBind: true,
        disabled: true,
        action: "save"
    }, {
        text: "重置",
        glyph: "xf021@FontAwesome",
        action: "reset"
    }],
    initComponent: function () {
        this.callParent();
    }
});

其余层的代码请看源码