fineui/demo/js/case/combo/demo.text_value_combo.js

/**
 * Created by Dailer on 2017/7/11.
 */
Demo.TextValueCombo = BI.inherit(BI.Widget, {
    props: {
        baseCls: ""
    },
    render: function () {
        var combo1, combo2;

        var items = [
            {
                text: "MVC-1",
                iconCls: "date-font",
                value: 1
            }, {
                text: "MVC-2",
                iconCls: "search-font",
                value: 2
            }, {
                text: "MVC-3",
                iconCls: "pull-right-font",
                value: 3
            }
        ];

        // 创建下拉框各种场景用例
        return {
            type: "bi.vertical",
            vgap: 20,
            hgap: 20,
            items: [
                this.createCombo("无初始值,带提示文字", {
                    type: "bi.text_value_combo",
                    ref: (ref) => {
                        this.combo1 = ref;
                    },
                    defaultText: "请选择",
                    width: 300,
                    items: items,
                    listeners: [
                        {
                            eventName: BI.TextValueCombo.EVENT_CHANGE,
                            action: function () {
                                console.log(this.getValue());
                            }
                        }
                    ]
                }),
                this.createCombo("自动根据value匹配text", {
                    type: "bi.text_value_combo",
                    ref: function () {
                        combo = this;
                    },
                    defaultText: "请选择",
                    width: 300,
                    value: 1,
                    items: items,
                    listeners: [
                        {
                            eventName: BI.TextValueCombo.EVENT_CHANGE,
                            action: function () {
                                console.log(this.getValue());
                            }
                        }
                    ]
                }),
                this.createCombo("无初始值,可以清空", {
                    type: "bi.text_value_combo",
                    ref: function () {
                        combo = this;
                    },
                    defaultText: "请选择",
                    width: 300,
                    items: items,
                    allowClear: true,
                    listeners: [
                        {
                            eventName: BI.TextValueCombo.EVENT_CHANGE,
                            action: function () {
                                console.log(this.getValue());
                            }
                        }
                    ]
                }),
                this.createCombo("有初始值,可以清空", {
                    type: "bi.text_value_combo",
                    ref: function () {
                        combo = this;
                    },
                    defaultText: "请选择",
                    width: 300,
                    value: 1,
                    items: items,
                    allowClear: true,
                    listeners: [
                        {
                            eventName: BI.TextValueCombo.EVENT_CHANGE,
                            action: function () {
                                console.log(this.getValue());
                            }
                        }
                    ]
                }),
                this.createCombo("有初始值,value不匹配,自动标红,指定标红文字", {
                    type: "bi.text_value_combo",
                    ref: function () {
                        combo = this;
                    },
                    width: 300,
                    text: "MVC-111",
                    value: 111,
                    items: items,
                    allowClear: true,
                    defaultText: "请选择",
                    warningTitle: "value值不合法",
                    listeners: [
                        {
                            eventName: BI.TextValueCombo.EVENT_CHANGE,
                            action: function () {
                                console.log(this.getValue());
                            }
                        }
                    ]
                }),
                this.createCombo("无初始值,外部受控调用setValue", {
                    type: "bi.vertical",
                    items: [
                        {
                            type: "bi.text_value_combo",
                            ref: function () {
                                combo1 = this;
                            },
                            width: 300,
                            items: items,
                            allowClear: true,
                            defaultText: "请选择",
                            listeners: [
                                {
                                    eventName: BI.TextValueCombo.EVENT_CHANGE,
                                    action: function () {
                                        console.log(this.getValue());
                                    }
                                }
                            ]
                        }, {
                            el: {
                                type: "bi.button",
                                text: "setValue(1)",
                                handler: function () {
                                    combo1.setValue(1);
                                },
                            },
                            vgap: 10,
                        }
                    ]
                }),
                this.createCombo("无初始值,外部受控调用setStatus", {
                    type: "bi.vertical",
                    items: [
                        {
                            type: "bi.text_value_combo",
                            ref: function () {
                                combo2 = this;
                            },
                            width: 300,
                            items: items,
                            allowClear: true,
                            defaultText: "请选择",
                            listeners: [
                                {
                                    eventName: BI.TextValueCombo.EVENT_CHANGE,
                                    action: function () {
                                        console.log(this.getValue());
                                    }
                                }
                            ]
                        }, {
                            el: {
                                type: "bi.button",
                                text: "setStatus()",
                                handler: function () {
                                    combo2.setStatus("error");
                                },
                            },
                            vgap: 10,
                        }
                    ]
                }),
                this.createCombo("支持复选", {
                    type: "bi.vertical",
                    items: [
                        {
                            type: "bi.text_value_combo",
                            width: 300,
                            items: items,
                            allowClear: true,
                            defaultText: "请选择",
                            chooseType: BI.Selection.Multi,
                            value: [1],
                            // allowSelectAll: false,
                            listeners: [
                                {
                                    eventName: BI.TextValueCombo.EVENT_CHANGE,
                                    action: function () {
                                        console.log(this.getValue());
                                    }
                                }
                            ]
                        }
                    ]
                })
            ]
        };
    },

    createCombo: function (text, combo) {
        return {
            type: "bi.vertical",
            items: [
                {
                    el: {
                        type: "bi.label",
                        textAlign: "left",
                        text,
                    },
                    bgap: 10
                }, {
                    el: combo,
                    bgap: 10,
                },
            ]
        };
    }
});

BI.shortcut("demo.text_value_combo", Demo.TextValueCombo);