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 combo, wrapper;

        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: function () {
                        combo = this;
                    },
                    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;
                    },
                    defaultText: "请选择",
                    width: 300,
                    value: 111,
                    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: "df",
                    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
                }
            ]
        };
    }
});

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