/** * 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()); } } ] } ] }), 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);