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

import {
    VerticalLayout,
    TextValueCombo,
    Button,
    Label,
    shortcut,
    Selection,
    Widget
} from "@fui/core";
/**
 * Created by Dailer on 2017/7/11.
 */
@shortcut()
export class TextValueComboDemo extends Widget {
    static xtype = "demo.text_value_combo";

    props = {
        baseCls: ""
    };

    render() {
        let combo, combo1, combo2;

        const 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: VerticalLayout.xtype,
            vgap: 20,
            hgap: 20,
            items: [
                this.createCombo("无初始值,带提示文字", {
                    type: TextValueCombo.xtype,
                    ref: (ref) => {
                        this.combo1 = ref;
                    },
                    defaultText: "请选择",
                    width: 300,
                    items: items,
                    listeners: [
                        {
                            eventName: TextValueCombo.EVENT_CHANGE,
                            action: function () {
                                console.log(this.getValue());
                            }
                        }
                    ]
                }),
                this.createCombo("自动根据value匹配text", {
                    type: TextValueCombo.xtype,
                    ref: function () {
                        combo = this;
                    },
                    defaultText: "请选择",
                    width: 300,
                    value: 1,
                    items: items,
                    listeners: [
                        {
                            eventName: TextValueCombo.EVENT_CHANGE,
                            action: function () {
                                console.log(this.getValue());
                            }
                        }
                    ]
                }),
                this.createCombo("无初始值,可以清空", {
                    type: TextValueCombo.xtype,
                    ref: function () {
                        combo = this;
                    },
                    defaultText: "请选择",
                    width: 300,
                    items: items,
                    allowClear: true,
                    listeners: [
                        {
                            eventName: TextValueCombo.EVENT_CHANGE,
                            action: function () {
                                console.log(this.getValue());
                            }
                        }
                    ]
                }),
                this.createCombo("有初始值,可以清空", {
                    type: TextValueCombo.xtype,
                    ref: function () {
                        combo = this;
                    },
                    defaultText: "请选择",
                    width: 300,
                    value: 1,
                    items: items,
                    allowClear: true,
                    listeners: [
                        {
                            eventName: TextValueCombo.EVENT_CHANGE,
                            action: function () {
                                console.log(this.getValue());
                            }
                        }
                    ]
                }),
                this.createCombo("有初始值,value不匹配,自动标红,指定标红文字", {
                    type: TextValueCombo.xtype,
                    ref: function () {
                        combo = this;
                    },
                    width: 300,
                    text: "MVC-111",
                    value: 111,
                    items: items,
                    allowClear: true,
                    defaultText: "请选择",
                    warningTitle: "value值不合法",
                    listeners: [
                        {
                            eventName: TextValueCombo.EVENT_CHANGE,
                            action: function () {
                                console.log(this.getValue());
                            }
                        }
                    ]
                }),
                this.createCombo("无初始值,外部受控调用setValue", {
                    type: VerticalLayout.xtype,
                    items: [
                        {
                            type: TextValueCombo.xtype,
                            ref: function () {
                                combo1 = this;
                            },
                            width: 300,
                            items: items,
                            allowClear: true,
                            defaultText: "请选择",
                            listeners: [
                                {
                                    eventName: TextValueCombo.EVENT_CHANGE,
                                    action: function () {
                                        console.log(this.getValue());
                                    }
                                }
                            ]
                        },
                        {
                            el: {
                                type: Button.xtype,
                                text: "setValue(1)",
                                handler: function () {
                                    combo1.setValue(1);
                                }
                            },
                            vgap: 10
                        }
                    ]
                }),
                this.createCombo("无初始值,外部受控调用setStatus", {
                    type: VerticalLayout.xtype,
                    items: [
                        {
                            type: TextValueCombo.xtype,
                            ref: function () {
                                combo2 = this;
                            },
                            width: 300,
                            items: items,
                            allowClear: true,
                            defaultText: "请选择",
                            listeners: [
                                {
                                    eventName: TextValueCombo.EVENT_CHANGE,
                                    action: function () {
                                        console.log(this.getValue());
                                    }
                                }
                            ]
                        },
                        {
                            el: {
                                type: Button.xtype,
                                text: "setStatus()",
                                handler: function () {
                                    combo2.setStatus("error");
                                }
                            },
                            vgap: 10
                        }
                    ]
                }),
                this.createCombo("支持复选", {
                    type: VerticalLayout.xtype,
                    items: [
                        {
                            type: TextValueCombo.xtype,
                            width: 300,
                            items: items,
                            allowClear: true,
                            defaultText: "请选择",
                            chooseType: Selection.Multi,
                            value: [1],
                            // allowSelectAll: false,
                            listeners: [
                                {
                                    eventName: TextValueCombo.EVENT_CHANGE,
                                    action: function () {
                                        console.log(this.getValue());
                                    }
                                }
                            ]
                        }
                    ]
                }),
                this.createCombo("支持复选,不要全选功能", {
                    type: VerticalLayout.xtype,
                    items: [
                        {
                            type: TextValueCombo.xtype,
                            width: 300,
                            items: items,
                            allowClear: true,
                            defaultText: "请选择",
                            chooseType: Selection.Multi,
                            value: [1],
                            allowSelectAll: false,
                            listeners: [
                                {
                                    eventName: TextValueCombo.EVENT_CHANGE,
                                    action: function () {
                                        console.log(this.getValue());
                                    }
                                }
                            ]
                        }
                    ]
                })
            ]
        };
    }

    createCombo(text, combo) {
        return {
            type: VerticalLayout.xtype,
            items: [
                {
                    el: {
                        type: Label.xtype,
                        textAlign: "left",
                        text
                    },
                    bgap: 10
                },
                {
                    el: combo,
                    bgap: 10
                }
            ]
        };
    }
}