Merge branch 'es6' of ssh://code.fineres.com:7999/~treecat/fineui into es6

es6.js

@@ -59,8 +59,13 @@ const target = [
     "createItems",
     "makeArrayByArray",
     "VerticalAlign",
+    "pushDistinct",
+    "endWith",
     "transformItems",
     "print",
+    "Tree",
+    "Func",
+    "Selection",
 ];
 
 // 加载模块
@@ -123,7 +128,7 @@ async function handleFile(srcName) {
                 return matchedSentence;
             }
         });
-        
+
         fs.writeFileSync(srcName, noXtypeCode);
 
         return;

src/case/button/node/treenode.js

@@ -1,13 +1,14 @@
-import { NodeButton } from "../../../base/single/button/button.node";
-import { shortcut, extend } from "../../../core";
+import { Label, NodeButton } from "@/base";
+import { shortcut, extend, VerticalAdaptLayout } from "@/core";
+import { TreeNodeSwitcher } from "@/case";
 
 @shortcut()
 export class BasicTreeNode extends NodeButton {
     static xtype = "bi.tree_node";
-    
+
     _defaultConfig(props) {
         const conf = super._defaultConfig.apply(this, arguments);
-        
+
         return extend(conf, {
             baseCls: `${conf.baseCls || ""} bi-tree-node ${props.selectable ? "bi-list-item-active" : "bi-list-item"}`,
             id: "",
@@ -27,7 +28,7 @@ export class BasicTreeNode extends NodeButton {
         const o = this.options;
 
         const checkbox = {
-            type: "bi.tree_node_switcher",
+            type: TreeNodeSwitcher.xtype,
             ref: _ref => {
                 this.switcher = _ref;
             },
@@ -39,7 +40,7 @@ export class BasicTreeNode extends NodeButton {
             layer: o.layer,
             ...o.switcherIcon,
             stopPropagation: o.selectable,
-            mounted () {
+            mounted() {
                 this.setEnable(true);
             },
             listeners: [
@@ -55,7 +56,7 @@ export class BasicTreeNode extends NodeButton {
         };
 
         return {
-            type: "bi.vertical_adapt",
+            type: VerticalAdaptLayout.xtype,
             columnSize: [o.iconWrapperWidth || o.height, "fill"],
             items: [
                 {
@@ -63,7 +64,7 @@ export class BasicTreeNode extends NodeButton {
                     lgap: o.layer * BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, //  偏移公式为每一层的偏移量为节点高度的一半
                 }, {
                     el: {
-                        type: "bi.label",
+                        type: Label.xtype,
                         ref: _ref => {
                             this.text = _ref;
                         },

src/case/button/treeitem/treeitem.js

@@ -1,5 +1,5 @@
-import { NodeButton } from "../../../base/single/button/button.node";
-import { shortcut, extend } from "../../../core";
+import { shortcut, extend, VerticalAdaptLayout, Layout } from "@/core";
+import { NodeButton, Label } from "@/base";
 
 @shortcut()
 export class BasicTreeItem extends NodeButton {
@@ -7,7 +7,7 @@ export class BasicTreeItem extends NodeButton {
 
     _defaultConfig() {
         const conf = super._defaultConfig(...arguments);
-        
+
         return extend(conf, {
             baseCls: `${conf.baseCls || ""} bi-tree-item bi-list-item-active`,
             id: "",
@@ -23,12 +23,12 @@ export class BasicTreeItem extends NodeButton {
         const o = this.options;
 
         return {
-            type: "bi.vertical_adapt",
+            type: VerticalAdaptLayout.xtype,
             columnSize: ["", "fill"],
             items: [
                 {
                     el: {
-                        type: "bi.layout",
+                        type: Layout.xtype,
                         height: o.height,
                         width: o.height,
                         cls: this.getLineCls(),
@@ -37,7 +37,7 @@ export class BasicTreeItem extends NodeButton {
                 },
                 {
                     el: {
-                        type: "bi.label",
+                        type: Label.xtype,
                         ref: _ref => {
                             this.text = _ref;
                         },

src/case/index.js

@@ -43,6 +43,7 @@ export * from "./loader";
 export * from "./segment";
 export * from "./layer";
 export * from "./linearsegment";
+export * from "./checkbox";
 export {
     MultiSelectBar,
     SelectList

src/case/tree/tree.level.js

@@ -9,7 +9,7 @@ import {
     isNotEmptyArray,
     Tree,
     createWidget,
-    VerticalLayout
+    VerticalLayout, Controller, Events
 } from "@/core";
 import { ButtonTree, CustomTree } from "@/base";
 import { TreeExpander } from "./treeexpander/tree.expander";
@@ -102,9 +102,9 @@ export class LevelTree extends Widget {
                 ],
             }, o.el),
         });
-        this.tree.on(BI.Controller.EVENT_CHANGE, function (type, value, ob) {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-            if (type === BI.Events.CLICK) {
+        this.tree.on(Controller.EVENT_CHANGE, function (type, value, ob) {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
+            if (type === Events.CLICK) {
                 self.fireEvent(LevelTree.EVENT_CHANGE, value, ob);
                 self.setValue(value);
             }

src/core/func/function.js

@@ -15,13 +15,12 @@ export function createDistinctName(array, name) {
     let src = name, idx = 1;
     name = name || "";
     while (true) {
-        if (every(array, function (i, item) {
-            return isKey(item) ? item !== name : item.name !== name;
-        })) {
+        if (every(array, (i, item) => isKey(item) ? item !== name : item.name !== name)) {
             break;
         }
         name = src + (idx++);
     }
+
     return name;
 }
 
@@ -31,8 +30,9 @@ export function createDistinctName(array, name) {
  * @return {number}
  */
 export function getGBWidth(str) {
-    str = str + "";
+    str = `${str}`;
     str = str.replace(/[^\x00-\xff]/g, "xx");
+
     return Math.ceil(str.length / 2);
 }
 
@@ -55,7 +55,7 @@ export function getSearchResult(items, keyword, param) {
     let t, text, py;
     keyword = toUpperCase(keyword);
     const matched = array ? [] : {}, find = array ? [] : {};
-    each(items, function (i, item) {
+    each(items, (i, item) => {
         // 兼容item为null的处理
         if (isNull(item)) {
             return;
@@ -77,7 +77,7 @@ export function getSearchResult(items, keyword, param) {
             } else {
                 array ? find.push(item) : (find[i] = item);
             }
-        } else {  // BI-56386 这边两个pid / text.length是为了防止截取的首字符串不是完整的，但光这样做还不够，即时错位了，也不能说明就不符合条件
+        } else { // BI-56386 这边两个pid / text.length是为了防止截取的首字符串不是完整的，但光这样做还不够，即时错位了，也不能说明就不符合条件
             pidx = py.indexOf(keyword);
             if (pidx > -1) {
                 if (text === keyword || keyword.length === text.length) {
@@ -88,9 +88,10 @@ export function getSearchResult(items, keyword, param) {
             }
         }
     });
+
     return {
         match: matched,
-        find: find,
+        find,
     };
 }
 
@@ -100,7 +101,7 @@ export function getSearchResult(items, keyword, param) {
  * @param key
  * @return {any[]}
  */
-export function getSortedResult(items, key) {
+export function getSortedResult(items, key = null) {
     const getTextOfItem = BI.isFunction(key) ? key :
         function (item, key) {
             if (BI.isNotNull(key)) {
@@ -112,10 +113,11 @@ export function getSortedResult(items, key) {
             if (BI.isNotNull(item.value)) {
                 return item.value;
             }
+
             return item;
         };
 
-    return items.sort(function (item1, item2) {
+    return items.sort((item1, item2) => {
         const str1 = getTextOfItem(item1, key);
         const str2 = getTextOfItem(item2, key);
         if (BI.isNull(str1) && BI.isNull(str2)) {
@@ -139,28 +141,33 @@ export function getSortedResult(items, key) {
                 return (BI.isNull(BI.CODE_INDEX[char1]) ? BI.MAX : BI.CODE_INDEX[char1]) - (BI.isNull(BI.CODE_INDEX[char2]) ? BI.MAX : BI.CODE_INDEX[char2]);
             }
         }
+
         return len1 - len2;
     });
 }
 
 export function beforeFunc(sFunc, func) {
     const __self = sFunc;
+
     return function () {
         if (func.apply(sFunc, arguments) === false) {
             return false;
         }
+
         return __self.apply(sFunc, arguments);
     };
 }
 
 export function afterFunc(sFunc, func) {
     const __self = sFunc;
+
     return function () {
         const ret = __self.apply(sFunc, arguments);
         if (ret === false) {
             return false;
         }
         func.apply(sFunc, arguments);
+
         return ret;
     };
 }

src/widget/index.js

@@ -6,6 +6,12 @@ import * as datetime from "./datetime";
 import * as datetimepane from "./datetimepane";
 import * as dynamicdatetime from "./dynamicdatetime";
 import * as time from "./time";
+import { SelectTreeCombo } from "./selecttree/selecttree.combo";
+import { SingleTreeCombo } from "./singletree/singletree.combo";
+import { MultiTreeCombo } from "./multitree/multi.tree.combo";
+import { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo";
+import { MultiTreeListCombo } from "./multitree/multi.tree.list.combo";
+import * as multiselect from "./multiselect";
 
 Object.assign(BI, {
     Collapse,
@@ -16,6 +22,12 @@ Object.assign(BI, {
     ...datetimepane,
     ...dynamicdatetime,
     ...time,
+    SelectTreeCombo,
+    SingleTreeCombo,
+    MultiTreeCombo,
+    MultiTreeInsertCombo,
+    MultiTreeListCombo,
+    ...multiselect,
 });
 
 export * from "./date/calendar";
@@ -25,6 +37,13 @@ export * from "./datetime";
 export * from "./datetimepane";
 export * from "./dynamicdatetime";
 export * from "./time";
+export { SelectTreeCombo } from "./selecttree/selecttree.combo";
+export { SingleTreeCombo } from "./singletree/singletree.combo";
+export { MultiTreeCombo } from "./multitree/multi.tree.combo";
+export { MultiTreeInsertCombo } from "./multitree/multi.tree.insert.combo";
+export { MultiTreeListCombo } from "./multitree/multi.tree.list.combo";
+export * from "./multiselect";
+
 export {
     Collapse
 };

src/widget/multiselect/__test__/multiselect.loader.nobar.test.js

@@ -4,15 +4,15 @@
  * Created by windy on 2019/9/18
  */
 
-describe("multi_select_no_bar_series", function () {
-
-    var _getItemsByTimes, _itemsCreator, itemSelectorGetter, searchItemSelectorGetter, _hasNextByTimes, items;
-    before(function () {
+describe("multi_select_no_bar_series", () => {
+    let _getItemsByTimes, _itemsCreator, itemSelectorGetter, searchItemSelectorGetter, _hasNextByTimes, items;
+    before(() => {
         _getItemsByTimes = function (items, times) {
-            var res = [];
-            for (var i = (times - 1) * 100; items[i] && i < times * 100; i++) {
+            const res = [];
+            for (let i = (times - 1) * 100; items[i] && i < times * 100; i++) {
                 res.push(items[i]);
             }
+
             return res;
         };
 
@@ -21,65 +21,60 @@ describe("multi_select_no_bar_series", function () {
         };
 
         _itemsCreator = function (options, callback) {
-            var items = BI.map(BI.makeArray(100, null), function(idx, v) {
+            let items = BI.map(BI.makeArray(100, null), (idx, v) => {
                 return {
                     text: idx,
                     value: idx,
-                    title: idx
+                    title: idx,
                 };
             });
-            var keywords = (options.keywords || []).slice();
+            const keywords = (options.keywords || []).slice();
             if (options.keyword) {
                 keywords.push(options.keyword);
             }
-            BI.each(keywords, function (i, kw) {
-                var search = BI.Func.getSearchResult(items, kw);
+            BI.each(keywords, (i, kw) => {
+                const search = BI.Func.getSearchResult(items, kw);
                 items = search.match.concat(search.find);
             });
             if (options.selectedValues) {// 过滤
-                var filter = BI.makeObject(options.selectedValues, true);
-                items = BI.filter(items, function (i, ob) {
-                    return !filter[ob.value];
-                });
+                const filter = BI.makeObject(options.selectedValues, true);
+                items = BI.filter(items, (i, ob) => !filter[ob.value]);
             }
             if (options.type == BI.MultiSelectCombo.REQ_GET_ALL_DATA) {
                 callback({
-                    items: items
+                    items,
                 });
+
                 return;
             }
             if (options.type == BI.MultiSelectCombo.REQ_GET_DATA_LENGTH) {
-                callback({count: items.length});
+                callback({ count: items.length });
+
                 return;
             }
             callback({
                 items: _getItemsByTimes(items, options.times),
-                hasNext: _hasNextByTimes(items, options.times)
+                hasNext: _hasNextByTimes(items, options.times),
             });
         };
 
         itemSelectorGetter = function (array) {
-            return BI.map(array, function (idx, num) {
-                return ".bi-multi-select-popup-view .bi-loader .bi-button-group .bi-multi-select-item:nth-child(" + num + ")";
-            });
+            return BI.map(array, (idx, num) => `.bi-multi-select-popup-view .bi-loader .bi-button-group .bi-multi-select-item:nth-child(${num})`);
         };
 
         searchItemSelectorGetter = function (array) {
-            return BI.map(array, function (idx, num) {
-                return ".bi-multi-select-search-pane .bi-loader .bi-button-group .bi-multi-select-item:nth-child(" + num + ")";
-            });
+            return BI.map(array, (idx, num) => `.bi-multi-select-search-pane .bi-loader .bi-button-group .bi-multi-select-item:nth-child(${num})`);
         };
-
-    })
+    });
 
     /**
      *   test_author_windy
      **/
-    it("setValue", function () {
-        var widget = BI.Test.createWidget({
+    it("setValue", () => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_no_bar_combo",
             width: 220,
-            itemsCreator: _itemsCreator
+            itemsCreator: _itemsCreator,
         });
         widget.setValue([1, 2]);
         expect(widget.getValue()).to.deep.equal([1, 2]);
@@ -89,12 +84,12 @@ describe("multi_select_no_bar_series", function () {
     /**
      *   test_author_windy
      **/
-    it("getValue", function () {
-        var widget = BI.Test.createWidget({
+    it("getValue", () => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_no_bar_combo",
             width: 220,
             itemsCreator: _itemsCreator,
-            value: [1, 2, 3]
+            value: [1, 2, 3],
         });
         expect(widget.getValue()).to.deep.equal([1, 2, 3]);
         widget.destroy();
@@ -103,22 +98,22 @@ describe("multi_select_no_bar_series", function () {
     /**
      *   test_author_windy
      **/
-    it("点选选值", function (done) {
-        var widget = BI.Test.createWidget({
+    it("点选选值", done => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_no_bar_combo",
             width: 220,
-            itemsCreator: _itemsCreator
+            itemsCreator: _itemsCreator,
         });
         widget.element.find(".bi-multi-select-trigger").click();
         // 为什么要delay 300呢，因为按钮有debounce
-        BI.delay(function () {
+        BI.delay(() => {
             // 点选1、2、3
-            BI.each(itemSelectorGetter([1,2,3]), function (idx, selector) {
+            BI.each(itemSelectorGetter([1, 2, 3]), (idx, selector) => {
                 widget.element.find(selector).click();
             });
             // 取消勾选1、2
-            BI.delay(function () {
-                BI.each(itemSelectorGetter([1,2]), function (idx, selector) {
+            BI.delay(() => {
+                BI.each(itemSelectorGetter([1, 2]), (idx, selector) => {
                     widget.element.find(selector).click();
                 });
                 expect(widget.getValue()).to.deep.equal([2]);
@@ -131,19 +126,19 @@ describe("multi_select_no_bar_series", function () {
     /**
      *   test_author_windy
      **/
-    it("搜索选值", function (done) {
-        var widget = BI.Test.createWidget({
+    it("搜索选值", done => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_no_bar_combo",
             width: 220,
-            itemsCreator: _itemsCreator
+            itemsCreator: _itemsCreator,
         });
-        BI.nextTick(function () {
+        BI.nextTick(() => {
             widget.element.find(".bi-multi-select-trigger .tip-text-style").click();
             // 这边为啥要加呢，因为input的setValue中有nextTick
-            BI.nextTick(function () {
-                BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, function () {
-                    BI.nextTick(function () {
-                        BI.each(searchItemSelectorGetter([1,2]), function (idx, selector) {
+            BI.nextTick(() => {
+                BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, () => {
+                    BI.nextTick(() => {
+                        BI.each(searchItemSelectorGetter([1, 2]), (idx, selector) => {
                             widget.element.find(selector).click();
                         });
                         expect(widget.getValue()).to.deep.equal([2, 12]);
@@ -158,21 +153,21 @@ describe("multi_select_no_bar_series", function () {
     /**
      *   test_author_windy
      **/
-    it("查看已选", function (done) {
-        var widget = BI.Test.createWidget({
+    it("查看已选", done => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_no_bar_combo",
             width: 220,
-            itemsCreator: function (op, callback) {
+            itemsCreator(op, callback) {
                 callback({
-                    items: items,
-                    hasNext: false
+                    items,
+                    hasNext: false,
                 });
             },
-            value: [1, 2]
+            value: [1, 2],
         });
-        BI.nextTick(function () {
+        BI.nextTick(() => {
             widget.element.find(".bi-multi-select-check-selected-button").click();
-            BI.delay(function () {
+            BI.delay(() => {
                 expect(widget.element.find(".display-list-item").length).to.equal(2);
                 widget.destroy();
                 done();
@@ -183,11 +178,11 @@ describe("multi_select_no_bar_series", function () {
     /**
      *   test_author_windy
      **/
-    it("setValue", function () {
-        var widget = BI.Test.createWidget({
+    it("setValue", () => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_insert_no_bar_combo",
             width: 220,
-            itemsCreator: _itemsCreator
+            itemsCreator: _itemsCreator,
         });
         widget.setValue([1, 2]);
         expect(widget.getValue()).to.deep.equal([1, 2]);
@@ -197,12 +192,12 @@ describe("multi_select_no_bar_series", function () {
     /**
      *   test_author_windy
      **/
-    it("getValue", function () {
-        var widget = BI.Test.createWidget({
+    it("getValue", () => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_insert_no_bar_combo",
             width: 220,
             itemsCreator: _itemsCreator,
-            value: [1, 2, 3]
+            value: [1, 2, 3],
         });
         expect(widget.getValue()).to.deep.equal([1, 2, 3]);
         widget.destroy();
@@ -212,22 +207,22 @@ describe("multi_select_no_bar_series", function () {
     /**
      *   test_author_windy
      **/
-    it("点选选值1", function (done) {
-        var widget = BI.Test.createWidget({
+    it("点选选值1", done => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_insert_no_bar_combo",
             width: 220,
-            itemsCreator: _itemsCreator
+            itemsCreator: _itemsCreator,
         });
         widget.element.find(".bi-multi-select-trigger").click();
         // 为什么要delay 300呢，因为按钮有debounce
-        BI.delay(function () {
+        BI.delay(() => {
             // 点选1、2、3
-            BI.each(itemSelectorGetter([1,2,3]), function (idx, selector) {
+            BI.each(itemSelectorGetter([1, 2, 3]), (idx, selector) => {
                 widget.element.find(selector).click();
             });
             // 取消勾选1、2、3
-            BI.delay(function () {
-                BI.each(itemSelectorGetter([1,2]), function (idx, selector) {
+            BI.delay(() => {
+                BI.each(itemSelectorGetter([1, 2]), (idx, selector) => {
                     widget.element.find(selector).click();
                 });
                 expect(widget.getValue()).to.deep.equal([2]);
@@ -240,19 +235,19 @@ describe("multi_select_no_bar_series", function () {
     /**
      *   test_author_windy
      **/
-    it("搜索选值1", function (done) {
-        var widget = BI.Test.createWidget({
+    it("搜索选值1", done => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_insert_no_bar_combo",
             width: 220,
-            itemsCreator: _itemsCreator
+            itemsCreator: _itemsCreator,
         });
-        BI.nextTick(function () {
+        BI.nextTick(() => {
             widget.element.find(".bi-multi-select-trigger .tip-text-style").click();
             // 这边为啥要加呢，因为input的setValue中有nextTick
-            BI.nextTick(function () {
-                BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, function () {
-                    BI.nextTick(function () {
-                        BI.each(searchItemSelectorGetter([1,2]), function (idx, selector) {
+            BI.nextTick(() => {
+                BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "2", 50, () => {
+                    BI.nextTick(() => {
+                        BI.each(searchItemSelectorGetter([1, 2]), (idx, selector) => {
                             widget.element.find(selector).click();
                         });
                         expect(widget.getValue()).to.deep.equal([2, 12]);
@@ -267,18 +262,18 @@ describe("multi_select_no_bar_series", function () {
     /**
      *   test_author_windy
      **/
-    it("新增值1", function (done) {
-        var widget = BI.Test.createWidget({
+    it("新增值1", done => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_insert_no_bar_combo",
             width: 220,
-            itemsCreator: _itemsCreator
+            itemsCreator: _itemsCreator,
         });
-        BI.nextTick(function () {
+        BI.nextTick(() => {
             widget.element.find(".bi-multi-select-trigger .tip-text-style").click();
             // 这边为啥要加呢，因为input的setValue中有nextTick
-            BI.nextTick(function () {
-                BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "z", 50, function () {
-                    BI.nextTick(function () {
+            BI.nextTick(() => {
+                BI.Test.triggerKeyDown(widget.element.find(".bi-multi-select-trigger .bi-input"), "z", 50, () => {
+                    BI.nextTick(() => {
                         widget.element.find(".bi-text-button:contains(+点击新增\"z\")").click();
                         expect(widget.getValue()).to.deep.equal(["z"]);
                         widget.destroy();
@@ -292,23 +287,23 @@ describe("multi_select_no_bar_series", function () {
     /**
      *   test_author_windy
      **/
-    it("查看已选1", function (done) {
-        var widget = BI.Test.createWidget({
+    it("查看已选1", done => {
+        const widget = BI.Test.createWidget({
             type: "bi.multi_select_insert_no_bar_combo",
             width: 220,
             itemsCreator: _itemsCreator,
             value: {
                 type: 1,
-                value: [1, 2]
-            }
+                value: [1, 2],
+            },
         });
-        BI.nextTick(function () {
+        BI.nextTick(() => {
             widget.element.find(".bi-multi-select-check-selected-button").click();
-            BI.delay(function () {
+            BI.delay(() => {
                 expect(widget.element.find(".display-list-item").length).to.equal(2);
                 widget.destroy();
                 done();
             }, 300);
         });
     });
-});
+});

src/widget/multiselect/__test__/multiselect.loader.test.js

@@ -2,4 +2,4 @@
  * @author windy
  * @version 2.0
  * Created by windy on 2019/9/18
- */
+ */

src/widget/multiselect/__test__/multiselectcombo.test.js

@@ -2,4 +2,4 @@
  * @author windy
  * @version 2.0
  * Created by windy on 2019/9/18
- */
+ */

src/widget/multiselect/__test__/multiselectinsert.combo.test.js

@@ -2,4 +2,4 @@
  * @author windy
  * @version 2.0
  * Created by windy on 2019/9/18
- */
+ */

src/widget/multiselect/check/multiselect.check.pane.js

@@ -1,113 +1,121 @@
-/**
- *
- * @class BI.MultiSelectCheckPane
- * @extends BI.Widget
- */
-BI.MultiSelectCheckPane = BI.inherit(BI.Widget, {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    map,
+    i18nText,
+    VerticalAdaptLayout, VTapeLayout
+} from "@/core";
+import { TextButton, Label } from "@/base";
+import { DisplaySelectedList } from "./multiselect.display";
 
-    constants: {
-        height: 12,
-        lgap: 10,
-        tgap: 10,
-        bgap: 5
-    },
+@shortcut()
+export class MultiSelectCheckPane extends Widget {
+    static xtype = "bi.multi_select_check_pane";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectCheckPane.superclass._defaultConfig.apply(this, arguments), {
+    constants = { height: 12, lgap: 10, tgap: 10, bgap: 5 };
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-check-pane bi-background",
             items: [],
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
-            onClickContinueSelect: BI.emptyFn
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
+            onClickContinueSelect: emptyFn,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectCheckPane.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, opts = this.options;
+        const self = this,
+            opts = this.options;
 
         this.storeValue = opts.value || {};
-        this.display = BI.createWidget({
-            type: "bi.display_selected_list",
+        this.display = createWidget({
+            type: DisplaySelectedList.xtype,
             items: opts.items,
-            itemsCreator: function (op, callback) {
-                op = BI.extend(op || {}, {
-                    selectedValues: self.storeValue.value
+            itemsCreator(op, callback) {
+                op = extend(op || {}, {
+                    selectedValues: self.storeValue.value,
                 });
                 if (self.storeValue.type === BI.Selection.Multi) {
                     callback({
-                        items: BI.map(self.storeValue.value, function (i, v) {
-                            var txt = opts.valueFormatter(v) || v;
+                        items: map(self.storeValue.value, (i, v) => {
+                            const txt = opts.valueFormatter(v) || v;
 
                             return {
                                 text: txt,
                                 value: v,
-                                title: txt
+                                title: txt,
                             };
-                        })
+                        }),
                     });
 
                     return;
                 }
                 opts.itemsCreator(op, callback);
-            }
+            },
         });
 
-        this.continueSelect = BI.createWidget({
-            type: "bi.text_button",
-            title: BI.i18nText("BI-Continue_Select"),
-            text: BI.i18nText("BI-Continue_Select"),
-            cls: "multi-select-check-selected bi-high-light"
+        this.continueSelect = createWidget({
+            type: TextButton.xtype,
+            title: i18nText("BI-Continue_Select"),
+            text: i18nText("BI-Continue_Select"),
+            cls: "multi-select-check-selected bi-high-light",
         });
 
-        this.continueSelect.on(BI.TextButton.EVENT_CHANGE, function () {
+        this.continueSelect.on(TextButton.EVENT_CHANGE, () => {
             opts.onClickContinueSelect();
         });
 
-        BI.createWidget({
-            type: "bi.vtape",
+        createWidget({
+            type: VTapeLayout.xtype,
             element: this,
-            items: [{
-                height: this.constants.height,
-                el: {
-                    type: "bi.vertical_adapt",
-                    columnSize: ["auto", "auto"],
-                    cls: "multi-select-continue-select",
-                    items: [
-                        {
-                            el: {
-                                type: "bi.label",
-                                title: BI.i18nText("BI-Selected_Data"),
-                                text: BI.i18nText("BI-Selected_Data")
+            items: [
+                {
+                    height: this.constants.height,
+                    el: {
+                        type: VerticalAdaptLayout.xtype,
+                        columnSize: ["auto", "auto"],
+                        cls: "multi-select-continue-select",
+                        items: [
+                            {
+                                el: {
+                                    type: Label.xtype,
+                                    title: i18nText("BI-Selected_Data"),
+                                    text: i18nText("BI-Selected_Data"),
+                                },
+                                lgap: this.constants.lgap,
                             },
-                            lgap: this.constants.lgap
-                        },
-                        {
-                            el: this.continueSelect,
-                            hgap: this.constants.lgap
-                        }]
+                            {
+                                el: this.continueSelect,
+                                hgap: this.constants.lgap,
+                            }
+                        ],
+                    },
+                    tgap: this.constants.tgap,
                 },
-                tgap: this.constants.tgap
-            }, {
-                height: "fill",
-                el: this.display,
-                tgap: this.constants.bgap
-            }]
+                {
+                    height: "fill",
+                    el: this.display,
+                    tgap: this.constants.bgap,
+                }
+            ],
         });
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.storeValue = v || {};
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.display.empty();
-    },
-
-    populate: function () {
-        this.display.populate.apply(this.display, arguments);
     }
-});
 
-BI.shortcut("bi.multi_select_check_pane", BI.MultiSelectCheckPane);
+    populate() {
+        this.display.populate(...arguments);
+    }
+}

src/widget/multiselect/check/multiselect.display.js

@@ -1,106 +1,112 @@
-/**
- *
- *
- * 查看已选弹出层的展示面板
- * @class BI.DisplaySelectedList
- * @extends BI.Widget
- */
-BI.DisplaySelectedList = BI.inherit(BI.Pane, {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    VerticalLayout,
+    createItems
+} from "@/core";
+import { Pane, ButtonGroup, Loader, IconTextItem } from "@/base";
+import { ListPane } from "@/case";
 
-    constants: {
-        height: 24,
-        lgap: 10
-    },
+@shortcut()
+export class DisplaySelectedList extends Pane {
+    static xtype = "bi.display_selected_list";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.DisplaySelectedList.superclass._defaultConfig.apply(this, arguments), {
+    constants = { height: 24, lgap: 10 };
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-display-list",
-            itemsCreator: BI.emptyFn,
-            items: []
+            itemsCreator: emptyFn,
+            items: [],
         });
-    },
+    }
 
-    _init: function () {
-        BI.DisplaySelectedList.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, opts = this.options;
+        const self = this,
+            opts = this.options;
 
         this.hasNext = false;
-        var cacheItems = [];
+        let cacheItems = [];
 
-        this.button_group = BI.createWidget({
-            type: "bi.list_pane",
+        this.button_group = createWidget({
+            type: ListPane.xtype,
             element: this,
             el: {
-                type: "bi.loader",
+                type: Loader.xtype,
                 isDefaultInit: false,
                 logic: {
                     dynamic: true,
-                    scrolly: true
+                    scrolly: true,
                 },
                 items: this._createItems(opts.items),
-                chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
+                chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
                 layouts: [
                     {
-                        type: "bi.vertical",
-                        lgap: 10
+                        type: VerticalLayout.xtype,
+                        lgap: 10,
                     }
-                ]
+                ],
             },
-            itemsCreator: function (options, callback) {
+            itemsCreator (options, callback) {
                 if (options.times === 1) {
                     cacheItems = [];
                 }
 
                 if (cacheItems.length > 0) {
-                    var renderedItems = cacheItems.slice(0, 100);
+                    const renderedItems = cacheItems.slice(0, 100);
                     cacheItems = cacheItems.slice(100);
                     self.hasNext = cacheItems.length > 0;
                     callback(self._createItems(renderedItems));
+                    
                     return;
                 }
 
-                opts.itemsCreator(options, function (ob) {
+                opts.itemsCreator(options, ob => {
                     self.hasNext = !!ob.hasNext;
-                    var firstItemsCount = 100 + ob.items.length % 100;
+                    const firstItemsCount = 100 + (ob.items.length % 100);
                     if (ob.items.length > 100) {
                         cacheItems = ob.items.slice(firstItemsCount);
-                        self.hasNext = (firstItemsCount === ob.items.length) ? false : true;
+                        self.hasNext =
+                            firstItemsCount !== ob.items.length;
                     }
-                    callback(self._createItems(ob.items.slice(0, firstItemsCount)));
+                    callback(
+                        self._createItems(ob.items.slice(0, firstItemsCount))
+                    );
                 });
             },
-            hasNext: function () {
+            hasNext () {
                 return self.hasNext;
-            }
+            },
         });
-    },
+    }
 
-    _createItems: function (items) {
-        return BI.createItems(items, {
-            type: "bi.icon_text_item",
+    _createItems(items) {
+        return createItems(items, {
+            type: IconTextItem.xtype,
             cls: "cursor-default check-font icon-size-12 display-list-item bi-tips",
             once: true,
             invalid: true,
             selected: true,
             height: this.constants.height,
             logic: {
-                dynamic: true
-            }
+                dynamic: true,
+            },
         });
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.button_group.empty();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         if (arguments.length === 0) {
             this.button_group.populate();
         } else {
             this.button_group.populate(this._createItems(items));
         }
     }
-});
-
-BI.shortcut("bi.display_selected_list", BI.DisplaySelectedList);
+}

src/widget/multiselect/loader.js

@@ -1,146 +1,192 @@
-/**
- * 加载控件
- *
- * Created by GUY on 2015/8/31.
- * @class BI.Loader
- * @extends BI.Widget
- */
-BI.MultiSelectInnerLoader = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectInnerLoader.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    VerticalLayout,
+    createWidget,
+    Controller,
+    Events,
+    isEmpty,
+    nextTick,
+    bind,
+    isNumber,
+    isObject,
+    isFunction,
+    makeObject,
+    isArray,
+    each
+} from "@/core";
+import { ButtonGroup, Loader } from "@/base";
+
+@shortcut()
+export class MultiSelectInnerLoader extends Widget {
+    static xtype = "bi.multi_select_inner_loader";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-inner-loader",
 
             direction: "top",
             isDefaultInit: true, // 是否默认初始化数据
             logic: {
                 dynamic: true,
-                scrolly: true
+                scrolly: true,
             },
 
             // 下面是button_group的属性
             el: {
-                type: "bi.button_group",
-                chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
+                type: ButtonGroup.xtype,
+                chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
                 behaviors: {
-                    redmark: function () {
+                    redmark() {
                         return true;
-                    }
+                    },
                 },
-                layouts: [{
-                    type: "bi.vertical"
-                }]
+                layouts: [
+                    {
+                        type: VerticalLayout.xtype,
+                    }
+                ],
             },
 
             items: [],
-            itemsCreator: BI.emptyFn,
-            onLoaded: BI.emptyFn,
+            itemsCreator: emptyFn,
+            onLoaded: emptyFn,
 
             // 下面是分页信息
             count: false,
             prev: false,
             next: {},
-            hasPrev: BI.emptyFn,
-            hasNext: BI.emptyFn
+            hasPrev: emptyFn,
+            hasNext: emptyFn,
         });
-    },
+    }
 
-    _nextLoad: function () {
-        var self = this, o = this.options;
+    _nextLoad() {
+        const self = this,
+            o = this.options;
         this.next.setLoading();
         if (this.cachItems && this.cachItems.length > 0) {
             this.next.setLoaded();
             this.addItems(this.cachItems.slice(0, 100));
             this.cachItems = this.cachItems.slice(100);
+
             return;
         }
-        o.itemsCreator.apply(this, [{times: ++this.times}, function () {
-            self.next.setLoaded();
-            self.addItems.apply(self, arguments);
-        }]);
-    },
-
-    render: function () {
-        var self = this, o = this.options;
+        o.itemsCreator.apply(this, [
+            { times: ++this.times },
+            function () {
+                self.next.setLoaded();
+                self.addItems(...arguments);
+            }
+        ]);
+    }
+
+    render() {
+        const self = this,
+            o = this.options;
         if (o.itemsCreator === false) {
             o.next = false;
         }
-        this.button_group = BI.createWidget(o.el, {
-            type: "bi.button_group",
+        this.button_group = createWidget(o.el, {
+            type: ButtonGroup.xtype,
             chooseType: 0,
             items: o.items,
             behaviors: {},
-            layouts: [{
-                type: "bi.vertical"
-            }],
-            value: o.value
+            layouts: [
+                {
+                    type: VerticalLayout.xtype,
+                }
+            ],
+            value: o.value,
         });
-        this.button_group.on(BI.Controller.EVENT_CHANGE, function (type, value, obj) {
-            if (type === BI.Events.CLICK) {
-                var node = self.cachGroup.getNodeByValue(value);
-                if (node) {
-                    node.setSelected(obj.isSelected());
+        this.button_group.on(
+            Controller.EVENT_CHANGE,
+            function (type, value, obj) {
+                if (type === Events.CLICK) {
+                    const node = self.cachGroup.getNodeByValue(value);
+                    if (node) {
+                        node.setSelected(obj.isSelected());
+                    }
+                }
+                self.fireEvent(Controller.EVENT_CHANGE, arguments);
+                if (type === Events.CLICK) {
+                    self.fireEvent(Loader.EVENT_CHANGE, obj);
                 }
             }
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-            if (type === BI.Events.CLICK) {
-                self.fireEvent(BI.Loader.EVENT_CHANGE, obj);
-            }
-        });
+        );
 
-        var renderEngine = BI.Widget._renderEngine;
-        BI.Widget.registerRenderEngine(BI.Element.renderEngine);
-        this.cachGroup = BI.createWidget(o.el, {
-            type: "bi.button_group",
+        const renderEngine = Widget._renderEngine;
+        Widget.registerRenderEngine(BI.Element.renderEngine);
+        this.cachGroup = createWidget(o.el, {
+            type: ButtonGroup.xtype,
             root: true,
             chooseType: 0,
             items: o.items,
             behaviors: {},
-            layouts: [{
-                type: "bi.vertical"
-            }],
-            value: o.value
+            layouts: [
+                {
+                    type: VerticalLayout.xtype,
+                }
+            ],
+            value: o.value,
         });
-        BI.Widget.registerRenderEngine(renderEngine);
+        Widget.registerRenderEngine(renderEngine);
 
         if (o.next !== false) {
-            this.next = BI.createWidget(BI.extend({
-                type: "bi.loading_bar"
-            }, o.next));
-            this.next.on(BI.Controller.EVENT_CHANGE, function (type) {
-                if (type === BI.Events.CLICK) {
+            this.next = createWidget(
+                extend(
+                    {
+                        type: "bi.loading_bar",
+                    },
+                    o.next
+                )
+            );
+            this.next.on(Controller.EVENT_CHANGE, type => {
+                if (type === Events.CLICK) {
                     self._nextLoad();
                 }
             });
         }
 
-        BI.createWidget({
-            type: "bi.vertical",
+        createWidget({
+            type: VerticalLayout.xtype,
             element: this,
-            items: [this.button_group, this.next]
+            items: [this.button_group, this.next],
         });
 
-        o.isDefaultInit && BI.isEmpty(o.items) && BI.nextTick(BI.bind(function () {
-            o.isDefaultInit && BI.isEmpty(o.items) && this._populate();
-        }, this));
-    },
+        o.isDefaultInit &&
+        isEmpty(o.items) &&
+        nextTick(
+            bind(function () {
+                o.isDefaultInit && isEmpty(o.items) && this._populate();
+            }, this)
+        );
+    }
 
-    hasNext: function () {
-        var o = this.options;
-        if (BI.isNumber(o.count)) {
+    hasNext() {
+        const o = this.options;
+        if (isNumber(o.count)) {
             return this.count < o.count;
         }
         if (this.cachItems && this.cachItems.length > 0) {
             return true;
         }
-        return !!o.hasNext.apply(this, [{
-            times: this.times,
-            count: this.count
-        }]);
-    },
 
-    addItems: function (items) {
+        return !!o.hasNext.apply(this, [
+            {
+                times: this.times,
+                count: this.count,
+            }
+        ]);
+    }
+
+    addItems(items) {
         this.count += items.length;
-        if (BI.isObject(this.next)) {
+        if (isObject(this.next)) {
             if (this.hasNext()) {
                 this.options.items = this.options.items.concat(items);
                 this.next.setLoaded();
@@ -148,113 +194,124 @@ BI.MultiSelectInnerLoader = BI.inherit(BI.Widget, {
                 this.next.setEnd();
             }
         }
-        var renderEngine = BI.Widget._renderEngine;
-        BI.Widget.registerRenderEngine(BI.Element.renderEngine);
-        this.cachGroup.addItems.apply(this.cachGroup, arguments);
-        BI.Widget.registerRenderEngine(renderEngine);
-        this.button_group.addItems.apply(this.button_group, arguments);
-    },
-
-    _populate: function (items) {
-        var self = this, o = this.options;
-        if (arguments.length === 0 && (BI.isFunction(o.itemsCreator))) {
-            o.itemsCreator.apply(this, [{times: 1}, function (items, keyword) {
-                if (arguments.length === 0) {
-                    throw new Error("参数不能为空");
+        const renderEngine = Widget._renderEngine;
+        Widget.registerRenderEngine(BI.Element.renderEngine);
+        this.cachGroup.addItems(...arguments);
+        Widget.registerRenderEngine(renderEngine);
+        this.button_group.addItems(...arguments);
+    }
+
+    _populate(items) {
+        const self = this,
+            o = this.options;
+        if (arguments.length === 0 && isFunction(o.itemsCreator)) {
+            o.itemsCreator.apply(this, [
+                { times: 1 },
+                function (items, keyword) {
+                    if (arguments.length === 0) {
+                        throw new Error("参数不能为空");
+                    }
+                    self.populate(...arguments);
+                    o.onLoaded();
                 }
-                self.populate.apply(self, arguments);
-                o.onLoaded();
-            }]);
+            ]);
+
             return false;
         }
-        this.options.items = (items || []).slice(0, 100 + (items || []).length % 100);
+        this.options.items = (items || []).slice(
+            0,
+            100 + ((items || []).length % 100)
+        );
         this.times = 1;
         this.count = 0;
         this.count += items.length;
-        if (BI.isObject(this.next)) {
+        if (isObject(this.next)) {
             if (this.hasNext()) {
                 this.next.setLoaded();
             } else {
                 this.next.invisible();
             }
         }
+
         return true;
-    },
+    }
 
-    populate: function (items, keyword) {
-        if (this._populate.apply(this, arguments)) {
+    populate(items, keyword) {
+        if (this._populate(...arguments)) {
             this.cachItems = [];
-            var firstItemsCount = 100 + items.length % 100;
+            const firstItemsCount = 100 + (items.length % 100);
             if (items.length > firstItemsCount) {
                 this.cachItems = items.slice(firstItemsCount);
             }
-            var renderEngine = BI.Widget._renderEngine;
-            BI.Widget.registerRenderEngine(BI.Element.renderEngine);
+            const renderEngine = Widget._renderEngine;
+            Widget.registerRenderEngine(BI.Element.renderEngine);
             this.cachGroup.populate.call(this.cachGroup, items, keyword);
-            BI.Widget.registerRenderEngine(renderEngine);
-            this.button_group.populate.call(this.button_group, items.slice(0, firstItemsCount), keyword);
+            Widget.registerRenderEngine(renderEngine);
+            this.button_group.populate.call(
+                this.button_group,
+                items.slice(0, firstItemsCount),
+                keyword
+            );
         }
-    },
+    }
 
-    setNotSelectedValue: function () {
-        this.button_group.setNotSelectedValue.apply(this.button_group, arguments);
-        this.cachGroup.setNotSelectedValue.apply(this.cachGroup, arguments);
-    },
+    setNotSelectedValue() {
+        this.button_group.setNotSelectedValue(...arguments);
+        this.cachGroup.setNotSelectedValue(...arguments);
+    }
 
-    getNotSelectedValue: function () {
+    getNotSelectedValue() {
         return this.cachGroup.getNotSelectedValue();
-    },
+    }
 
-    setAllSelected: function (v) {
+    setAllSelected(v) {
         this.button_group.setAllSelected(v);
         this.cachGroup.setAllSelected(v);
-    },
+    }
 
-    setValue: function (value) {
-        var map = BI.makeObject(BI.isArray(value) ? value : [value]);
+    setValue(value) {
+        const map = makeObject(isArray(value) ? value : [value]);
         this.cachGroup.setValueMap.call(this.cachGroup, map);
         this.button_group.setValueMap.call(this.button_group, map);
-    },
+    }
 
-    getValue: function () {
-        return this.cachGroup.getValue.apply(this.cachGroup, arguments);
-    },
+    getValue() {
+        return this.cachGroup.getValue(...arguments);
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.button_group.getAllButtons();
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.button_group.getAllLeaves();
-    },
+    }
 
-    getSelectedButtons: function () {
+    getSelectedButtons() {
         return this.button_group.getSelectedButtons();
-    },
+    }
 
-    getNotSelectedButtons: function () {
+    getNotSelectedButtons() {
         return this.button_group.getNotSelectedButtons();
-    },
+    }
 
-    getIndexByValue: function (value) {
+    getIndexByValue(value) {
         return this.button_group.getIndexByValue(value);
-    },
+    }
 
-    getNodeById: function (id) {
+    getNodeById(id) {
         return this.button_group.getNodeById(id);
-    },
+    }
 
-    getNodeByValue: function (value) {
+    getNodeByValue(value) {
         return this.button_group.getNodeByValue(value);
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.button_group.empty();
         this.cachGroup.empty();
-        BI.each([this.prev, this.next], function (i, ob) {
+        each([this.prev, this.next], (i, ob) => {
             ob && ob.setVisible(false);
         });
     }
-});
-BI.MultiSelectInnerLoader.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_select_inner_loader", BI.MultiSelectInnerLoader);
+}

src/widget/multiselect/multiselect.combo.js

@@ -1,51 +1,98 @@
-/**
- *
- * @class BI.MultiSelectCombo
- * @extends BI.Single
- */
-BI.MultiSelectCombo = BI.inherit(BI.Single, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectCombo.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    isKey,
+    remove,
+    deepClone,
+    createWidget,
+    toPix,
+    bind,
+    last,
+    initial,
+    nextTick,
+    Events,
+    AbsoluteLayout,
+    VerticalAdaptLayout,
+    isNotNull,
+    makeObject,
+    map,
+    each,
+    Func,
+    concat,
+    values,
+    filter,
+    contains,
+    isNull
+} from "@/core";
+import { Single, Combo } from "@/base";
+import { TriggerIconButton } from "@/case";
+import { MultiSelectTrigger } from "./multiselect.trigger";
+import { MultiSelectPopupView } from "./multiselect.popup.view";
+import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected";
+
+@shortcut()
+export class MultiSelectCombo extends Single {
+    static xtype = "bi.multi_select_combo";
+
+    static REQ_GET_DATA_LENGTH = "1";
+    static REQ_GET_ALL_DATA = "-1";
+    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-combo",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
             itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             height: 24,
             allowEdit: true,
         });
-    },
-
-    _init: function () {
-        var self = this;
-        var o = this.options;
-        BI.MultiSelectCombo.superclass._init.apply(this, arguments);
-        var assertShowValue = function () {
-            if (BI.isKey(self._startValue)) {
+    }
+
+    _init() {
+        const self = this;
+        const o = this.options;
+        super._init(...arguments);
+        const triggerBtn = createWidget({
+            type: TriggerIconButton.xtype,
+            width: o.height,
+            height: o.height,
+            cls: "multi-select-trigger-icon-button",
+        });
+
+        function assertShowValue() {
+            if (isKey(self._startValue)) {
                 if (self.storeValue.type === BI.Selection.All) {
-                    BI.remove(self.storeValue.value, self._startValue);
+                    remove(self.storeValue.value, self._startValue);
                     self.storeValue.assist = self.storeValue.assist || [];
                     BI.pushDistinct(self.storeValue.assist, self._startValue);
                 } else {
                     BI.pushDistinct(self.storeValue.value, self._startValue);
-                    BI.remove(self.storeValue.assist, self._startValue);
+                    remove(self.storeValue.assist, self._startValue);
                 }
             }
 
             self.trigger.getSearcher().setState(self.storeValue);
             self.numberCounter.setButtonChecked(self.storeValue);
-        };
-        this.storeValue = BI.deepClone(o.value) || {};
+        }
+
+        this.storeValue = deepClone(o.value) || {};
 
         this._assertValue(this.storeValue);
 
         // 标记正在请求数据
         this.requesting = false;
 
-        this.trigger = BI.createWidget({
-            type: "bi.multi_select_trigger",
+        this.trigger = createWidget({
+            type: MultiSelectTrigger.xtype,
             allowEdit: o.allowEdit,
-            height: BI.toPix(o.height, o.simple ? 1 : 2),
+            height: toPix(o.height, o.simple ? 1 : 2),
             text: o.text,
             defaultText: o.defaultText,
             masker: {
@@ -58,114 +105,124 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
             },
             valueFormatter: o.valueFormatter,
             itemFormatter: o.itemFormatter,
-            itemsCreator: BI.bind(this._itemsCreator4Trigger, this),
+            itemsCreator: bind(this._itemsCreator4Trigger, this),
             itemHeight: o.itemHeight,
             value: this.storeValue,
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () {
-            self.fireEvent(BI.MultiSelectCombo.EVENT_FOCUS);
+        this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
+            self.fireEvent(MultiSelectCombo.EVENT_FOCUS);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () {
-            self.fireEvent(BI.MultiSelectCombo.EVENT_BLUR);
+        this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
+            self.fireEvent(MultiSelectCombo.EVENT_BLUR);
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
             self._setStartValue("");
             this.getSearcher().setValue(self.storeValue);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_STOP, () => {
             self._setStartValue("");
-            self.fireEvent(BI.MultiSelectCombo.EVENT_STOP);
+            self.fireEvent(MultiSelectCombo.EVENT_STOP);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function (keywords) {
-            var last = BI.last(keywords);
-            keywords = BI.initial(keywords || []);
-            if (keywords.length > 0) {
-                self._joinKeywords(keywords, function () {
-                    if (BI.endWith(last, BI.BlankSplitChar)) {
-                        self.combo.setValue(self.storeValue);
-                        assertShowValue();
-                        self.combo.populate();
-                        self._setStartValue("");
-                    } else {
-                        self.combo.setValue(self.storeValue);
-                        assertShowValue();
-                    }
-                    self._dataChange = true;
-                });
+        this.trigger.on(
+            MultiSelectTrigger.EVENT_SEARCHING,
+            keywords => {
+                const lastKeyword = last(keywords);
+                keywords = initial(keywords || []);
+                if (keywords.length > 0) {
+                    self._joinKeywords(keywords, () => {
+                        if (BI.endWith(lastKeyword, BI.BlankSplitChar)) {
+                            self.combo.setValue(self.storeValue);
+                            assertShowValue();
+                            self.combo.populate();
+                            self._setStartValue("");
+                        } else {
+                            self.combo.setValue(self.storeValue);
+                            assertShowValue();
+                        }
+                        self._dataChange = true;
+                    });
+                }
+                self.fireEvent(MultiSelectCombo.EVENT_SEARCHING);
             }
-            self.fireEvent(BI.MultiSelectCombo.EVENT_SEARCHING);
-        });
+        );
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function (value, obj) {
+        this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function (value, obj) {
             if (obj instanceof BI.MultiSelectBar) {
-                self._joinAll(this.getValue(), function () {
+                self._joinAll(this.getValue(), () => {
                     assertShowValue();
-                    self.fireEvent(BI.MultiSelectCombo.EVENT_CLICK_ITEM);
+                    self.fireEvent(MultiSelectCombo.EVENT_CLICK_ITEM);
                 });
             } else {
-                self._join(this.getValue(), function () {
+                self._join(this.getValue(), () => {
                     assertShowValue();
-                    self.fireEvent(BI.MultiSelectCombo.EVENT_CLICK_ITEM);
+                    self.fireEvent(MultiSelectCombo.EVENT_CLICK_ITEM);
                 });
             }
             self._dataChange = true;
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () {
-            // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
-            // 只需要更新查看面板的selectedValue用以请求已选数据
-            self.numberCounter.updateSelectedValue(self.storeValue);
-        });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () {
+        this.trigger.on(
+            MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW,
+            () => {
+                // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
+                // 只需要更新查看面板的selectedValue用以请求已选数据
+                self.numberCounter.updateSelectedValue(self.storeValue);
+            }
+        );
+        this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => {
             if (!self.combo.isViewVisible()) {
                 self.combo.showView();
             }
         });
 
-        this.combo = BI.createWidget({
-            type: "bi.combo",
-            cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
+        this.combo = createWidget({
+            type: Combo.xtype,
+            cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius",
             toggle: !o.allowEdit,
             container: o.container,
             el: this.trigger,
             adjustLength: 1,
             popup: {
                 type: "bi.multi_select_popup_view",
-                ref: function () {
+                ref() {
                     self.popup = this;
                     self.trigger.setAdapter(this);
                     self.numberCounter.setAdapter(this);
                 },
-                listeners: [{
-                    eventName: BI.MultiSelectPopupView.EVENT_CHANGE,
-                    action: function () {
-                        self._dataChange = true;
-                        self.storeValue = this.getValue();
-                        self._adjust(function () {
-                            assertShowValue();
-                        });
-                        self.fireEvent(BI.MultiSelectCombo.EVENT_CLICK_ITEM);
-                    },
-                }, {
-                    eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM,
-                    action: function () {
-                        self._defaultState();
+                listeners: [
+                    {
+                        eventName: MultiSelectPopupView.EVENT_CHANGE,
+                        action() {
+                            self._dataChange = true;
+                            self.storeValue = this.getValue();
+                            self._adjust(() => {
+                                assertShowValue();
+                            });
+                            self.fireEvent(MultiSelectCombo.EVENT_CLICK_ITEM);
+                        },
                     },
-                }, {
-                    eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR,
-                    action: function () {
-                        self._dataChange = true;
-                        self.setValue();
-                        self._defaultState();
+                    {
+                        eventName: MultiSelectPopupView.EVENT_CLICK_CONFIRM,
+                        action() {
+                            self._defaultState();
+                        },
                     },
-                }],
+                    {
+                        eventName: MultiSelectPopupView.EVENT_CLICK_CLEAR,
+                        action() {
+                            self._dataChange = true;
+                            self.setValue();
+                            self._defaultState();
+                        },
+                    }
+                ],
                 itemsCreator: o.itemsCreator,
                 itemHeight: o.itemHeight,
                 valueFormatter: o.valueFormatter,
                 itemFormatter: o.itemFormatter,
-                onLoaded: function () {
-                    BI.nextTick(function () {
+                onLoaded() {
+                    nextTick(() => {
                         self.combo.adjustWidth();
                         self.combo.adjustHeight();
                         self.numberCounter.adjustView();
@@ -174,39 +231,37 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
                 },
             },
             value: o.value,
-            hideChecker: function (e) {
-                return triggerBtn.element.find(e.target).length === 0 && self.numberCounter.element.find(e.target).length === 0;
+            hideChecker(e) {
+                return (
+                    triggerBtn.element.find(e.target).length === 0 &&
+                    self.numberCounter.element.find(e.target).length === 0
+                );
             },
         });
 
-        this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
+        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
             if (!this.isViewVisible()) {
-                self._dataChange = false;// 标记数据是否发生变化
+                self._dataChange = false; // 标记数据是否发生变化
             }
             this.setValue(self.storeValue);
-            BI.nextTick(function () {
+            nextTick(() => {
                 self._populate();
             });
         });
         // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件
         this.wants2Quit = false;
-        this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
+        this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => {
             // important:关闭弹出时又可能没有退出编辑状态
             self._stopEditing();
             if (self.requesting === true) {
                 self.wants2Quit = true;
             } else {
-                self._dataChange && self.fireEvent(BI.MultiSelectCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiSelectCombo.EVENT_CONFIRM);
             }
         });
 
-        var triggerBtn = BI.createWidget({
-            type: "bi.trigger_icon_button",
-            width: o.height,
-            height: o.height,
-            cls: "multi-select-trigger-icon-button",
-        });
-        triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
+        triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
             self.numberCounter.hideView();
             if (self.combo.isViewVisible()) {
                 self.combo.hideView();
@@ -215,8 +270,8 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
             }
         });
 
-        this.numberCounter = BI.createWidget({
-            type: "bi.multi_select_check_selected_switcher",
+        this.numberCounter = createWidget({
+            type: MultiSelectCheckSelectedSwitcher.xtype,
             masker: {
                 offset: {
                     left: 0,
@@ -226,259 +281,274 @@ BI.MultiSelectCombo = BI.inherit(BI.Single, {
                 },
             },
             valueFormatter: o.valueFormatter,
-            itemsCreator: BI.bind(this._itemsCreator4Trigger, this),
+            itemsCreator: bind(this._itemsCreator4Trigger, this),
             value: this.storeValue,
         });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () {
-            if (!self.combo.isViewVisible()) {
-                self.combo.showView();
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
+            () => {
+                if (!self.combo.isViewVisible()) {
+                    self.combo.showView();
+                }
             }
-        });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () {
-            this.updateSelectedValue(self.storeValue);
-        });
-
-        this.numberCounter.on(BI.Events.VIEW, function (b) {
-            BI.nextTick(function () {// 自动调整宽度
-                self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
+        );
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
+            function () {
+                this.updateSelectedValue(self.storeValue);
+            }
+        );
+
+        this.numberCounter.on(Events.VIEW, b => {
+            nextTick(() => {
+                // 自动调整宽度
+                self.trigger.refreshPlaceHolderWidth(
+                    b === true ? self.numberCounter.element.outerWidth() + 8 : 0
+                );
             });
         });
 
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () {
-            BI.nextTick(function () {// 收起时自动调整宽度
-                self.trigger.refreshPlaceHolderWidth(0);
-            });
-        });
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
+            () => {
+                nextTick(() => {
+                    // 收起时自动调整宽度
+                    self.trigger.refreshPlaceHolderWidth(0);
+                });
+            }
+        );
 
-        this.trigger.element.click(function (e) {
+        this.trigger.element.click(e => {
             if (self.trigger.element.find(e.target).length > 0) {
                 self.numberCounter.hideView();
             }
         });
 
-        BI.createWidget({
-            type: "bi.absolute",
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
-                el: this.combo,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            }, {
-                el: triggerBtn,
-                right: 0,
-                top: 0,
-                bottom: 0,
-            }, {
-                el: {
-                    type: "bi.vertical_adapt",
-                    items: [this.numberCounter],
+            items: [
+                {
+                    el: this.combo,
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
                 },
-                right: o.height,
-                top: 0,
-                height: o.height,
-            }],
+                {
+                    el: triggerBtn,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                },
+                {
+                    el: {
+                        type: VerticalAdaptLayout.xtype,
+                        items: [this.numberCounter],
+                    },
+                    right: o.height,
+                    top: 0,
+                    height: o.height,
+                }
+            ],
         });
-    },
+    }
 
-    _itemsCreator4Trigger: function (op, callback) {
-        var self = this;
-        var o = this.options;
+    _itemsCreator4Trigger(op, callback) {
+        const self = this;
+        const o = this.options;
         o.itemsCreator(op, function (res) {
-            if (op.times === 1 && BI.isNotNull(op.keywords)) {
+            if (op.times === 1 && isNotNull(op.keywords)) {
                 // 预防trigger内部把当前的storeValue改掉
-                self.trigger.setValue(BI.deepClone(self.getValue()));
+                self.trigger.setValue(deepClone(self.getValue()));
             }
             callback.apply(self, arguments);
         });
-    },
+    }
 
-    _stopEditing: function () {
+    _stopEditing() {
         this.trigger.stopEditing();
         this.numberCounter.hideView();
-    },
+    }
 
-    _defaultState: function () {
+    _defaultState() {
         this._stopEditing();
         this.combo.hideView();
-    },
+    }
 
-    _assertValue: function (val) {
+    _assertValue(val) {
         val || (val = {});
         val.type || (val.type = BI.Selection.Multi);
         val.value || (val.value = []);
-    },
+    }
 
-    _makeMap: function (values) {
-        return BI.makeObject(values || []);
-    },
+    _makeMap(values) {
+        return makeObject(values || []);
+    }
 
-    _joinKeywords: function (keywords, callback) {
-        var self = this;
-        var o = this.options;
+    _joinKeywords(keywords, callback) {
+        const self = this;
+        const o = this.options;
         this._assertValue(this.storeValue);
         this.requesting = true;
-        o.itemsCreator({
-            type: BI.MultiSelectCombo.REQ_GET_ALL_DATA,
-            keywords: keywords,
-        }, function (ob) {
-            var values = BI.map(ob.items, "value");
-            digest(values);
-        });
+        o.itemsCreator(
+            {
+                type: MultiSelectCombo.REQ_GET_ALL_DATA,
+                keywords,
+            },
+            ob => {
+                const values = map(ob.items, "value");
+                digest(values);
+            }
+        );
 
         function digest(items) {
-            var selectedMap = self._makeMap(items);
-            BI.each(keywords, function (i, val) {
-                if (BI.isNotNull(selectedMap[val])) {
-                    self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val);
+            const selectedMap = self._makeMap(items);
+            each(keywords, (i, val) => {
+                if (isNotNull(selectedMap[val])) {
+                    self.storeValue.type === BI.Selection.Multi
+                        ? BI.pushDistinct(self.storeValue.value, val)
+                        : remove(self.storeValue.value, val);
                 }
             });
             self._adjust(callback);
         }
-    },
+    }
 
-    _joinAll: function (res, callback) {
-        var self = this;
-        var o = this.options;
+    _joinAll(res, callback) {
+        const tempMap = this._makeMap(this.storeValue.value);
+        const self = this;
+        const o = this.options;
         this._assertValue(res);
         this.requesting = true;
         if (this.storeValue.type === res.type) {
-            var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) {
-                return {
-                    text: o.valueFormatter(v) || v,
-                    value: v
-                };
-            }), this.trigger.getKey());
-            var change = false;
-            var map = this._makeMap(this.storeValue.value);
-            BI.each(BI.concat(result.match, result.find), function (i, obj) {
-                var v = obj.value;
-                if (BI.isNotNull(map[v])) {
+            const result = Func.getSearchResult(
+                map(this.storeValue.value, (_i, v) => {
+                    return {
+                        text: o.valueFormatter(v) || v,
+                        value: v,
+                    };
+                }),
+                this.trigger.getKey()
+            );
+            let change = false;
+            each(concat(result.match, result.find), (i, obj) => {
+                const v = obj.value;
+                if (isNotNull(tempMap[v])) {
                     change = true;
-                    self.storeValue.assist && self.storeValue.assist.push(map[v]);
-                    delete map[v];
+                    self.storeValue.assist &&
+                    self.storeValue.assist.push(tempMap[v]);
+                    delete tempMap[v];
                 }
             });
-            change && (this.storeValue.value = BI.values(map));
+            change && (this.storeValue.value = values(tempMap));
             this._adjust(callback);
+
             return;
         }
-        o.itemsCreator({
-            type: BI.MultiSelectCombo.REQ_GET_ALL_DATA,
-            keywords: [this.trigger.getKey()],
-            selectedValues: BI.filter(this.storeValue.value, function (_i, v) {
-                return !BI.contains(res.value, v);
-            }),
-        }, function (ob) {
-            var items = BI.map(ob.items, "value");
-            var selectedMap = self._makeMap(self.storeValue.value);
-            var notSelectedMap = self._makeMap(res.value);
-            var newItems = [];
-            BI.each(items, function (i, item) {
-                if (BI.isNotNull(selectedMap[items[i]])) {
-                    self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]);
-                    delete selectedMap[items[i]];
-                }
-                if (BI.isNull(notSelectedMap[items[i]])) {
-                    BI.remove(self.storeValue.assist, item);
-                    newItems.push(item);
-                }
-            });
-            self.storeValue.value = newItems.concat(BI.values(selectedMap));
-            self._adjust(callback);
-        });
-    },
+        o.itemsCreator(
+            {
+                type: MultiSelectCombo.REQ_GET_ALL_DATA,
+                keywords: [this.trigger.getKey()],
+                selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)),
+            },
+            ob => {
+                const items = map(ob.items, "value");
+                const selectedMap = self._makeMap(self.storeValue.value);
+                const notSelectedMap = self._makeMap(res.value);
+                const newItems = [];
+                each(items, (i, item) => {
+                    if (isNotNull(selectedMap[items[i]])) {
+                        self.storeValue.assist &&
+                        self.storeValue.assist.push(selectedMap[items[i]]);
+                        delete selectedMap[items[i]];
+                    }
+                    if (isNull(notSelectedMap[items[i]])) {
+                        remove(self.storeValue.assist, item);
+                        newItems.push(item);
+                    }
+                });
+                self.storeValue.value = newItems.concat(values(selectedMap));
+                self._adjust(callback);
+            }
+        );
+    }
 
-    _adjust: function (callback) {
-        var self = this;
-        var o = this.options;
+    _adjust(callback) {
+        const self = this;
         adjust();
         callback();
 
         function adjust() {
             if (self.wants2Quit === true) {
-                self._dataChange && self.fireEvent(BI.MultiSelectCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiSelectCombo.EVENT_CONFIRM);
                 self.wants2Quit = false;
             }
             self.requesting = false;
         }
-    },
+    }
 
-    _join: function (res, callback) {
-        var self = this;
-        var o = this.options;
+    _join(res, callback) {
+        const self = this;
         this._assertValue(res);
         this._assertValue(this.storeValue);
         if (this.storeValue.type === res.type) {
-            var map = this._makeMap(this.storeValue.value);
-            BI.each(res.value, function (i, v) {
+            const map = this._makeMap(this.storeValue.value);
+            each(res.value, (i, v) => {
                 if (!map[v]) {
                     BI.pushDistinct(self.storeValue.value, v);
-                    BI.remove(self.storeValue.assist, v);
+                    remove(self.storeValue.assist, v);
                     map[v] = v;
                 }
             });
-            var change = false;
-            BI.each(res.assist, function (i, v) {
-                if (BI.isNotNull(map[v])) {
+            let change = false;
+            each(res.assist, (i, v) => {
+                if (isNotNull(map[v])) {
                     change = true;
-                    self.storeValue.assist && self.storeValue.assist.push(map[v]);
+                    self.storeValue.assist &&
+                    self.storeValue.assist.push(map[v]);
                     delete map[v];
                 }
             });
-            change && (this.storeValue.value = BI.values(map));
+            change && (this.storeValue.value = values(map));
             self._adjust(callback);
 
             return;
         }
         this._joinAll(res, callback);
-    },
+    }
 
-    _setStartValue: function (value) {
+    _setStartValue(value) {
         this._startValue = value;
         this.popup.setStartValue(value);
-    },
+    }
 
-    _populate: function () {
-        this.combo.populate.apply(this.combo, arguments);
-    },
+    _populate() {
+        this.combo.populate(...arguments);
+    }
 
-    showView: function () {
+    showView() {
         this.combo.showView();
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this.combo.hideView();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.storeValue = v || {};
         this._assertValue(this.storeValue);
         this.combo.setValue(this.storeValue);
         this.numberCounter.setValue(this.storeValue);
-    },
-
-    getValue: function () {
-        return BI.deepClone(this.storeValue);
-    },
-
-    populate: function () {
-        this._populate.apply(this, arguments);
-        this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments);
-    },
-});
-
-BI.extend(BI.MultiSelectCombo, {
-    REQ_GET_DATA_LENGTH: 1,
-    REQ_GET_ALL_DATA: -1,
-});
-
-BI.MultiSelectCombo.EVENT_BLUR = "EVENT_BLUR";
-BI.MultiSelectCombo.EVENT_FOCUS = "EVENT_FOCUS";
-BI.MultiSelectCombo.EVENT_STOP = "EVENT_STOP";
-BI.MultiSelectCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiSelectCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
-BI.MultiSelectCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
-
-BI.shortcut("bi.multi_select_combo", BI.MultiSelectCombo);
+    }
+
+    getValue() {
+        return deepClone(this.storeValue);
+    }
+
+    populate() {
+        this._populate(...arguments);
+        this.numberCounter.populateSwitcher(...arguments);
+    }
+}

src/widget/multiselect/multiselect.combo.nobar.js

@@ -1,47 +1,95 @@
-/**
- *
- * @class BI.MultiSelectNoBarCombo
- * @extends BI.Single
- */
-BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectNoBarCombo.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    isKey,
+    remove,
+    deepClone,
+    createWidget,
+    toPix,
+    bind,
+    last,
+    initial,
+    nextTick,
+    Events,
+    AbsoluteLayout,
+    VerticalAdaptLayout,
+    isNotNull,
+    makeObject,
+    map,
+    each,
+    Func,
+    concat,
+    values,
+    filter,
+    contains,
+    isNull, pushDistinct, Selection
+} from "@/core";
+import { Single, Combo } from "@/base";
+import { MultiSelectBar, TriggerIconButton } from "@/case";
+import { MultiSelectTrigger } from "./multiselect.trigger";
+import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected";
+import { MultiSelectNoBarPopupView } from "@/widget/multiselect/multiselect.popup.view.nobar";
+
+@shortcut()
+export class MultiSelectNoBarCombo extends Single {
+    static xtype = "bi.multi_select_no_bar_combo";
+
+    static REQ_GET_DATA_LENGTH = "1";
+    static REQ_GET_ALL_DATA = "-1";
+    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-combo-no-bar",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
             itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             height: 24,
         });
-    },
+    }
+
+    _init() {
+        const self = this,
+            o = this.options;
+        super._init(...arguments);
+        const triggerBtn = createWidget({
+            type: TriggerIconButton.xtype,
+            width: o.height,
+            height: o.height,
+            cls: "multi-select-trigger-icon-button",
+        });
 
-    _init: function () {
-        var self = this, o = this.options;
-        BI.MultiSelectNoBarCombo.superclass._init.apply(this, arguments);
-        var assertShowValue = function () {
-            if (BI.isKey(self._startValue)) {
+        function assertShowValue() {
+            if (isKey(self._startValue)) {
                 if (self.storeValue.type === BI.Selection.All) {
-                    BI.remove(self.storeValue.value, self._startValue);
+                    remove(self.storeValue.value, self._startValue);
                     self.storeValue.assist = self.storeValue.assist || [];
-                    BI.pushDistinct(self.storeValue.assist, self._startValue);
+                    pushDistinct(self.storeValue.assist, self._startValue);
                 } else {
-                    BI.pushDistinct(self.storeValue.value, self._startValue);
-                    BI.remove(self.storeValue.assist, self._startValue);
+                    pushDistinct(self.storeValue.value, self._startValue);
+                    remove(self.storeValue.assist, self._startValue);
                 }
             }
             self.trigger.getSearcher().setState(self.storeValue);
             self.numberCounter.setButtonChecked(self.storeValue);
-        };
+        }
+
         this.storeValue = {
-            type: BI.Selection.Multi,
-            value: BI.deepClone(o.value) || []
+            type: Selection.Multi,
+            value: deepClone(o.value) || [],
         };
         // 标记正在请求数据
         this.requesting = false;
 
-        this.trigger = BI.createWidget({
-            type: "bi.multi_select_trigger",
-            height: BI.toPix(o.height, o.simple ? 1 : 2),
+        this.trigger = createWidget({
+            type: MultiSelectTrigger.xtype,
+            height: toPix(o.height, o.simple ? 1 : 2),
             text: o.text,
             defaultText: o.defaultText,
             masker: {
@@ -53,163 +101,171 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
                 },
             },
             valueFormatter: o.valueFormatter,
-            itemsCreator: BI.bind(this._itemsCreator4Trigger, this),
+            itemsCreator: bind(this._itemsCreator4Trigger, this),
             itemFormatter: o.itemFormatter,
             itemHeight: o.itemHeight,
             value: {
                 type: BI.Selection.Multi,
-                value: o.value
-            }
+                value: o.value,
+            },
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () {
-            self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_FOCUS);
+        this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
+            self.fireEvent(MultiSelectNoBarCombo.EVENT_FOCUS);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () {
-            self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_BLUR);
+        this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
+            self.fireEvent(MultiSelectNoBarCombo.EVENT_BLUR);
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
             self._setStartValue("");
             this.getSearcher().setValue(self.storeValue);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_STOP, () => {
             self._setStartValue("");
-            self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_STOP);
+            self.fireEvent(MultiSelectNoBarCombo.EVENT_STOP);
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function (keywords) {
-            var last = BI.last(keywords);
-            keywords = BI.initial(keywords || []);
-            if (keywords.length > 0) {
-                self._joinKeywords(keywords, function () {
-                    if (BI.endWith(last, BI.BlankSplitChar)) {
-                        self.combo.setValue(self.storeValue);
-                        assertShowValue();
-                        self.combo.populate();
-                        self._setStartValue("");
-                    } else {
-                        self.combo.setValue(self.storeValue);
-                        assertShowValue();
-                    }
-                    self._dataChange = true;
-                });
+        this.trigger.on(
+            MultiSelectTrigger.EVENT_SEARCHING,
+            keywords => {
+                const lastKeyword = last(keywords);
+                keywords = initial(keywords || []);
+                if (keywords.length > 0) {
+                    self._joinKeywords(keywords, () => {
+                        if (BI.endWith(lastKeyword, BI.BlankSplitChar)) {
+                            self.combo.setValue(self.storeValue);
+                            assertShowValue();
+                            self.combo.populate();
+                            self._setStartValue("");
+                        } else {
+                            self.combo.setValue(self.storeValue);
+                            assertShowValue();
+                        }
+                        self._dataChange = true;
+                    });
+                }
             }
-        });
+        );
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function (value, obj) {
-            if (obj instanceof BI.MultiSelectBar) {
-                self._joinAll(this.getValue(), function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function (value, obj) {
+            if (obj instanceof MultiSelectBar) {
+                self._joinAll(this.getValue(), () => {
                     assertShowValue();
                 });
             } else {
-                self._join(this.getValue(), function () {
+                self._join(this.getValue(), () => {
                     assertShowValue();
                 });
             }
             self._dataChange = true;
-            self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CLICK_ITEM);
-        });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () {
-            // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
-            // 只需要更新查看面板的selectedValue用以请求已选数据
-            self.numberCounter.updateSelectedValue(self.storeValue);
+            self.fireEvent(MultiSelectNoBarCombo.EVENT_CLICK_ITEM);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () {
+        this.trigger.on(
+            MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW,
+            () => {
+                // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
+                // 只需要更新查看面板的selectedValue用以请求已选数据
+                self.numberCounter.updateSelectedValue(self.storeValue);
+            }
+        );
+        this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => {
             if (!self.combo.isViewVisible()) {
                 self.combo.showView();
             }
         });
 
-        this.combo = BI.createWidget({
-            type: "bi.combo",
-            cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
+        this.combo = createWidget({
+            type: Combo.xtype,
+            cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius",
             toggle: false,
             container: o.container,
             el: this.trigger,
             adjustLength: 1,
             popup: {
-                type: "bi.multi_select_no_bar_popup_view",
-                ref: function () {
+                type: MultiSelectNoBarPopupView.xtype,
+                ref() {
                     self.popup = this;
                     self.trigger.setAdapter(this);
                     self.numberCounter.setAdapter(this);
                 },
                 listeners: [
                     {
-                        eventName: BI.MultiSelectPopupView.EVENT_CHANGE,
-                        action: function () {
+                        eventName: MultiSelectNoBarPopupView.EVENT_CHANGE,
+                        action() {
                             self._dataChange = true;
                             self.storeValue = this.getValue();
-                            self._adjust(function () {
+                            self._adjust(() => {
                                 assertShowValue();
                             });
-                            self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CLICK_ITEM);
-                        }
-                    }, {
-                        eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM,
-                        action: function () {
+                            self.fireEvent(
+                                MultiSelectNoBarCombo.EVENT_CLICK_ITEM
+                            );
+                        },
+                    },
+                    {
+                        eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM,
+                        action() {
                             self._defaultState();
-                        }
-                    }, {
-                        eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR,
-                        action: function () {
+                        },
+                    },
+                    {
+                        eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR,
+                        action() {
                             self._dataChange = true;
                             self.setValue();
                             self._defaultState();
-                        }
+                        },
                     }
                 ],
                 itemsCreator: o.itemsCreator,
                 itemHeight: o.itemHeight,
                 valueFormatter: o.valueFormatter,
                 itemFormatter: o.itemFormatter,
-                onLoaded: function () {
-                    BI.nextTick(function () {
+                onLoaded() {
+                    nextTick(() => {
                         self.combo.adjustWidth();
                         self.combo.adjustHeight();
                         self.numberCounter.adjustView();
                         self.trigger.getSearcher().adjustView();
                     });
-                }
+                },
             },
             value: {
                 type: BI.Selection.Multi,
-                value: o.value
+                value: o.value,
+            },
+            hideChecker(e) {
+                return (
+                    triggerBtn.element.find(e.target).length === 0 &&
+                    self.numberCounter.element.find(e.target).length === 0
+                );
             },
-            hideChecker: function (e) {
-                return triggerBtn.element.find(e.target).length === 0 && self.numberCounter.element.find(e.target).length === 0;
-            }
         });
 
-        this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
+        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
             if (!this.isViewVisible()) {
-                self._dataChange = false;// 标记数据是否发生变化
+                self._dataChange = false; // 标记数据是否发生变化
             }
             this.setValue(self.storeValue);
-            BI.nextTick(function () {
+            nextTick(() => {
                 self._populate();
             });
         });
         // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件
         this.wants2Quit = false;
-        this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
+        this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => {
             // important:关闭弹出时又可能没有退出编辑状态
             self._stopEditing();
             if (self.requesting === true) {
                 self.wants2Quit = true;
             } else {
-                self._dataChange && self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiSelectNoBarCombo.EVENT_CONFIRM);
             }
         });
 
-        var triggerBtn = BI.createWidget({
-            type: "bi.trigger_icon_button",
-            width: o.height,
-            height: o.height,
-            cls: "multi-select-trigger-icon-button"
-        });
-        triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
+        triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
             self.numberCounter.hideView();
             if (self.combo.isViewVisible()) {
                 self.combo.hideView();
@@ -218,8 +274,8 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
             }
         });
 
-        this.numberCounter = BI.createWidget({
-            type: "bi.multi_select_check_selected_switcher",
+        this.numberCounter = createWidget({
+            type: MultiSelectCheckSelectedSwitcher.xtype,
             masker: {
                 offset: {
                     left: 0,
@@ -229,41 +285,54 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
                 },
             },
             valueFormatter: o.valueFormatter,
-            itemsCreator: BI.bind(this._itemsCreator4Trigger, this),
+            itemsCreator: bind(this._itemsCreator4Trigger, this),
             value: {
                 type: BI.Selection.Multi,
-                value: o.value
-            }
+                value: o.value,
+            },
         });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () {
-            if (!self.combo.isViewVisible()) {
-                self.combo.showView();
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
+            () => {
+                if (!self.combo.isViewVisible()) {
+                    self.combo.showView();
+                }
             }
-        });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () {
-            this.updateSelectedValue(self.storeValue);
-        });
-
-        this.numberCounter.on(BI.Events.VIEW, function (b) {
-            BI.nextTick(function () {// 自动调整宽度
-                self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
+        );
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
+            function () {
+                this.updateSelectedValue(self.storeValue);
+            }
+        );
+
+        this.numberCounter.on(Events.VIEW, b => {
+            nextTick(() => {
+                // 自动调整宽度
+                self.trigger.refreshPlaceHolderWidth(
+                    b === true ? self.numberCounter.element.outerWidth() + 8 : 0
+                );
             });
         });
 
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () {
-            BI.nextTick(function () {// 收起时自动调整宽度
-                self.trigger.refreshPlaceHolderWidth(0);
-            });
-        });
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
+            () => {
+                nextTick(() => {
+                    // 收起时自动调整宽度
+                    self.trigger.refreshPlaceHolderWidth(0);
+                });
+            }
+        );
 
-        this.trigger.element.click(function (e) {
+        this.trigger.element.click(e => {
             if (self.trigger.element.find(e.target).length > 0) {
                 self.numberCounter.hideView();
             }
         });
 
-        BI.createWidget({
-            type: "bi.absolute",
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
             items: [
                 {
@@ -271,238 +340,247 @@ BI.MultiSelectNoBarCombo = BI.inherit(BI.Single, {
                     left: 0,
                     right: 0,
                     top: 0,
-                    bottom: 0
-                }, {
+                    bottom: 0,
+                },
+                {
                     el: triggerBtn,
                     right: 0,
                     top: 0,
-                    bottom: 0
-                }, {
+                    bottom: 0,
+                },
+                {
                     el: {
-                        type: "bi.vertical_adapt",
-                        items: [this.numberCounter]
+                        type: VerticalAdaptLayout.xtype,
+                        items: [this.numberCounter],
                     },
                     right: o.height,
                     top: 0,
-                    height: o.height
+                    height: o.height,
                 }
-            ]
+            ],
         });
-    },
+    }
 
-    _addItem: function (assertShowValue, matched) {
-        var self = this;
-        var keyword = this.trigger.getSearcher().getKeyword();
-        this._join({
-            type: BI.Selection.Multi,
-            value: [keyword]
-        }, function () {
-            // 如果在不选的状态下直接把该值添加进来
-            if (self.storeValue.type === BI.Selection.Multi) {
-                BI.pushDistinct(self.storeValue.value, keyword);
+    _addItem(assertShowValue, matched) {
+        const self = this;
+        const keyword = this.trigger.getSearcher().getKeyword();
+        this._join(
+            {
+                type: BI.Selection.Multi,
+                value: [keyword],
+            },
+            () => {
+                // 如果在不选的状态下直接把该值添加进来
+                if (self.storeValue.type === BI.Selection.Multi) {
+                    BI.pushDistinct(self.storeValue.value, keyword);
+                }
+                self.combo.setValue(self.storeValue);
+                self._setStartValue(keyword);
+                assertShowValue();
+                self.populate();
+                self._setStartValue("");
+                self._dataChange = true;
             }
-            self.combo.setValue(self.storeValue);
-            self._setStartValue(keyword);
-            assertShowValue();
-            self.populate();
-            self._setStartValue("");
-            self._dataChange = true;
-        });
-    },
+        );
+    }
 
-    _itemsCreator4Trigger: function (op, callback) {
-        var self = this, o = this.options;
+    _itemsCreator4Trigger(op, callback) {
+        const self = this,
+            o = this.options;
         o.itemsCreator(op, function (res) {
-            if (op.times === 1 && BI.isNotNull(op.keywords)) {
+            if (op.times === 1 && isNotNull(op.keywords)) {
                 // 预防trigger内部把当前的storeValue改掉
-                self.trigger.setValue(BI.deepClone(self.storeValue));
+                self.trigger.setValue(deepClone(self.storeValue));
             }
             callback.apply(self, arguments);
         });
-    },
+    }
 
-    _stopEditing: function () {
+    _stopEditing() {
         this.trigger.stopEditing();
         this.numberCounter.hideView();
-    },
+    }
 
-    _defaultState: function () {
+    _defaultState() {
         this._stopEditing();
         this.combo.hideView();
-    },
+    }
 
-    _assertValue: function (val) {
+    _assertValue(val) {
         val || (val = {});
         val.type || (val.type = BI.Selection.Multi);
         val.value || (val.value = []);
-    },
+    }
 
-    _makeMap: function (values) {
-        return BI.makeObject(values || []);
-    },
+    _makeMap(values) {
+        return makeObject(values || []);
+    }
 
-    _joinKeywords: function (keywords, callback) {
-        var self = this, o = this.options;
+    _joinKeywords(keywords, callback) {
+        const self = this,
+            o = this.options;
         this._assertValue(this.storeValue);
         this.requesting = true;
-        o.itemsCreator({
-            type: BI.MultiSelectNoBarCombo.REQ_GET_ALL_DATA,
-            keywords: keywords
-        }, function (ob) {
-            var values = BI.map(ob.items, "value");
-            digest(values);
-        });
+        o.itemsCreator(
+            {
+                type: MultiSelectNoBarCombo.REQ_GET_ALL_DATA,
+                keywords,
+            },
+            ob => {
+                const values = map(ob.items, "value");
+                digest(values);
+            }
+        );
 
         function digest(items) {
-            var selectedMap = self._makeMap(items);
-            BI.each(keywords, function (i, val) {
-                if (BI.isNotNull(selectedMap[val])) {
-                    self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val);
+            const selectedMap = self._makeMap(items);
+            each(keywords, (i, val) => {
+                if (isNotNull(selectedMap[val])) {
+                    self.storeValue.type === BI.Selection.Multi
+                        ? BI.pushDistinct(self.storeValue.value, val)
+                        : remove(self.storeValue.value, val);
                 }
             });
             self._adjust(callback);
         }
-    },
+    }
 
-    _joinAll: function (res, callback) {
-        var self = this, o = this.options;
+    _joinAll(res, callback) {
+        const self = this,
+            o = this.options;
         this._assertValue(res);
         this.requesting = true;
         if (this.storeValue.type === res.type) {
-            var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) {
-                return {
-                    text: o.valueFormatter(v) || v,
-                    value: v
-                };
-            }), this.trigger.getKey());
-            var change = false;
-            var map = this._makeMap(this.storeValue.value);
-            BI.each(BI.concat(result.match, result.find), function (i, obj) {
-                var v = obj.value;
-                if (BI.isNotNull(map[v])) {
+            const result = Func.getSearchResult(
+                map(this.storeValue.value, (_i, v) => {
+                    return {
+                        text: o.valueFormatter(v) || v,
+                        value: v,
+                    };
+                }),
+                this.trigger.getKey()
+            );
+            let change = false;
+            const tempMap = this._makeMap(this.storeValue.value);
+            each(concat(result.match, result.find), (i, obj) => {
+                const v = obj.value;
+                if (isNotNull(tempMap[v])) {
                     change = true;
-                    self.storeValue.assist && self.storeValue.assist.push(map[v]);
-                    delete map[v];
+                    self.storeValue.assist &&
+                    self.storeValue.assist.push(tempMap[v]);
+                    delete tempMap[v];
                 }
             });
-            change && (this.storeValue.value = BI.values(map));
+            change && (this.storeValue.value = values(tempMap));
             this._adjust(callback);
+
             return;
         }
-        o.itemsCreator({
-            type: BI.MultiSelectNoBarCombo.REQ_GET_ALL_DATA,
-            keywords: [this.trigger.getKey()],
-            selectedValues: BI.filter(this.storeValue.value, function (_i, v) {
-                return !BI.contains(res.value, v);
-            }),
-        }, function (ob) {
-            var items = BI.map(ob.items, "value");
-            var selectedMap = self._makeMap(self.storeValue.value);
-            var notSelectedMap = self._makeMap(res.value);
-            var newItems = [];
-            BI.each(items, function (i, item) {
-                if (BI.isNotNull(selectedMap[items[i]])) {
-                    self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]);
-                    delete selectedMap[items[i]];
-                }
-                if (BI.isNull(notSelectedMap[items[i]])) {
-                    BI.remove(self.storeValue.assist, item);
-                    newItems.push(item);
-                }
-            });
-            self.storeValue.value = newItems.concat(BI.values(selectedMap));
-            self._adjust(callback);
-        });
-    },
+        o.itemsCreator(
+            {
+                type: MultiSelectNoBarCombo.REQ_GET_ALL_DATA,
+                keywords: [this.trigger.getKey()],
+                selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)),
+            },
+            ob => {
+                const items = map(ob.items, "value");
+                const selectedMap = self._makeMap(self.storeValue.value);
+                const notSelectedMap = self._makeMap(res.value);
+                const newItems = [];
+                each(items, (i, item) => {
+                    if (isNotNull(selectedMap[items[i]])) {
+                        self.storeValue.assist &&
+                        self.storeValue.assist.push(selectedMap[items[i]]);
+                        delete selectedMap[items[i]];
+                    }
+                    if (isNull(notSelectedMap[items[i]])) {
+                        remove(self.storeValue.assist, item);
+                        newItems.push(item);
+                    }
+                });
+                self.storeValue.value = newItems.concat(values(selectedMap));
+                self._adjust(callback);
+            }
+        );
+    }
 
-    _adjust: function (callback) {
-        var self = this, o = this.options;
+    _adjust(callback) {
+        const self = this;
         adjust();
         callback();
 
         function adjust() {
             if (self.wants2Quit === true) {
-                self._dataChange && self.fireEvent(BI.MultiSelectNoBarCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiSelectNoBarCombo.EVENT_CONFIRM);
                 self.wants2Quit = false;
             }
             self.requesting = false;
         }
-    },
+    }
 
-    _join: function (res, callback) {
-        var self = this, o = this.options;
+    _join(res, callback) {
+        const self = this;
         this._assertValue(res);
         this._assertValue(this.storeValue);
         if (this.storeValue.type === res.type) {
-            var map = this._makeMap(this.storeValue.value);
-            BI.each(res.value, function (i, v) {
+            const map = this._makeMap(this.storeValue.value);
+            each(res.value, (i, v) => {
                 if (!map[v]) {
-                    BI.pushDistinct(self.storeValue.value, v);
-                    BI.remove(self.storeValue.assist, v);
+                    pushDistinct(self.storeValue.value, v);
+                    remove(self.storeValue.assist, v);
                     map[v] = v;
                 }
             });
-            var change = false;
-            BI.each(res.assist, function (i, v) {
-                if (BI.isNotNull(map[v])) {
+            let change = false;
+            each(res.assist, (i, v) => {
+                if (isNotNull(map[v])) {
                     change = true;
-                    self.storeValue.assist && self.storeValue.assist.push(map[v]);
+                    self.storeValue.assist &&
+                    self.storeValue.assist.push(map[v]);
                     delete map[v];
                 }
             });
-            change && (this.storeValue.value = BI.values(map));
+            change && (this.storeValue.value = values(map));
             self._adjust(callback);
+
             return;
         }
         this._joinAll(res, callback);
-    },
+    }
 
-    _setStartValue: function (value) {
+    _setStartValue(value) {
         this._startValue = value;
         this.popup.setStartValue(value);
-    },
+    }
 
-    _populate: function () {
-        this.combo.populate.apply(this.combo, arguments);
-    },
+    _populate() {
+        this.combo.populate(...arguments);
+    }
 
-    showView: function () {
+    showView() {
         this.combo.showView();
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this.combo.hideView();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.storeValue = {
             type: BI.Selection.Multi,
-            value: v || []
+            value: v || [],
         };
         this.combo.setValue(this.storeValue);
         this.numberCounter.setValue(this.storeValue);
-    },
-
-    getValue: function () {
-        return BI.deepClone(this.storeValue.value);
-    },
-
-    populate: function () {
-        this._populate.apply(this, arguments);
-        this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments);
     }
-});
-
-BI.extend(BI.MultiSelectNoBarCombo, {
-    REQ_GET_DATA_LENGTH: 1,
-    REQ_GET_ALL_DATA: -1
-});
 
-BI.MultiSelectNoBarCombo.EVENT_BLUR = "EVENT_BLUR";
-BI.MultiSelectNoBarCombo.EVENT_FOCUS = "EVENT_FOCUS";
-BI.MultiSelectNoBarCombo.EVENT_STOP = "EVENT_STOP";
-BI.MultiSelectNoBarCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiSelectNoBarCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
-BI.MultiSelectNoBarCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
+    getValue() {
+        return deepClone(this.storeValue.value);
+    }
 
-BI.shortcut("bi.multi_select_no_bar_combo", BI.MultiSelectNoBarCombo);
+    populate() {
+        this._populate(...arguments);
+        this.numberCounter.populateSwitcher(...arguments);
+    }
+}

src/widget/multiselect/multiselect.insert.combo.js

@@ -1,46 +1,96 @@
-/**
- *
- * @class BI.MultiSelectInsertCombo
- * @extends BI.Single
- */
-BI.MultiSelectInsertCombo = BI.inherit(BI.Single, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectInsertCombo.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    isKey,
+    remove,
+    deepClone,
+    createWidget,
+    toPix,
+    bind,
+    last,
+    initial,
+    i18nText,
+    nextTick,
+    Events,
+    AbsoluteLayout,
+    VerticalAdaptLayout,
+    isNotNull,
+    makeObject,
+    each,
+    Func,
+    map,
+    concat,
+    values,
+    filter,
+    contains,
+    isNull, endWith, pushDistinct, Selection
+} from "@/core";
+import { Single, Combo, Msg } from "@/base";
+import { MultiSelectInsertTrigger } from "./multiselect.insert.trigger";
+import { MultiSelectPopupView } from "./multiselect.popup.view";
+import { MultiSelectBar, TriggerIconButton } from "@/case";
+import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected";
+
+@shortcut()
+export class MultiSelectInsertCombo extends Single {
+    static xtype = "bi.multi_select_insert_combo";
+
+    static REQ_GET_DATA_LENGTH = "1";
+    static REQ_GET_ALL_DATA = "-1";
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+    static EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-insert-combo",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
             height: 24,
             itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-            allowEdit: true
+            allowEdit: true,
         });
-    },
-
-    _init: function () {
-        var self = this, o = this.options;
-        BI.MultiSelectInsertCombo.superclass._init.apply(this, arguments);
-        var assertShowValue = function () {
-            if (BI.isKey(self._startValue)) {
-                if (self.storeValue.type === BI.Selection.All) {
-                    BI.remove(self.storeValue.value, self._startValue);
+    }
+
+    _init() {
+        const self = this,
+            o = this.options;
+        super._init(...arguments);
+        const triggerBtn = createWidget({
+            type: TriggerIconButton.xtype,
+            width: o.height,
+            height: o.height,
+            cls: "multi-select-trigger-icon-button",
+        });
+
+        function assertShowValue() {
+            if (isKey(self._startValue)) {
+                if (self.storeValue.type === Selection.All) {
+                    remove(self.storeValue.value, self._startValue);
                     self.storeValue.assist = self.storeValue.assist || [];
-                    BI.pushDistinct(self.storeValue.assist, self._startValue);
+                    pushDistinct(self.storeValue.assist, self._startValue);
                 } else {
-                    BI.pushDistinct(self.storeValue.value, self._startValue);
-                    BI.remove(self.storeValue.assist, self._startValue);
+                    pushDistinct(self.storeValue.value, self._startValue);
+                    remove(self.storeValue.assist, self._startValue);
                 }
             }
             self.trigger.getSearcher().setState(self.storeValue);
             self.numberCounter.setButtonChecked(self.storeValue);
-        };
-        this.storeValue = BI.deepClone(o.value) || {};
+        }
+
+        this.storeValue = deepClone(o.value) || {};
         // 标记正在请求数据
         this.requesting = false;
 
-        this.trigger = BI.createWidget({
+        this.trigger = createWidget({
             type: "bi.multi_select_insert_trigger",
             allowEdit: o.allowEdit,
-            height: BI.toPix(o.height, o.simple ? 1 : 2),
+            height: toPix(o.height, o.simple ? 1 : 2),
             text: o.text,
             watermark: o.watermark,
             defaultText: o.defaultText,
@@ -50,168 +100,188 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, {
                     left: 0,
                     top: 0,
                     right: 0,
-                    bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1
-                }
+                    bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
+                },
             },
             valueFormatter: o.valueFormatter,
-            itemsCreator: BI.bind(this._itemsCreator4Trigger, this),
+            itemsCreator: bind(this._itemsCreator4Trigger, this),
             itemFormatter: o.itemFormatter,
             itemHeight: o.itemHeight,
             value: this.storeValue,
         });
 
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_FOCUS, function () {
-            self.fireEvent(BI.MultiSelectInsertCombo.EVENT_FOCUS);
+        this.trigger.on(MultiSelectInsertTrigger.EVENT_FOCUS, () => {
+            self.fireEvent(MultiSelectInsertCombo.EVENT_FOCUS);
         });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_BLUR, function () {
-            self.fireEvent(BI.MultiSelectInsertCombo.EVENT_BLUR);
+        this.trigger.on(MultiSelectInsertTrigger.EVENT_BLUR, () => {
+            self.fireEvent(MultiSelectInsertCombo.EVENT_BLUR);
         });
 
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_START, function () {
+        this.trigger.on(MultiSelectInsertTrigger.EVENT_START, function () {
             self._setStartValue("");
             this.getSearcher().setValue(self.storeValue);
         });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_STOP, function () {
+        this.trigger.on(MultiSelectInsertTrigger.EVENT_STOP, () => {
             self._setStartValue("");
-            self.fireEvent(BI.MultiSelectInsertCombo.EVENT_STOP);
+            self.fireEvent(MultiSelectInsertCombo.EVENT_STOP);
         });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_PAUSE, function () {
+        this.trigger.on(MultiSelectInsertTrigger.EVENT_PAUSE, function () {
             self._addItem(assertShowValue, true);
-            self.fireEvent(BI.MultiSelectInsertCombo.EVENT_ADD_ITEM, this.getSearcher().getKeyword());
+            self.fireEvent(
+                MultiSelectInsertCombo.EVENT_ADD_ITEM,
+                this.getSearcher().getKeyword()
+            );
         });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_SEARCHING, function (keywords) {
-            var last = BI.last(keywords);
-            keywords = BI.initial(keywords || []);
-            if (keywords.length > 0) {
-                self._joinKeywords(keywords, function () {
-                    if (BI.endWith(last, BI.BlankSplitChar)) {
-                        self.combo.setValue(self.storeValue);
+        this.trigger.on(
+            MultiSelectInsertTrigger.EVENT_SEARCHING,
+            function (keywords) {
+                const lastKeyword = last(keywords);
+                keywords = initial(keywords || []);
+                if (keywords.length > 0) {
+                    self._joinKeywords(keywords, () => {
+                        if (endWith(lastKeyword, BI.BlankSplitChar)) {
+                            self.combo.setValue(self.storeValue);
+                            assertShowValue();
+                            self.combo.populate();
+                            self._setStartValue("");
+                        } else {
+                            self.combo.setValue(self.storeValue);
+                            assertShowValue();
+                        }
+                        self._dataChange = true;
+                    });
+                    this.getSearcher().getKeywordsLength() > 2000 &&
+                    Msg.alert(
+                        i18nText("BI-Basic_Prompt"),
+                        i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand")
+                    );
+                }
+                self.fireEvent(MultiSelectInsertCombo.EVENT_SEARCHING);
+            }
+        );
+
+        this.trigger.on(
+            MultiSelectInsertTrigger.EVENT_CHANGE,
+            function (value, obj) {
+                if (obj instanceof MultiSelectBar) {
+                    self._joinAll(this.getValue(), () => {
                         assertShowValue();
-                        self.combo.populate();
-                        self._setStartValue("");
-                    } else {
-                        self.combo.setValue(self.storeValue);
+                        self.fireEvent(MultiSelectInsertCombo.EVENT_CLICK_ITEM);
+                    });
+                } else {
+                    self._join(this.getValue(), () => {
                         assertShowValue();
-                    }
-                    self._dataChange = true;
-                });
-                this.getSearcher().getKeywordsLength() > 2000 && BI.Msg.alert(BI.i18nText("BI-Basic_Prompt"), BI.i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand"));
+                        self.fireEvent(MultiSelectInsertCombo.EVENT_CLICK_ITEM);
+                    });
+                }
+                self._dataChange = true;
             }
-            self.fireEvent(BI.MultiSelectInsertCombo.EVENT_SEARCHING);
-        });
-
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_CHANGE, function (value, obj) {
-            if (obj instanceof BI.MultiSelectBar) {
-                self._joinAll(this.getValue(), function () {
-                    assertShowValue();
-                    self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM);
-                });
-            } else {
-                self._join(this.getValue(), function () {
-                    assertShowValue();
-                    self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM);
-                });
+        );
+        this.trigger.on(
+            MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW,
+            () => {
+                // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
+                // 只需要更新查看面板的selectedValue用以请求已选数据
+                self.numberCounter.updateSelectedValue(self.storeValue);
             }
-            self._dataChange = true;
-        });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () {
-            // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
-            // 只需要更新查看面板的selectedValue用以请求已选数据
-            self.numberCounter.updateSelectedValue(self.storeValue);
-        });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_COUNTER_CLICK, function () {
-            if (!self.combo.isViewVisible()) {
-                self.combo.showView();
+        );
+        this.trigger.on(
+            MultiSelectInsertTrigger.EVENT_COUNTER_CLICK,
+            () => {
+                if (!self.combo.isViewVisible()) {
+                    self.combo.showView();
+                }
             }
-        });
+        );
 
-        this.combo = BI.createWidget({
-            type: "bi.combo",
-            cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
+        this.combo = createWidget({
+            type: Combo.xtype,
+            cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius",
             toggle: !o.allowEdit,
             el: this.trigger,
             adjustLength: 1,
             container: o.container,
             popup: {
                 type: "bi.multi_select_popup_view",
-                ref: function () {
+                ref() {
                     self.popup = this;
                     self.trigger.setAdapter(this);
                     self.numberCounter.setAdapter(this);
                 },
                 listeners: [
                     {
-                        eventName: BI.MultiSelectPopupView.EVENT_CHANGE,
-                        action: function () {
+                        eventName: MultiSelectPopupView.EVENT_CHANGE,
+                        action() {
                             self._dataChange = true;
                             self.storeValue = this.getValue();
-                            self._adjust(function () {
+                            self._adjust(() => {
                                 assertShowValue();
                             });
-                            self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM);
-                        }
-                    }, {
-                        eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM,
-                        action: function () {
+                            self.fireEvent(
+                                MultiSelectInsertCombo.EVENT_CLICK_ITEM
+                            );
+                        },
+                    },
+                    {
+                        eventName: MultiSelectPopupView.EVENT_CLICK_CONFIRM,
+                        action() {
                             self._defaultState();
-                        }
-                    }, {
-                        eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR,
-                        action: function () {
+                        },
+                    },
+                    {
+                        eventName: MultiSelectPopupView.EVENT_CLICK_CLEAR,
+                        action() {
                             self._dataChange = true;
                             self.setValue();
                             self._defaultState();
-                        }
+                        },
                     }
                 ],
                 itemsCreator: o.itemsCreator,
                 valueFormatter: o.valueFormatter,
                 itemFormatter: o.itemFormatter,
                 itemHeight: o.itemHeight,
-                onLoaded: function () {
-                    BI.nextTick(function () {
+                onLoaded() {
+                    nextTick(() => {
                         self.combo.adjustWidth();
                         self.combo.adjustHeight();
                         self.numberCounter.adjustView();
                         self.trigger.getSearcher().adjustView();
                     });
-                }
+                },
             },
             value: o.value,
-            hideChecker: function (e) {
-                return triggerBtn.element.find(e.target).length === 0 &&
-                    self.numberCounter.element.find(e.target).length === 0;
-            }
+            hideChecker(e) {
+                return (
+                    triggerBtn.element.find(e.target).length === 0 &&
+                    self.numberCounter.element.find(e.target).length === 0
+                );
+            },
         });
 
-        this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
+        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
             if (!this.isViewVisible()) {
-                self._dataChange = false;// 标记数据是否发生变化
+                self._dataChange = false; // 标记数据是否发生变化
             }
             this.setValue(self.storeValue);
-            BI.nextTick(function () {
+            nextTick(() => {
                 self._populate();
             });
         });
         // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件
         this.wants2Quit = false;
-        this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
+        this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => {
             // important:关闭弹出时又可能没有退出编辑状态
             self._stopEditing();
             if (self.requesting === true) {
                 self.wants2Quit = true;
             } else {
-                self._dataChange && self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiSelectInsertCombo.EVENT_CONFIRM);
             }
         });
 
-        var triggerBtn = BI.createWidget({
-            type: "bi.trigger_icon_button",
-            width: o.height,
-            height: o.height,
-            cls: "multi-select-trigger-icon-button"
-        });
-        triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
+        triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
             self.numberCounter.hideView();
             if (self.combo.isViewVisible()) {
                 self.combo.hideView();
@@ -220,49 +290,62 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, {
             }
         });
 
-        this.numberCounter = BI.createWidget({
-            type: "bi.multi_select_check_selected_switcher",
+        this.numberCounter = createWidget({
+            type: MultiSelectCheckSelectedSwitcher.xtype,
             masker: {
                 offset: {
                     left: 0,
                     top: 0,
                     right: 0,
-                    bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1
-                }
+                    bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
+                },
             },
             valueFormatter: o.valueFormatter,
-            itemsCreator: BI.bind(this._itemsCreator4Trigger, this),
-            value: o.value
+            itemsCreator: bind(this._itemsCreator4Trigger, this),
+            value: o.value,
         });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () {
-            if (!self.combo.isViewVisible()) {
-                self.combo.showView();
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
+            () => {
+                if (!self.combo.isViewVisible()) {
+                    self.combo.showView();
+                }
             }
-        });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () {
-            this.updateSelectedValue(self.storeValue);
-        });
-
-        this.numberCounter.on(BI.Events.VIEW, function (b) {
-            BI.nextTick(function () {// 自动调整宽度
-                self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
+        );
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
+            function () {
+                this.updateSelectedValue(self.storeValue);
+            }
+        );
+
+        this.numberCounter.on(Events.VIEW, b => {
+            nextTick(() => {
+                // 自动调整宽度
+                self.trigger.refreshPlaceHolderWidth(
+                    b === true ? self.numberCounter.element.outerWidth() + 8 : 0
+                );
             });
         });
 
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () {
-            BI.nextTick(function () {// 收起时自动调整宽度
-                self.trigger.refreshPlaceHolderWidth(0);
-            });
-        });
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
+            () => {
+                nextTick(() => {
+                    // 收起时自动调整宽度
+                    self.trigger.refreshPlaceHolderWidth(0);
+                });
+            }
+        );
 
-        this.trigger.element.click(function (e) {
+        this.trigger.element.click(e => {
             if (self.trigger.element.find(e.target).length > 0) {
                 self.numberCounter.hideView();
             }
         });
 
-        BI.createWidget({
-            type: "bi.absolute",
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
             items: [
                 {
@@ -270,230 +353,234 @@ BI.MultiSelectInsertCombo = BI.inherit(BI.Single, {
                     left: 0,
                     right: 0,
                     top: 0,
-                    bottom: 0
-                }, {
+                    bottom: 0,
+                },
+                {
                     el: triggerBtn,
                     right: 0,
                     top: 0,
-                    bottom: 0
-                }, {
+                    bottom: 0,
+                },
+                {
                     el: {
-                        type: "bi.vertical_adapt",
-                        items: [this.numberCounter]
+                        type: VerticalAdaptLayout.xtype,
+                        items: [this.numberCounter],
                     },
                     right: o.height,
                     top: 0,
                     height: o.height,
                 }
-            ]
+            ],
         });
-    },
+    }
 
-    _itemsCreator4Trigger: function (op, callback) {
-        var self = this, o = this.options;
+    _itemsCreator4Trigger(op, callback) {
+        const self = this,
+            o = this.options;
         o.itemsCreator(op, function (res) {
-            if (op.times === 1 && BI.isNotNull(op.keywords)) {
+            if (op.times === 1 && isNotNull(op.keywords)) {
                 // 预防trigger内部把当前的storeValue改掉
-                self.trigger.setValue(BI.deepClone(self.getValue()));
+                self.trigger.setValue(deepClone(self.getValue()));
             }
             callback.apply(self, arguments);
         });
-    },
-
-    _addItem: function (assertShowValue) {
-        var self = this;
-        var keyword = this.trigger.getSearcher().getKeyword();
-        this._join({
-            type: BI.Selection.Multi,
-            value: [keyword]
-        }, function () {
-            // 如果在不选的状态下直接把该值添加进来
-            if (self.storeValue.type === BI.Selection.Multi) {
-                BI.pushDistinct(self.storeValue.value, keyword);
+    }
+
+    _addItem(assertShowValue) {
+        const self = this;
+        const keyword = this.trigger.getSearcher().getKeyword();
+        this._join(
+            {
+                type: Selection.Multi,
+                value: [keyword],
+            },
+            () => {
+                // 如果在不选的状态下直接把该值添加进来
+                if (self.storeValue.type === Selection.Multi) {
+                    pushDistinct(self.storeValue.value, keyword);
+                }
+                self.combo.setValue(self.storeValue);
+                self._setStartValue(keyword);
+                assertShowValue();
+                self.populate();
+                self._setStartValue("");
+                self._dataChange = true;
             }
-            self.combo.setValue(self.storeValue);
-            self._setStartValue(keyword);
-            assertShowValue();
-            self.populate();
-            self._setStartValue("");
-            self._dataChange = true;
-        });
-    },
+        );
+    }
 
-    _stopEditing: function () {
+    _stopEditing() {
         this.trigger.stopEditing();
         this.numberCounter.hideView();
-    },
+    }
 
-    _defaultState: function () {
+    _defaultState() {
         this._stopEditing();
         this.combo.hideView();
-    },
+    }
 
-    _assertValue: function (val) {
+    _assertValue(val) {
         val || (val = {});
-        val.type || (val.type = BI.Selection.Multi);
+        val.type || (val.type = Selection.Multi);
         val.value || (val.value = []);
-    },
+    }
 
-    _makeMap: function (values) {
-        return BI.makeObject(values || []);
-    },
+    _makeMap(values) {
+        return makeObject(values || []);
+    }
 
-    _joinKeywords: function (keywords, callback) {
-        var self = this, o = this.options;
+    _joinKeywords(keywords, callback) {
+        const self = this;
         this._assertValue(this.storeValue);
         this.requesting = true;
 
         digest();
 
         function digest() {
-            BI.each(keywords, function (i, val) {
-                self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val);
+            each(keywords, (i, val) => {
+                self.storeValue.type === Selection.Multi
+                    ? pushDistinct(self.storeValue.value, val)
+                    : remove(self.storeValue.value, val);
             });
             self._adjust(callback);
         }
-    },
+    }
 
-    _joinAll: function (res, callback) {
-        var self = this, o = this.options;
+    _joinAll(res, callback) {
+        const self = this,
+            o = this.options;
         this._assertValue(res);
         this.requesting = true;
         if (this.storeValue.type === res.type) {
-            var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) {
-                return {
-                    text: o.valueFormatter(v) || v,
-                    value: v
-                };
-            }), this.trigger.getKey());
-            var change = false;
-            var map = this._makeMap(this.storeValue.value);
-            BI.each(BI.concat(result.match, result.find), function (i, obj) {
-                var v = obj.value;
-                if (BI.isNotNull(map[v])) {
+            const result = Func.getSearchResult(
+                map(this.storeValue.value, (_i, v) => {
+                    return {
+                        text: o.valueFormatter(v) || v,
+                        value: v,
+                    };
+                }),
+                this.trigger.getKey()
+            );
+            let change = false;
+            const tempMap = this._makeMap(this.storeValue.value);
+            each(concat(result.match, result.find), (i, obj) => {
+                const v = obj.value;
+                if (isNotNull(tempMap[v])) {
                     change = true;
-                    self.storeValue.assist && self.storeValue.assist.push(map[v]);
-                    delete map[v];
+                    self.storeValue.assist &&
+                    self.storeValue.assist.push(tempMap[v]);
+                    delete tempMap[v];
                 }
             });
-            change && (this.storeValue.value = BI.values(map));
+            change && (this.storeValue.value = values(tempMap));
             this._adjust(callback);
+
             return;
         }
-        o.itemsCreator({
-            type: BI.MultiSelectInsertCombo.REQ_GET_ALL_DATA,
-            keywords: [this.trigger.getKey()],
-            selectedValues: BI.filter(this.storeValue.value, function (_i, v) {
-                return !BI.contains(res.value, v);
-            }),
-        }, function (ob) {
-            var items = BI.map(ob.items, "value");
-            var selectedMap = self._makeMap(self.storeValue.value);
-            var notSelectedMap = self._makeMap(res.value);
-            var newItems = [];
-            BI.each(items, function (i, item) {
-                if (BI.isNotNull(selectedMap[items[i]])) {
-                    self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]);
-                    delete selectedMap[items[i]];
-                }
-                if (BI.isNull(notSelectedMap[items[i]])) {
-                    BI.remove(self.storeValue.assist, item);
-                    newItems.push(item);
-                }
-            });
-            self.storeValue.value = newItems.concat(BI.values(selectedMap));
-            self._adjust(callback);
-        });
-    },
+        o.itemsCreator(
+            {
+                type: MultiSelectInsertCombo.REQ_GET_ALL_DATA,
+                keywords: [this.trigger.getKey()],
+                selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)),
+            },
+            ob => {
+                const items = map(ob.items, "value");
+                const selectedMap = self._makeMap(self.storeValue.value);
+                const notSelectedMap = self._makeMap(res.value);
+                const newItems = [];
+                each(items, (i, item) => {
+                    if (isNotNull(selectedMap[items[i]])) {
+                        self.storeValue.assist &&
+                        self.storeValue.assist.push(selectedMap[items[i]]);
+                        delete selectedMap[items[i]];
+                    }
+                    if (isNull(notSelectedMap[items[i]])) {
+                        remove(self.storeValue.assist, item);
+                        newItems.push(item);
+                    }
+                });
+                self.storeValue.value = newItems.concat(values(selectedMap));
+                self._adjust(callback);
+            }
+        );
+    }
 
-    _adjust: function (callback) {
-        var self = this, o = this.options;
+    _adjust(callback) {
+        const self = this;
         adjust();
         callback();
 
         function adjust() {
             if (self.wants2Quit === true) {
-                self._dataChange && self.fireEvent(BI.MultiSelectInsertCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiSelectInsertCombo.EVENT_CONFIRM);
                 self.wants2Quit = false;
             }
             self.requesting = false;
         }
-    },
+    }
 
-    _join: function (res, callback) {
-        var self = this, o = this.options;
+    _join(res, callback) {
+        const self = this;
         this._assertValue(res);
         this._assertValue(this.storeValue);
         if (this.storeValue.type === res.type) {
-            var map = this._makeMap(this.storeValue.value);
-            BI.each(res.value, function (i, v) {
+            const map = this._makeMap(this.storeValue.value);
+            each(res.value, (i, v) => {
                 if (!map[v]) {
-                    BI.pushDistinct(self.storeValue.value, v);
+                    pushDistinct(self.storeValue.value, v);
                     // value更新的时候assist也需要更新
-                    BI.remove(self.storeValue.assist, v);
+                    remove(self.storeValue.assist, v);
                     map[v] = v;
                 }
             });
-            var change = false;
-            BI.each(res.assist, function (i, v) {
-                if (BI.isNotNull(map[v])) {
+            let change = false;
+            each(res.assist, (i, v) => {
+                if (isNotNull(map[v])) {
                     change = true;
-                    self.storeValue.assist && self.storeValue.assist.push(map[v]);
+                    self.storeValue.assist &&
+                    self.storeValue.assist.push(map[v]);
                     delete map[v];
                 }
             });
-            change && (this.storeValue.value = BI.values(map));
+            change && (this.storeValue.value = values(map));
             self._adjust(callback);
+
             return;
         }
         this._joinAll(res, callback);
-    },
+    }
 
-    _setStartValue: function (value) {
+    _setStartValue(value) {
         this._startValue = value;
         this.popup.setStartValue(value);
-    },
+    }
 
-    _populate: function () {
-        this.combo.populate.apply(this.combo, arguments);
-    },
+    _populate() {
+        this.combo.populate(...arguments);
+    }
 
-    showView: function () {
+    showView() {
         this.combo.showView();
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this.combo.hideView();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.storeValue = v || {};
         this._assertValue(this.storeValue);
         this.combo.setValue(this.storeValue);
         this.numberCounter.setValue(this.storeValue);
-    },
+    }
 
-    getValue: function () {
-        return BI.deepClone(this.storeValue);
-    },
+    getValue() {
+        return deepClone(this.storeValue);
+    }
 
-    populate: function () {
-        this._populate.apply(this, arguments);
-        this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments);
+    populate() {
+        this._populate(...arguments);
+        this.numberCounter.populateSwitcher(...arguments);
     }
-});
-
-BI.extend(BI.MultiSelectInsertCombo, {
-    REQ_GET_DATA_LENGTH: 1,
-    REQ_GET_ALL_DATA: -1
-});
-
-BI.MultiSelectInsertCombo.EVENT_FOCUS = "EVENT_FOCUS";
-BI.MultiSelectInsertCombo.EVENT_BLUR = "EVENT_BLUR";
-BI.MultiSelectInsertCombo.EVENT_STOP = "EVENT_STOP";
-BI.MultiSelectInsertCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiSelectInsertCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
-BI.MultiSelectInsertCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.MultiSelectInsertCombo.EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
-
-BI.shortcut("bi.multi_select_insert_combo", BI.MultiSelectInsertCombo);
+}

src/widget/multiselect/multiselect.insert.combo.nobar.js

@@ -1,47 +1,92 @@
-/**
- *
- * @class BI.MultiSelectInsertCombo
- * @extends BI.Single
- */
-BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectInsertNoBarCombo.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    isKey,
+    remove,
+    deepClone,
+    createWidget,
+    toPix,
+    bind,
+    last,
+    initial,
+    i18nText,
+    nextTick,
+    Events,
+    AbsoluteLayout,
+    VerticalAdaptLayout,
+    isNotNull,
+    makeObject,
+    each,
+    Func,
+    map,
+    concat,
+    values,
+    filter,
+    contains,
+    isNull, endWith, pushDistinct, Selection
+} from "@/core";
+import { Single, Combo, Msg } from "@/base";
+import { MultiSelectInsertTrigger } from "./multiselect.insert.trigger";
+import { MultiSelectBar, TriggerIconButton } from "@/case";
+import { MultiSelectCheckSelectedSwitcher } from "./trigger/switcher.checkselected";
+import { MultiSelectNoBarPopupView } from "./multiselect.popup.view.nobar";
+
+@shortcut()
+export class MultiSelectInsertNoBarCombo extends Single {
+    static xtype = "bi.multi_select_insert_no_bar_combo";
+
+    static REQ_GET_DATA_LENGTH = "1";
+    static REQ_GET_ALL_DATA = "-1";
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+    static EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-insert-combo-no-bar",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
             itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             height: 24,
         });
-    },
-
-    _init: function () {
-        var self = this, o = this.options;
-        BI.MultiSelectInsertNoBarCombo.superclass._init.apply(this, arguments);
-        var assertShowValue = function () {
-            if (BI.isKey(self._startValue)) {
-                if (self.storeValue.type === BI.Selection.All) {
-                    BI.remove(self.storeValue.value, self._startValue);
+    }
+
+    _init() {
+        const self = this,
+            o = this.options;
+        super._init(...arguments);
+        const triggerBtn = createWidget({
+            type: TriggerIconButton.xtype,
+            width: o.height,
+            height: o.height,
+            cls: "multi-select-trigger-icon-button",
+        });
+
+        function assertShowValue() {
+            if (isKey(self._startValue)) {
+                if (self.storeValue.type === Selection.All) {
+                    remove(self.storeValue.value, self._startValue);
                     self.storeValue.assist = self.storeValue.assist || [];
-                    BI.pushDistinct(self.storeValue.assist, self._startValue);
+                    pushDistinct(self.storeValue.assist, self._startValue);
                 } else {
-                    BI.pushDistinct(self.storeValue.value, self._startValue);
-                    BI.remove(self.storeValue.assist, self._startValue);
+                    pushDistinct(self.storeValue.value, self._startValue);
+                    remove(self.storeValue.assist, self._startValue);
                 }
             }
             self.trigger.getSearcher().setState(self.storeValue);
             self.numberCounter.setButtonChecked(self.storeValue);
-        };
+        }
+
         this.storeValue = {
-            type: BI.Selection.Multi,
-            value: BI.deepClone(o.value) || []
+            type: Selection.Multi,
+            value: deepClone(o.value) || [],
         };
         // 标记正在请求数据
         this.requesting = false;
 
-        this.trigger = BI.createWidget({
-            type: "bi.multi_select_insert_trigger",
-            height: BI.toPix(o.height, o.simple ? 1 : 2),
+        this.trigger = createWidget({
+            type: MultiSelectInsertTrigger.xtype,
+            height: toPix(o.height, o.simple ? 1 : 2),
             text: o.text,
             // adapter: this.popup,
             masker: {
@@ -49,161 +94,179 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, {
                     left: 0,
                     top: 0,
                     right: 0,
-                    bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1
-                }
+                    bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
+                },
             },
             valueFormatter: o.valueFormatter,
-            itemsCreator: BI.bind(this._itemsCreator4Trigger, this),
+            itemsCreator: bind(this._itemsCreator4Trigger, this),
             itemFormatter: o.itemFormatter,
             itemHeight: o.itemHeight,
             value: {
-                type: BI.Selection.Multi,
-                value: o.value
-            }
+                type: Selection.Multi,
+                value: o.value,
+            },
         });
 
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_START, function () {
+        this.trigger.on(MultiSelectInsertTrigger.EVENT_START, function () {
             self._setStartValue("");
             this.getSearcher().setValue(self.storeValue);
         });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_STOP, function () {
+        this.trigger.on(MultiSelectInsertTrigger.EVENT_STOP, () => {
             self._setStartValue("");
         });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_PAUSE, function () {
+        this.trigger.on(MultiSelectInsertTrigger.EVENT_PAUSE, function () {
             self._addItem(assertShowValue, true);
-            self.fireEvent(BI.MultiSelectInsertNoBarCombo.EVENT_ADD_ITEM, this.getSearcher().getKeyword());
+            self.fireEvent(
+                MultiSelectInsertNoBarCombo.EVENT_ADD_ITEM,
+                this.getSearcher().getKeyword()
+            );
         });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_SEARCHING, function (keywords) {
-            var last = BI.last(keywords);
-            keywords = BI.initial(keywords || []);
-            if (keywords.length > 0) {
-                self._joinKeywords(keywords, function () {
-                    if (BI.endWith(last, BI.BlankSplitChar)) {
-                        self.combo.setValue(self.storeValue);
+        this.trigger.on(
+            MultiSelectInsertTrigger.EVENT_SEARCHING,
+            function (keywords) {
+                const lastKeyword = last(keywords);
+                keywords = initial(keywords || []);
+                if (keywords.length > 0) {
+                    self._joinKeywords(keywords, () => {
+                        if (endWith(lastKeyword, BI.BlankSplitChar)) {
+                            self.combo.setValue(self.storeValue);
+                            assertShowValue();
+                            self.combo.populate();
+                            self._setStartValue("");
+                        } else {
+                            self.combo.setValue(self.storeValue);
+                            assertShowValue();
+                        }
+                        self._dataChange = true;
+                    });
+                    this.getSearcher().getKeywordsLength() > 2000 &&
+                    Msg.alert(
+                        i18nText("BI-Basic_Prompt"),
+                        i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand")
+                    );
+                }
+            }
+        );
+
+        this.trigger.on(
+            MultiSelectInsertTrigger.EVENT_CHANGE,
+            function (value, obj) {
+                if (obj instanceof MultiSelectBar) {
+                    self._joinAll(this.getValue(), () => {
                         assertShowValue();
-                        self.combo.populate();
-                        self._setStartValue("");
-                    } else {
-                        self.combo.setValue(self.storeValue);
+                    });
+                } else {
+                    self._join(this.getValue(), () => {
                         assertShowValue();
-                    }
-                    self._dataChange = true;
-                });
-                this.getSearcher().getKeywordsLength() > 2000 && BI.Msg.alert(BI.i18nText("BI-Basic_Prompt"), BI.i18nText("BI-Basic_Too_Much_Value_Get_Two_Thousand"));
+                    });
+                }
+                self._dataChange = true;
             }
-        });
-
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_CHANGE, function (value, obj) {
-            if (obj instanceof BI.MultiSelectBar) {
-                self._joinAll(this.getValue(), function () {
-                    assertShowValue();
-                });
-            } else {
-                self._join(this.getValue(), function () {
-                    assertShowValue();
-                });
+        );
+        this.trigger.on(
+            MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW,
+            () => {
+                // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
+                // 只需要更新查看面板的selectedValue用以请求已选数据
+                self.numberCounter.updateSelectedValue(self.storeValue);
             }
-            self._dataChange = true;
-        });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW, function () {
-            // counter的值随点击项的改变而改变, 点击counter的时候不需要setValue(counter会请求刷新计数)
-            // 只需要更新查看面板的selectedValue用以请求已选数据
-            self.numberCounter.updateSelectedValue(self.storeValue);
-        });
-        this.trigger.on(BI.MultiSelectInsertTrigger.EVENT_COUNTER_CLICK, function () {
-            if (!self.combo.isViewVisible()) {
-                self.combo.showView();
+        );
+        this.trigger.on(
+            MultiSelectInsertTrigger.EVENT_COUNTER_CLICK,
+            () => {
+                if (!self.combo.isViewVisible()) {
+                    self.combo.showView();
+                }
             }
-        });
+        );
 
-        this.combo = BI.createWidget({
-            type: "bi.combo",
-            cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
+        this.combo = createWidget({
+            type: Combo.xtype,
+            cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius",
             toggle: false,
             container: o.container,
             el: this.trigger,
             adjustLength: 1,
             popup: {
-                type: "bi.multi_select_no_bar_popup_view",
-                ref: function () {
+                type: MultiSelectNoBarPopupView.xtype,
+                ref() {
                     self.popup = this;
                     self.trigger.setAdapter(this);
                     self.numberCounter.setAdapter(this);
                 },
                 listeners: [
                     {
-                        eventName: BI.MultiSelectPopupView.EVENT_CHANGE,
-                        action: function () {
+                        eventName: MultiSelectNoBarPopupView.EVENT_CHANGE,
+                        action() {
                             self._dataChange = true;
                             self.storeValue = this.getValue();
-                            self._adjust(function () {
+                            self._adjust(() => {
                                 assertShowValue();
                             });
-                        }
-                    }, {
-                        eventName: BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM,
-                        action: function () {
+                        },
+                    },
+                    {
+                        eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM,
+                        action() {
                             self._defaultState();
-                        }
-                    }, {
-                        eventName: BI.MultiSelectPopupView.EVENT_CLICK_CLEAR,
-                        action: function () {
+                        },
+                    },
+                    {
+                        eventName: MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR,
+                        action() {
                             self._dataChange = true;
                             self.setValue();
                             self._defaultState();
-                        }
+                        },
                     }
                 ],
                 itemsCreator: o.itemsCreator,
                 itemHeight: o.itemHeight,
                 valueFormatter: o.valueFormatter,
-                onLoaded: function () {
-                    BI.nextTick(function () {
+                onLoaded() {
+                    nextTick(() => {
                         self.combo.adjustWidth();
                         self.combo.adjustHeight();
                         self.numberCounter.adjustView();
                         self.trigger.getSearcher().adjustView();
                     });
-                }
+                },
             },
             value: {
-                type: BI.Selection.Multi,
-                value: o.value
+                type: Selection.Multi,
+                value: o.value,
+            },
+            hideChecker(e) {
+                return (
+                    triggerBtn.element.find(e.target).length === 0 &&
+                    self.numberCounter.element.find(e.target).length === 0
+                );
             },
-            hideChecker: function (e) {
-                return triggerBtn.element.find(e.target).length === 0 &&
-                    self.numberCounter.element.find(e.target).length === 0;
-            }
         });
 
-        this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
+        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
             if (!this.isViewVisible()) {
-                self._dataChange = false;// 标记数据是否发生变化
+                self._dataChange = false; // 标记数据是否发生变化
             }
             this.setValue(self.storeValue);
-            BI.nextTick(function () {
+            nextTick(() => {
                 self._populate();
             });
         });
         // 当退出的时候如果还在处理请求，则等请求结束后再对外发确定事件
         this.wants2Quit = false;
-        this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
+        this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => {
             // important:关闭弹出时又可能没有退出编辑状态
             self._stopEditing();
             if (self.requesting === true) {
                 self.wants2Quit = true;
             } else {
-                self._dataChange && self.fireEvent(BI.MultiSelectInsertNoBarCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiSelectInsertNoBarCombo.EVENT_CONFIRM);
             }
         });
 
-        var triggerBtn = BI.createWidget({
-            type: "bi.trigger_icon_button",
-            width: o.height,
-            height: o.height,
-            cls: "multi-select-trigger-icon-button"
-        });
-        triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
+        triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
             self.numberCounter.hideView();
             if (self.combo.isViewVisible()) {
                 self.combo.hideView();
@@ -212,52 +275,65 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, {
             }
         });
 
-        this.numberCounter = BI.createWidget({
-            type: "bi.multi_select_check_selected_switcher",
+        this.numberCounter = createWidget({
+            type: MultiSelectCheckSelectedSwitcher.xtype,
             masker: {
                 offset: {
                     left: 0,
                     top: 0,
                     right: 0,
-                    bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1
-                }
+                    bottom: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT + 1,
+                },
             },
             valueFormatter: o.valueFormatter,
-            itemsCreator: BI.bind(this._itemsCreator4Trigger, this),
+            itemsCreator: bind(this._itemsCreator4Trigger, this),
             value: {
-                type: BI.Selection.Multi,
-                value: o.value
-            }
+                type: Selection.Multi,
+                value: o.value,
+            },
         });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () {
-            if (!self.combo.isViewVisible()) {
-                self.combo.showView();
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
+            () => {
+                if (!self.combo.isViewVisible()) {
+                    self.combo.showView();
+                }
             }
-        });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () {
-            this.updateSelectedValue(self.storeValue);
-        });
-
-        this.numberCounter.on(BI.Events.VIEW, function (b) {
-            BI.nextTick(function () {// 自动调整宽度
-                self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
+        );
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
+            function () {
+                this.updateSelectedValue(self.storeValue);
+            }
+        );
+
+        this.numberCounter.on(Events.VIEW, b => {
+            nextTick(() => {
+                // 自动调整宽度
+                self.trigger.refreshPlaceHolderWidth(
+                    b === true ? self.numberCounter.element.outerWidth() + 8 : 0
+                );
             });
         });
 
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () {
-            BI.nextTick(function () {// 收起时自动调整宽度
-                self.trigger.refreshPlaceHolderWidth(0);
-            });
-        });
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
+            () => {
+                nextTick(() => {
+                    // 收起时自动调整宽度
+                    self.trigger.refreshPlaceHolderWidth(0);
+                });
+            }
+        );
 
-        this.trigger.element.click(function (e) {
+        this.trigger.element.click(e => {
             if (self.trigger.element.find(e.target).length > 0) {
                 self.numberCounter.hideView();
             }
         });
 
-        BI.createWidget({
-            type: "bi.absolute",
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
             items: [
                 {
@@ -265,226 +341,235 @@ BI.MultiSelectInsertNoBarCombo = BI.inherit(BI.Single, {
                     left: 0,
                     right: 0,
                     top: 0,
-                    bottom: 0
-                }, {
+                    bottom: 0,
+                },
+                {
                     el: triggerBtn,
                     right: 0,
                     top: 0,
-                    bottom: 0
-                }, {
+                    bottom: 0,
+                },
+                {
                     el: {
-                        type: "bi.vertical_adapt",
-                        items: [this.numberCounter]
+                        type: VerticalAdaptLayout.xtype,
+                        items: [this.numberCounter],
                     },
                     right: o.height,
                     top: 0,
-                    height: o.height
+                    height: o.height,
                 }
-            ]
+            ],
         });
-    },
+    }
 
-    _itemsCreator4Trigger: function (op, callback) {
-        var self = this, o = this.options;
+    _itemsCreator4Trigger(op, callback) {
+        const self = this,
+            o = this.options;
         o.itemsCreator(op, function (res) {
-            if (op.times === 1 && BI.isNotNull(op.keywords)) {
+            if (op.times === 1 && isNotNull(op.keywords)) {
                 // 预防trigger内部把当前的storeValue改掉
-                self.trigger.setValue(BI.deepClone(self.storeValue));
+                self.trigger.setValue(deepClone(self.storeValue));
             }
             callback.apply(self, arguments);
         });
-    },
-
-    _addItem: function (assertShowValue) {
-        var self = this;
-        var keyword = this.trigger.getSearcher().getKeyword();
-        this._join({
-            type: BI.Selection.Multi,
-            value: [keyword]
-        }, function () {
-            // 如果在不选的状态下直接把该值添加进来
-            if (self.storeValue.type === BI.Selection.Multi) {
-                BI.pushDistinct(self.storeValue.value, keyword);
+    }
+
+    _addItem(assertShowValue) {
+        const self = this;
+        const keyword = this.trigger.getSearcher().getKeyword();
+        this._join(
+            {
+                type: Selection.Multi,
+                value: [keyword],
+            },
+            () => {
+                // 如果在不选的状态下直接把该值添加进来
+                if (self.storeValue.type === Selection.Multi) {
+                    pushDistinct(self.storeValue.value, keyword);
+                }
+                self.combo.setValue(self.storeValue);
+                self._setStartValue(keyword);
+                assertShowValue();
+                self.populate();
+                self._setStartValue("");
+                self._dataChange = true;
             }
-            self.combo.setValue(self.storeValue);
-            self._setStartValue(keyword);
-            assertShowValue();
-            self.populate();
-            self._setStartValue("");
-            self._dataChange = true;
-        });
-    },
+        );
+    }
 
-    _stopEditing: function () {
+    _stopEditing() {
         this.trigger.stopEditing();
         this.numberCounter.hideView();
-    },
+    }
 
-    _defaultState: function () {
+    _defaultState() {
         this._stopEditing();
         this.combo.hideView();
-    },
+    }
 
-    _assertValue: function (val) {
+    _assertValue(val) {
         val || (val = {});
-        val.type || (val.type = BI.Selection.Multi);
+        val.type || (val.type = Selection.Multi);
         val.value || (val.value = []);
-    },
+    }
 
-    _makeMap: function (values) {
-        return BI.makeObject(values || []);
-    },
+    _makeMap(values) {
+        return makeObject(values || []);
+    }
 
-    _joinKeywords: function (keywords, callback) {
-        var self = this, o = this.options;
+    _joinKeywords(keywords, callback) {
+        const self = this;
         this._assertValue(this.storeValue);
         this.requesting = true;
 
         digest();
 
         function digest() {
-            BI.each(keywords, function (i, val) {
-                self.storeValue.type === BI.Selection.Multi ? BI.pushDistinct(self.storeValue.value, val) : BI.remove(self.storeValue.value, val);
+            each(keywords, (i, val) => {
+                self.storeValue.type === Selection.Multi
+                    ? pushDistinct(self.storeValue.value, val)
+                    : remove(self.storeValue.value, val);
             });
             self._adjust(callback);
         }
-    },
+    }
 
-    _joinAll: function (res, callback) {
-        var self = this, o = this.options;
+    _joinAll(res, callback) {
+        const self = this,
+            o = this.options;
         this._assertValue(res);
         this.requesting = true;
         if (this.storeValue.type === res.type) {
-            var result = BI.Func.getSearchResult(BI.map(this.storeValue.value, function (_i, v) {
-                return {
-                    text: o.valueFormatter(v) || v,
-                    value: v
-                };
-            }), this.trigger.getKey());
-            var change = false;
-            var map = this._makeMap(this.storeValue.value);
-            BI.each(BI.concat(result.match, result.find), function (i, obj) {
-                var v = obj.value;
-                if (BI.isNotNull(map[v])) {
+            const result = Func.getSearchResult(
+                map(this.storeValue.value, (_i, v) => {
+                    return {
+                        text: o.valueFormatter(v) || v,
+                        value: v,
+                    };
+                }),
+                this.trigger.getKey()
+            );
+            let change = false;
+            const tempMap = this._makeMap(this.storeValue.value);
+            each(concat(result.match, result.find), (i, obj) => {
+                const v = obj.value;
+                if (isNotNull(tempMap[v])) {
                     change = true;
-                    self.storeValue.assist && self.storeValue.assist.push(map[v]);
-                    delete map[v];
+                    self.storeValue.assist &&
+                    self.storeValue.assist.push(tempMap[v]);
+                    delete tempMap[v];
                 }
             });
-            change && (this.storeValue.value = BI.values(map));
+            change && (this.storeValue.value = values(tempMap));
             this._adjust(callback);
+
             return;
         }
-        o.itemsCreator({
-            type: BI.MultiSelectInsertNoBarCombo.REQ_GET_ALL_DATA,
-            keywords: [this.trigger.getKey()],
-            selectedValues: BI.filter(this.storeValue.value, function (_i, v) {
-                return !BI.contains(res.value, v);
-            }),
-        }, function (ob) {
-            var items = BI.map(ob.items, "value");
-            var selectedMap = self._makeMap(self.storeValue.value);
-            var notSelectedMap = self._makeMap(res.value);
-            var newItems = [];
-            BI.each(items, function (i, item) {
-                if (BI.isNotNull(selectedMap[items[i]])) {
-                    self.storeValue.assist && self.storeValue.assist.push(selectedMap[items[i]]);
-                    delete selectedMap[items[i]];
-                }
-                if (BI.isNull(notSelectedMap[items[i]])) {
-                    BI.remove(self.storeValue.assist, item);
-                    newItems.push(item);
-                }
-            });
-            self.storeValue.value = newItems.concat(BI.values(selectedMap));
-            self._adjust(callback);
-        });
-    },
+        o.itemsCreator(
+            {
+                type: MultiSelectInsertNoBarCombo.REQ_GET_ALL_DATA,
+                keywords: [this.trigger.getKey()],
+                selectedValues: filter(this.storeValue.value, (_i, v) => !contains(res.value, v)),
+            },
+            ob => {
+                const items = map(ob.items, "value");
+                const selectedMap = self._makeMap(self.storeValue.value);
+                const notSelectedMap = self._makeMap(res.value);
+                const newItems = [];
+                each(items, (i, item) => {
+                    if (isNotNull(selectedMap[items[i]])) {
+                        self.storeValue.assist &&
+                        self.storeValue.assist.push(selectedMap[items[i]]);
+                        delete selectedMap[items[i]];
+                    }
+                    if (isNull(notSelectedMap[items[i]])) {
+                        remove(self.storeValue.assist, item);
+                        newItems.push(item);
+                    }
+                });
+                self.storeValue.value = newItems.concat(values(selectedMap));
+                self._adjust(callback);
+            }
+        );
+    }
 
-    _adjust: function (callback) {
-        var self = this, o = this.options;
+    _adjust(callback) {
+        const self = this;
         adjust();
         callback();
 
         function adjust() {
             if (self.wants2Quit === true) {
-                self._dataChange && self.fireEvent(BI.MultiSelectInsertNoBarCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiSelectInsertNoBarCombo.EVENT_CONFIRM);
                 self.wants2Quit = false;
             }
             self.requesting = false;
         }
-    },
+    }
 
-    _join: function (res, callback) {
-        var self = this, o = this.options;
+    _join(res, callback) {
+        const self = this;
         this._assertValue(res);
         this._assertValue(this.storeValue);
         if (this.storeValue.type === res.type) {
-            var map = this._makeMap(this.storeValue.value);
-            BI.each(res.value, function (i, v) {
+            const map = this._makeMap(this.storeValue.value);
+            each(res.value, (i, v) => {
                 if (!map[v]) {
                     self.storeValue.value.push(v);
-                    BI.remove(self.storeValue.assist, v);
+                    remove(self.storeValue.assist, v);
                     map[v] = v;
                 }
             });
-            var change = false;
-            BI.each(res.assist, function (i, v) {
-                if (BI.isNotNull(map[v])) {
+            let change = false;
+            each(res.assist, (i, v) => {
+                if (isNotNull(map[v])) {
                     change = true;
-                    self.storeValue.assist && self.storeValue.assist.push(map[v]);
+                    self.storeValue.assist &&
+                    self.storeValue.assist.push(map[v]);
                     delete map[v];
                 }
             });
-            change && (this.storeValue.value = BI.values(map));
+            change && (this.storeValue.value = values(map));
             self._adjust(callback);
+
             return;
         }
         this._joinAll(res, callback);
-    },
+    }
 
-    _setStartValue: function (value) {
+    _setStartValue(value) {
         this._startValue = value;
         this.popup.setStartValue(value);
-    },
+    }
 
-    _populate: function () {
-        this.combo.populate.apply(this.combo, arguments);
-    },
+    _populate() {
+        this.combo.populate(...arguments);
+    }
 
-    showView: function () {
+    showView() {
         this.combo.showView();
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this.combo.hideView();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.storeValue = {
-            type: BI.Selection.Multi,
-            value: v || []
+            type: Selection.Multi,
+            value: v || [],
         };
         this.combo.setValue(this.storeValue);
         this.numberCounter.setValue(this.storeValue);
-    },
-
-    getValue: function () {
-        return BI.deepClone(this.storeValue.value);
-    },
-
-    populate: function () {
-        this._populate.apply(this, arguments);
-        this.numberCounter.populateSwitcher.apply(this.numberCounter, arguments);
     }
-});
 
-BI.extend(BI.MultiSelectInsertNoBarCombo, {
-    REQ_GET_DATA_LENGTH: 1,
-    REQ_GET_ALL_DATA: -1
-});
-
-BI.MultiSelectInsertNoBarCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.MultiSelectInsertNoBarCombo.EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
+    getValue() {
+        return deepClone(this.storeValue.value);
+    }
 
-BI.shortcut("bi.multi_select_insert_no_bar_combo", BI.MultiSelectInsertNoBarCombo);
+    populate() {
+        this._populate(...arguments);
+        this.numberCounter.populateSwitcher(...arguments);
+    }
+}

src/widget/multiselect/multiselect.insert.trigger.js

@@ -1,40 +1,55 @@
-/**
- *
- * 复选下拉框
- * @class BI.MultiSelectInsertTrigger
- * @extends BI.Trigger
- */
-
-BI.MultiSelectInsertTrigger = BI.inherit(BI.Trigger, {
-
-    constants: {
-        height: 14,
-        rgap: 4,
-        lgap: 4
-    },
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectInsertTrigger.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    Layout,
+    HTapeLayout,
+    AbsoluteLayout
+} from "@/core";
+import { Trigger, Text } from "@/base";
+import { MultiSelectInsertSearcher } from "./trigger/searcher.multiselect.insert";
+
+@shortcut()
+export class MultiSelectInsertTrigger extends Trigger {
+    static xtype = "bi.multi_select_insert_trigger";
+
+    constants = { height: 14, rgap: 4, lgap: 4 };
+
+    static EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
+    static EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_START = "EVENT_START";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_PAUSE = "EVENT_PAUSE";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW";
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_BLUR = "EVENT_BLUR";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-trigger",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
             itemHeight: 24,
             searcher: {},
             switcher: {},
 
             adapter: null,
             masker: {},
-            allowEdit: true
+            allowEdit: true,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectInsertTrigger.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, o = this.options;
+        const self = this,
+            o = this.options;
 
-        this.searcher = BI.createWidget(o.searcher, {
-            type: "bi.multi_select_insert_searcher",
+        this.searcher = createWidget(o.searcher, {
+            type: MultiSelectInsertSearcher.xtype,
             height: o.height,
             text: o.text,
             defaultText: o.defaultText,
@@ -46,113 +61,106 @@ BI.MultiSelectInsertTrigger = BI.inherit(BI.Trigger, {
             popup: {},
             adapter: o.adapter,
             masker: o.masker,
-            value: o.value
-        });
-        this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_START, function () {
-            self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_START);
+            value: o.value,
         });
-        this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_PAUSE, function () {
-            self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_PAUSE);
+        this.searcher.on(MultiSelectInsertSearcher.EVENT_START, () => {
+            self.fireEvent(MultiSelectInsertTrigger.EVENT_START);
         });
-        this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_SEARCHING, function () {
-            self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_SEARCHING, arguments);
+        this.searcher.on(MultiSelectInsertSearcher.EVENT_PAUSE, () => {
+            self.fireEvent(MultiSelectInsertTrigger.EVENT_PAUSE);
         });
-        this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_STOP, function () {
-            self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_STOP);
+        this.searcher.on(
+            MultiSelectInsertSearcher.EVENT_SEARCHING,
+            function () {
+                self.fireEvent(
+                    MultiSelectInsertTrigger.EVENT_SEARCHING,
+                    arguments
+                );
+            }
+        );
+        this.searcher.on(MultiSelectInsertSearcher.EVENT_STOP, () => {
+            self.fireEvent(MultiSelectInsertTrigger.EVENT_STOP);
         });
-        this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_CHANGE, arguments);
+        this.searcher.on(MultiSelectInsertSearcher.EVENT_CHANGE, function () {
+            self.fireEvent(MultiSelectInsertTrigger.EVENT_CHANGE, arguments);
         });
-        this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_BLUR, function () {
-            self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_BLUR);
+        this.searcher.on(MultiSelectInsertSearcher.EVENT_BLUR, () => {
+            self.fireEvent(MultiSelectInsertTrigger.EVENT_BLUR);
         });
-        this.searcher.on(BI.MultiSelectInsertSearcher.EVENT_FOCUS, function () {
-            self.fireEvent(BI.MultiSelectInsertTrigger.EVENT_FOCUS);
+        this.searcher.on(MultiSelectInsertSearcher.EVENT_FOCUS, () => {
+            self.fireEvent(MultiSelectInsertTrigger.EVENT_FOCUS);
         });
 
-        this.wrapNumberCounter = BI.createWidget({
-            type: "bi.layout"
+        this.wrapNumberCounter = createWidget({
+            type: Layout.xtype,
         });
 
-        this.wrapper = BI.createWidget({
-            type: "bi.htape",
+        this.wrapper = createWidget({
+            type: HTapeLayout.xtype,
             element: this,
             items: [
                 {
                     el: this.searcher,
-                    width: "fill"
-                }, {
+                    width: "fill",
+                },
+                {
                     el: this.wrapNumberCounter,
-                    width: 0
-                }, {
-                    el: BI.createWidget(),
-                    width: 24
+                    width: 0,
+                },
+                {
+                    el: createWidget(),
+                    width: 24,
                 }
-            ]
+            ],
         });
 
-        !o.allowEdit && BI.createWidget({
-            type: "bi.absolute",
+        !o.allowEdit &&
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
             items: [
                 {
                     el: {
-                        type: "bi.text",
-                        title: function () {
+                        type: Text.xtype,
+                        title() {
                             return self.searcher.getState();
-                        }
+                        },
                     },
                     left: 0,
                     right: 24,
                     top: 0,
-                    bottom: 0
+                    bottom: 0,
                 }
-            ]
+            ],
         });
-    },
+    }
 
-    /**
-     * 重新调整numberCounter的空白占位符
-     */
-    refreshPlaceHolderWidth: function (width) {
+    refreshPlaceHolderWidth(width) {
         this.wrapper.attr("items")[1].width = width;
         this.wrapper.resize();
-    },
+    }
 
-    getSearcher: function () {
+    getSearcher() {
         return this.searcher;
-    },
+    }
 
-    stopEditing: function () {
+    stopEditing() {
         this.searcher.stopSearch();
-    },
+    }
 
-    setAdapter: function (adapter) {
+    setAdapter(adapter) {
         this.searcher.setAdapter(adapter);
-    },
+    }
 
-    setValue: function (ob) {
+    setValue(ob) {
         this.searcher.setValue(ob);
-    },
+    }
 
-    getKey: function () {
+    getKey() {
         return this.searcher.getKey();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.searcher.getValue();
     }
-});
-
-BI.MultiSelectInsertTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
-BI.MultiSelectInsertTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK";
-BI.MultiSelectInsertTrigger.EVENT_CHANGE = "EVENT_CHANGE";
-BI.MultiSelectInsertTrigger.EVENT_START = "EVENT_START";
-BI.MultiSelectInsertTrigger.EVENT_STOP = "EVENT_STOP";
-BI.MultiSelectInsertTrigger.EVENT_PAUSE = "EVENT_PAUSE";
-BI.MultiSelectInsertTrigger.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiSelectInsertTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW";
-BI.MultiSelectInsertTrigger.EVENT_FOCUS = "EVENT_FOCUS";
-BI.MultiSelectInsertTrigger.EVENT_BLUR = "EVENT_BLUR";
-
-BI.shortcut("bi.multi_select_insert_trigger", BI.MultiSelectInsertTrigger);
+}

src/widget/multiselect/multiselect.loader.js

@@ -1,75 +1,107 @@
-/**
- * 多选加载数据面板
- * Created by guy on 15/11/2.
- * @class BI.MultiSelectLoader
- * @extends Widget
- */
-BI.MultiSelectLoader = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectLoader.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    isKey,
+    map,
+    contains,
+    remove,
+    Controller,
+    delay,
+    isNotNull,
+    Selection, Direction, LogicFactory, pushDistinct
+} from "@/core";
+import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case";
+import { MultiSelectInnerLoader } from "./loader";
+
+@shortcut()
+export class MultiSelectLoader extends Widget {
+    static xtype = "bi.multi_select_loader";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-loader",
             logic: {
-                dynamic: true
+                dynamic: true,
             },
             el: {
-                height: 400
+                height: 400,
             },
-            valueFormatter: BI.emptyFn,
-            itemsCreator: BI.emptyFn,
-            itemFormatter: BI.emptyFn,
-            onLoaded: BI.emptyFn,
+            valueFormatter: emptyFn,
+            itemsCreator: emptyFn,
+            itemFormatter: emptyFn,
+            onLoaded: emptyFn,
             itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             isDefaultInit: false,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectLoader.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, opts = this.options;
-        var hasNext = false;
+        const self = this,
+            opts = this.options;
+        let hasNext = false;
 
         this.storeValue = opts.value || {};
         this._assertValue(this.storeValue);
 
-        this.button_group = BI.createWidget({
-            type: "bi.select_list",
+        this.button_group = createWidget({
+            type: SelectList.xtype,
             logic: opts.logic,
             toolbar: {
-                type: "bi.multi_select_bar",
+                type: MultiSelectBar.xtype,
                 cls: "bi-list-item-active",
-                height: this.options.itemHeight || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-                iconWrapperWidth: 36
+                height:
+                    this.options.itemHeight ||
+                    BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                iconWrapperWidth: 36,
             },
-            el: BI.extend({
-                onLoaded: opts.onLoaded,
-                el: {
-                    type: "bi.multi_select_inner_loader",
-                    isDefaultInit: opts.isDefaultInit,
-                }
-            }, opts.el),
-            itemsCreator: function (op, callback) {
-                var startValue = self._startValue;
-                self.storeValue && (op = BI.extend(op || {}, {
-                    selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi
-                        ? self.storeValue.value.concat(startValue) : self.storeValue.value
+            el: extend(
+                {
+                    onLoaded: opts.onLoaded,
+                    el: {
+                        type: MultiSelectInnerLoader.xtype,
+                        isDefaultInit: opts.isDefaultInit,
+                    },
+                },
+                opts.el
+            ),
+            itemsCreator(op, callback) {
+                const startValue = self._startValue;
+                self.storeValue &&
+                (op = extend(op || {}, {
+                    selectedValues:
+                        isKey(startValue) &&
+                        self.storeValue.type === Selection.Multi
+                            ? self.storeValue.value.concat(startValue)
+                            : self.storeValue.value,
                 }));
-                opts.itemsCreator(op, function (ob) {
+                opts.itemsCreator(op, ob => {
                     hasNext = ob.hasNext;
-                    var firstItems = [];
+                    let firstItems = [];
                     if (op.times === 1 && self.storeValue) {
-                        var json = BI.map(self.storeValue.value, function (i, v) {
-                            var txt = opts.valueFormatter(v) || v;
+                        const json = map(self.storeValue.value, (i, v) => {
+                            const txt = opts.valueFormatter(v) || v;
+
                             return {
                                 text: txt,
                                 value: v,
                                 title: txt,
-                                selected: self.storeValue.type === BI.Selection.Multi,
+                                selected:
+                                    self.storeValue.type === Selection.Multi,
                             };
                         });
-                        if (BI.isKey(self._startValue) && !BI.contains(self.storeValue.value, self._startValue)) {
-                            var txt = opts.valueFormatter(startValue) || startValue;
+                        if (
+                            isKey(self._startValue) &&
+                            !contains(self.storeValue.value, self._startValue)
+                        ) {
+                            const txt =
+                                opts.valueFormatter(startValue) || startValue;
                             json.unshift({
                                 text: txt,
                                 value: startValue,
@@ -79,108 +111,134 @@ BI.MultiSelectLoader = BI.inherit(BI.Widget, {
                         }
                         firstItems = self._createItems(json);
                     }
-                    callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || "");
+                    callback(
+                        firstItems.concat(self._createItems(ob.items)),
+                        ob.keyword || ""
+                    );
                     if (op.times === 1 && self.storeValue) {
-                        BI.isKey(startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, startValue) : BI.pushDistinct(self.storeValue.value, startValue));
+                        isKey(startValue) &&
+                        (self.storeValue.type === Selection.All
+                            ? remove(self.storeValue.value, startValue)
+                            : pushDistinct(
+                                self.storeValue.value,
+                                startValue
+                            ));
                         self.setValue(self.storeValue);
                     }
-                    (op.times === 1) && self._scrollToTop();
+                    op.times === 1 && self._scrollToTop();
                 });
             },
-            hasNext: function () {
+            hasNext() {
                 return hasNext;
             },
-            value: this.storeValue
+            value: this.storeValue,
         });
 
-        BI.createWidget(BI.extend({
-            element: this
-        }, BI.LogicFactory.createLogic(BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Top), BI.extend({
-            scrolly: true,
-            vgap: 5
-        }, opts.logic, {
-            items: BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Top, this.button_group)
-        }))));
-        this.button_group.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                LogicFactory.createLogic(
+                    LogicFactory.createLogicTypeByDirection(
+                        Direction.Top
+                    ),
+                    extend(
+                        {
+                            scrolly: true,
+                            vgap: 5,
+                        },
+                        opts.logic,
+                        {
+                            items: LogicFactory.createLogicItemsByDirection(
+                                Direction.Top,
+                                this.button_group
+                            ),
+                        }
+                    )
+                )
+            )
+        );
+        this.button_group.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
-        this.button_group.on(BI.SelectList.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectLoader.EVENT_CHANGE, arguments);
+        this.button_group.on(SelectList.EVENT_CHANGE, function () {
+            self.fireEvent(MultiSelectLoader.EVENT_CHANGE, arguments);
         });
-    },
+    }
 
-    _createItems: function (items) {
-        var allSelected = this.isAllSelected();
-        var itemFormatter = this.options.itemFormatter;
-        return BI.map(items, (i, item) => {
+    _createItems(items) {
+        const allSelected = this.isAllSelected();
+        const itemFormatter = this.options.itemFormatter;
+
+        return map(items, (i, item) => {
             return {
-                type: "bi.multi_select_item",
+                type: MultiSelectItem.xtype,
                 logic: this.options.logic,
                 cls: "bi-list-item-active",
-                height: this.options.itemHeight || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                height:
+                    this.options.itemHeight ||
+                    BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                 selected: allSelected,
                 iconWrapperWidth: 36,
                 ...item,
                 ...itemFormatter(item),
             };
         });
-    },
+    }
 
-    _scrollToTop: function () {
-        var self = this;
-        BI.delay(function () {
+    _scrollToTop() {
+        const self = this;
+        delay(() => {
             self.button_group.element.scrollTop(0);
         }, 30);
-    },
+    }
 
-    isAllSelected: function () {
+    isAllSelected() {
         return this.button_group.isAllSelected();
-    },
+    }
 
-    _assertValue: function (val) {
+    _assertValue(val) {
         val || (val = {});
-        val.type || (val.type = BI.Selection.Multi);
+        val.type || (val.type = Selection.Multi);
         val.value || (val.value = []);
-    },
+    }
 
-    setStartValue: function (v) {
+    setStartValue(v) {
         this._startValue = v;
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.storeValue = v || {};
         this._assertValue(this.storeValue);
         this.button_group.setValue(this.storeValue);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.button_group.getValue();
-    },
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.button_group.getAllButtons();
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.button_group.empty();
-    },
+    }
 
-    populate: function (items) {
-        // arguments.length为0时对arguments[0]赋值后不同环境对其length的取值不同(nashorn)
-        if (BI.isNotNull(items)) {
-            arguments[0] = this._createItems(items);
+    populate(...args) {
+        const items = args[0];
+        if (isNotNull(items)) {
+            args[0] = this._createItems(items);
         }
-        this.button_group.populate.apply(this.button_group, arguments);
-    },
+        this.button_group.populate(...args);
+    }
 
-    resetHeight: function (h) {
+    resetHeight(h) {
         this.button_group.resetHeight(h - 10);
-    },
+    }
 
-    resetWidth: function (w) {
+    resetWidth(w) {
         this.button_group.resetWidth(w);
     }
-});
-
-BI.MultiSelectLoader.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_select_loader", BI.MultiSelectLoader);
+}

src/widget/multiselect/multiselect.loader.nobar.js

@@ -1,185 +1,242 @@
-/**
- * 多选加载数据面板
- * Created by guy on 15/11/2.
- * @class BI.MultiSelectNoBarLoader
- * @extends Widget
- */
-BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectNoBarLoader.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    isKey,
+    map,
+    contains,
+    remove,
+    Controller,
+    VerticalLayout,
+    delay,
+    isNotNull,
+    toPix,
+    Selection,
+    pushDistinct
+} from "@/core";
+import { ButtonGroup, Loader } from "@/base";
+import { SelectList, ListPane, MultiSelectItem } from "@/case";
+
+@shortcut()
+export class MultiSelectNoBarLoader extends Widget {
+    static xtype = "bi.multi_select_no_bar_loader";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-loader",
             logic: {
-                dynamic: true
+                dynamic: true,
             },
             el: {
-                height: 400
+                height: 400,
             },
-            valueFormatter: BI.emptyFn,
-            itemsCreator: BI.emptyFn,
+            valueFormatter: emptyFn,
+            itemsCreator: emptyFn,
             itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-            onLoaded: BI.emptyFn,
-            itemFormatter: BI.emptyFn,
+            onLoaded: emptyFn,
+            itemFormatter: emptyFn,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectNoBarLoader.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, opts = this.options;
-        var hasNext = false;
+        const self = this,
+            opts = this.options;
+        let hasNext = false;
 
         this.storeValue = opts.value || {};
         this._assertValue(this.storeValue);
 
-        this.button_group = BI.createWidget(BI.extend({
-            type: "bi.list_pane",
-            onLoaded: opts.onLoaded,
-            el: {
-                type: "bi.loader",
-                isDefaultInit: false,
-                logic: {
-                    dynamic: true,
-                    scrolly: true
-                },
-                el: {
-                    chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
-                    behaviors: {
-                        redmark: function () {
-                            return true;
-                        }
+        this.button_group = createWidget(
+            extend(
+                {
+                    type: ListPane.xtype,
+                    onLoaded: opts.onLoaded,
+                    el: {
+                        type: Loader.xtype,
+                        isDefaultInit: false,
+                        logic: {
+                            dynamic: true,
+                            scrolly: true,
+                        },
+                        el: {
+                            chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
+                            behaviors: {
+                                redmark() {
+                                    return true;
+                                },
+                            },
+                            layouts: [
+                                {
+                                    type: VerticalLayout.xtype,
+                                }
+                            ],
+                        },
                     },
-                    layouts: [{
-                        type: "bi.vertical"
-                    }]
-                }
-            },
-            itemsCreator: function (op, callback) {
-                var startValue = self._startValue;
-                self.storeValue && (op = BI.extend(op || {}, {
-                    selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi
-                        ? self.storeValue.value.concat(startValue) : self.storeValue.value
-                }));
-                opts.itemsCreator(op, function (ob) {
-                    hasNext = ob.hasNext;
-                    var firstItems = [];
-                    if (op.times === 1 && self.storeValue) {
-                        var json = BI.map(self.storeValue.value, function (i, v) {
-                            var txt = opts.valueFormatter(v) || v;
-                            return {
-                                text: txt,
-                                value: v,
-                                title: txt,
-                                selected: self.storeValue.type === BI.Selection.Multi
-                            };
+                    itemsCreator(op, callback) {
+                        const startValue = self._startValue;
+                        self.storeValue &&
+                        (op = extend(op || {}, {
+                            selectedValues:
+                                isKey(startValue) &&
+                                self.storeValue.type === Selection.Multi
+                                    ? self.storeValue.value.concat(
+                                        startValue
+                                    )
+                                    : self.storeValue.value,
+                        }));
+                        opts.itemsCreator(op, ob => {
+                            hasNext = ob.hasNext;
+                            let firstItems = [];
+                            if (op.times === 1 && self.storeValue) {
+                                const json = map(
+                                    self.storeValue.value,
+                                    (i, v) => {
+                                        const txt = opts.valueFormatter(v) || v;
+
+                                        return {
+                                            text: txt,
+                                            value: v,
+                                            title: txt,
+                                            selected:
+                                                self.storeValue.type ===
+                                                Selection.Multi,
+                                        };
+                                    }
+                                );
+                                if (
+                                    isKey(self._startValue) &&
+                                    !contains(
+                                        self.storeValue.value,
+                                        self._startValue
+                                    )
+                                ) {
+                                    const txt =
+                                        opts.valueFormatter(startValue) ||
+                                        startValue;
+                                    json.unshift({
+                                        text: txt,
+                                        value: startValue,
+                                        title: txt,
+                                        selected: true,
+                                    });
+                                }
+                                firstItems = self._createItems(json);
+                            }
+                            callback(
+                                firstItems.concat(self._createItems(ob.items)),
+                                ob.keyword || ""
+                            );
+                            if (op.times === 1 && self.storeValue) {
+                                isKey(startValue) &&
+                                (self.storeValue.type === Selection.All
+                                    ? remove(
+                                        self.storeValue.value,
+                                        startValue
+                                    )
+                                    : pushDistinct(
+                                        self.storeValue.value,
+                                        startValue
+                                    ));
+                                self.setValue(self.storeValue);
+                            }
+                            op.times === 1 && self._scrollToTop();
                         });
-                        if (BI.isKey(self._startValue) && !BI.contains(self.storeValue.value, self._startValue)) {
-                            var txt = opts.valueFormatter(startValue) || startValue;
-                            json.unshift({
-                                text: txt,
-                                value: startValue,
-                                title: txt,
-                                selected: true
-                            });
-                        }
-                        firstItems = self._createItems(json);
-                    }
-                    callback(firstItems.concat(self._createItems(ob.items)), ob.keyword || "");
-                    if (op.times === 1 && self.storeValue) {
-                        BI.isKey(startValue) && (self.storeValue.type === BI.Selection.All ? BI.remove(self.storeValue.value, startValue) : BI.pushDistinct(self.storeValue.value, startValue));
-                        self.setValue(self.storeValue);
-                    }
-                    (op.times === 1) && self._scrollToTop();
-                });
-            },
-            hasNext: function () {
-                return hasNext;
-            },
-            value: this.storeValue
-        }, opts.el));
+                    },
+                    hasNext() {
+                        return hasNext;
+                    },
+                    value: this.storeValue,
+                },
+                opts.el
+            )
+        );
 
-        BI.createWidget({
-            type: "bi.vertical",
+        createWidget({
+            type: VerticalLayout.xtype,
             element: this,
             items: [this.button_group],
-            vgap: 5
+            vgap: 5,
         });
 
-        this.button_group.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.button_group.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
-        this.button_group.on(BI.SelectList.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectNoBarLoader.EVENT_CHANGE, arguments);
+        this.button_group.on(SelectList.EVENT_CHANGE, function () {
+            self.fireEvent(MultiSelectNoBarLoader.EVENT_CHANGE, arguments);
         });
-    },
+    }
 
-    _createItems: function (items) {
-        return BI.map(items, (index, item) => {
+    _createItems(items) {
+        return map(items, (index, item) => {
             return {
-                type: "bi.multi_select_item",
+                type: MultiSelectItem.xtype,
                 cls: "bi-list-item-active",
                 logic: this.options.logic,
-                height: this.options.itemHeight || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                height:
+                    this.options.itemHeight ||
+                    BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                 iconWrapperWidth: 36,
                 ...item,
                 ...this.options.itemFormatter(item),
             };
         });
-    },
+    }
 
-    _scrollToTop: function () {
-        var self = this;
-        BI.delay(function () {
+    _scrollToTop() {
+        const self = this;
+        delay(() => {
             self.button_group.element.scrollTop(0);
         }, 30);
-    },
+    }
 
-    _assertValue: function (val) {
+    _assertValue(val) {
         val || (val = {});
-        val.type || (val.type = BI.Selection.Multi);
+        val.type || (val.type = Selection.Multi);
         val.value || (val.value = []);
-    },
+    }
 
-    setStartValue: function (v) {
+    setStartValue(v) {
         this._startValue = v;
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.storeValue = v || {};
         this._assertValue(this.storeValue);
         this.button_group.setValue(this.storeValue.value);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return {
-            type: BI.Selection.Multi,
-            value: this.button_group.getValue()
+            type: Selection.Multi,
+            value: this.button_group.getValue(),
         };
-    },
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.button_group.getAllButtons();
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.button_group.empty();
-    },
+    }
 
-    populate: function (items) {
-        if (BI.isNotNull(items)) {
+    populate(items) {
+        if (isNotNull(items)) {
             arguments[0] = this._createItems(items);
         }
-        this.button_group.populate.apply(this.button_group, arguments);
-    },
-
-    resetHeight: function (h) {
-        this.button_group.element.css({ "max-height": BI.toPix(h) });
-    },
-
-    resetWidth: function () {
+        this.button_group.populate(...arguments);
+    }
 
+    resetHeight(h) {
+        this.button_group.element.css({ "max-height": toPix(h) });
     }
-});
 
-BI.MultiSelectNoBarLoader.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_select_no_bar_loader", BI.MultiSelectNoBarLoader);
+    resetWidth() {
+    }
+}

src/widget/multiselect/multiselect.popup.view.js

@@ -1,100 +1,113 @@
-/**
- * 带加载的多选下拉面板
- * @class BI.MultiSelectPopupView
- * @extends Widget
- */
-BI.MultiSelectPopupView = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectPopupView.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    i18nText
+} from "@/core";
+import { MultiPopupView } from "@/case";
+import { MultiSelectLoader } from "./multiselect.loader";
+
+@shortcut()
+export class MultiSelectPopupView extends Widget {
+    static xtype = "bi.multi_select_popup_view";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
+    static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-popup-view",
             maxWidth: "auto",
             minWidth: 135,
             maxHeight: 400,
-            valueFormatter: BI.emptyFn,
-            itemsCreator: BI.emptyFn,
-            onLoaded: BI.emptyFn,
+            valueFormatter: emptyFn,
+            itemsCreator: emptyFn,
+            onLoaded: emptyFn,
             itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectPopupView.superclass._init.apply(this, arguments);
-        var self = this, opts = this.options;
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            opts = this.options;
 
-        this.loader = BI.createWidget({
-            type: "bi.multi_select_loader",
+        this.loader = createWidget({
+            type: MultiSelectLoader.xtype,
             itemsCreator: opts.itemsCreator,
             itemHeight: opts.itemHeight,
             valueFormatter: opts.valueFormatter,
             itemFormatter: opts.itemFormatter,
             onLoaded: opts.onLoaded,
-            value: opts.value
+            value: opts.value,
         });
 
-        this.popupView = BI.createWidget({
-            type: "bi.multi_popup_view",
+        this.popupView = createWidget({
+            type: MultiPopupView.xtype,
             stopPropagation: false,
             maxWidth: opts.maxWidth,
             minWidth: opts.minWidth,
             maxHeight: opts.maxHeight,
             element: this,
-            buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")],
+            buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")],
             el: this.loader,
-            value: opts.value
+            value: opts.value,
         });
 
-        this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectPopupView.EVENT_CHANGE);
+        this.popupView.on(MultiPopupView.EVENT_CHANGE, () => {
+            self.fireEvent(MultiSelectPopupView.EVENT_CHANGE);
         });
-        this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) {
-            switch (index) {
-                case 0:
-                    self.fireEvent(BI.MultiSelectPopupView.EVENT_CLICK_CLEAR);
-                    break;
-                case 1:
-                    self.fireEvent(BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM);
-                    break;
+        this.popupView.on(
+            MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON,
+            index => {
+                switch (index) {
+                    case 0:
+                        self.fireEvent(MultiSelectPopupView.EVENT_CLICK_CLEAR);
+                        break;
+                    case 1:
+                        self.fireEvent(
+                            MultiSelectPopupView.EVENT_CLICK_CONFIRM
+                        );
+                        break;
+                    default:
+                        break;
+                }
             }
-        });
-    },
+        );
+    }
 
-    isAllSelected: function () {
+    isAllSelected() {
         return this.loader.isAllSelected();
-    },
+    }
 
-    setStartValue: function (v) {
+    setStartValue(v) {
         this.loader.setStartValue(v);
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.popupView.setValue(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.popupView.getValue();
-    },
+    }
 
-    populate: function (items) {
-        this.popupView.populate.apply(this.popupView, arguments);
-    },
+    populate(items) {
+        this.popupView.populate(...arguments);
+    }
 
-    resetHeight: function (h) {
+    resetHeight(h) {
         this.popupView.resetHeight(h);
-    },
+    }
 
-    resetWidth: function (w) {
+    resetWidth(w) {
         this.popupView.resetWidth(w);
-    },
+    }
 
-    setDirection: function (direction, position) {
+    setDirection(direction, position) {
         this.popupView.setDirection(direction, position);
-    },
-});
-
-BI.MultiSelectPopupView.EVENT_CHANGE = "EVENT_CHANGE";
-BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
-BI.MultiSelectPopupView.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
-
-
-BI.shortcut("bi.multi_select_popup_view", BI.MultiSelectPopupView);
+    }
+}

src/widget/multiselect/multiselect.popup.view.nobar.js

@@ -1,96 +1,109 @@
-/**
- * 带加载的多选下拉面板
- * @class BI.MultiSelectPopupView
- * @extends Widget
- */
-BI.MultiSelectNoBarPopupView = BI.inherit(BI.Widget, {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    i18nText
+} from "@/core";
+import { MultiPopupView } from "@/case";
+import { MultiSelectNoBarLoader } from "./multiselect.loader.nobar";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectNoBarPopupView.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class MultiSelectNoBarPopupView extends Widget {
+    static xtype = "bi.multi_select_no_bar_popup_view";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
+    static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-popup-view",
             maxWidth: "auto",
             minWidth: 135,
             maxHeight: 400,
-            valueFormatter: BI.emptyFn,
-            itemsCreator: BI.emptyFn,
+            valueFormatter: emptyFn,
+            itemsCreator: emptyFn,
             itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-            onLoaded: BI.emptyFn
+            onLoaded: emptyFn,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectNoBarPopupView.superclass._init.apply(this, arguments);
-        var self = this, opts = this.options;
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            opts = this.options;
 
-        this.loader = BI.createWidget({
-            type: "bi.multi_select_no_bar_loader",
+        this.loader = createWidget({
+            type: MultiSelectNoBarLoader.xtype,
             itemsCreator: opts.itemsCreator,
             itemHeight: opts.itemHeight,
             valueFormatter: opts.valueFormatter,
             itemFormatter: opts.itemFormatter,
             onLoaded: opts.onLoaded,
-            value: opts.value
+            value: opts.value,
         });
 
-        this.popupView = BI.createWidget({
-            type: "bi.multi_popup_view",
+        this.popupView = createWidget({
+            type: MultiPopupView.xtype,
             stopPropagation: false,
             maxWidth: opts.maxWidth,
             minWidth: opts.minWidth,
             maxHeight: opts.maxHeight,
             element: this,
-            buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")],
+            buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")],
             el: this.loader,
-            value: opts.value
+            value: opts.value,
         });
 
-        this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CHANGE);
+        this.popupView.on(MultiPopupView.EVENT_CHANGE, () => {
+            self.fireEvent(MultiSelectNoBarPopupView.EVENT_CHANGE);
         });
-        this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) {
-            switch (index) {
-                case 0:
-                    self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR);
-                    break;
-                case 1:
-                    self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM);
-                    break;
+        this.popupView.on(
+            MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON,
+            index => {
+                switch (index) {
+                    case 0:
+                        self.fireEvent(
+                            MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR
+                        );
+                        break;
+                    case 1:
+                        self.fireEvent(
+                            MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM
+                        );
+                        break;
+                }
             }
-        });
-    },
+        );
+    }
 
-    setStartValue: function (v) {
+    setStartValue(v) {
         this.loader.setStartValue(v);
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.popupView.setValue(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.popupView.getValue();
-    },
+    }
 
-    populate: function (items) {
-        this.popupView.populate.apply(this.popupView, arguments);
-    },
+    populate(items) {
+        this.popupView.populate(...arguments);
+    }
 
-    resetHeight: function (h) {
+    resetHeight(h) {
         this.popupView.resetHeight(h);
-    },
+    }
 
-    resetWidth: function (w) {
+    resetWidth(w) {
         this.popupView.resetWidth(w);
-    },
+    }
 
-    setDirection: function (direction, position) {
+    setDirection(direction, position) {
         this.popupView.setDirection(direction, position);
-    },
-});
-
-BI.MultiSelectNoBarPopupView.EVENT_CHANGE = "EVENT_CHANGE";
-BI.MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
-BI.MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
-
-
-BI.shortcut("bi.multi_select_no_bar_popup_view", BI.MultiSelectNoBarPopupView);
+    }
+}

src/widget/multiselect/multiselect.trigger.js

@@ -1,40 +1,56 @@
-/**
- *
- * 复选下拉框
- * @class BI.MultiSelectTrigger
- * @extends BI.Trigger
- */
-
-BI.MultiSelectTrigger = BI.inherit(BI.Trigger, {
-
-    constants: {
-        height: 14,
-        rgap: 4,
-        lgap: 4
-    },
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectTrigger.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    isFunction,
+    Layout,
+    HTapeLayout,
+    AbsoluteLayout
+} from "@/core";
+import { Trigger, Text } from "@/base";
+import { MultiSelectSearcher } from "./trigger/searcher.multiselect";
+
+@shortcut()
+export class MultiSelectTrigger extends Trigger {
+    static xtype = "bi.multi_select_trigger";
+
+    constants = { height: 14, rgap: 4, lgap: 4 };
+
+    static EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
+    static EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_START = "EVENT_START";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_PAUSE = "EVENT_PAUSE";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW";
+    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_FOCUS = "EVENT_FOCUS";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-trigger",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
             searcher: {},
             switcher: {},
 
             adapter: null,
             masker: {},
             allowEdit: true,
-            itemHeight: 24
+            itemHeight: 24,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectTrigger.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, o = this.options;
+        const self = this,
+            o = this.options;
 
-        this.searcher = BI.createWidget(o.searcher, {
-            type: "bi.multi_select_searcher",
+        this.searcher = createWidget(o.searcher, {
+            type: MultiSelectSearcher.xtype,
             height: o.height,
             text: o.text,
             defaultText: o.defaultText,
@@ -46,125 +62,111 @@ BI.MultiSelectTrigger = BI.inherit(BI.Trigger, {
             popup: {},
             adapter: o.adapter,
             masker: o.masker,
-            value: o.value
+            value: o.value,
         });
-        this.searcher.on(BI.MultiSelectSearcher.EVENT_START, function () {
-            self.fireEvent(BI.MultiSelectTrigger.EVENT_START);
+        this.searcher.on(MultiSelectSearcher.EVENT_START, () => {
+            self.fireEvent(MultiSelectTrigger.EVENT_START);
         });
-        this.searcher.on(BI.MultiSelectSearcher.EVENT_PAUSE, function () {
-            self.fireEvent(BI.MultiSelectTrigger.EVENT_PAUSE);
+        this.searcher.on(MultiSelectSearcher.EVENT_PAUSE, () => {
+            self.fireEvent(MultiSelectTrigger.EVENT_PAUSE);
         });
-        this.searcher.on(BI.MultiSelectSearcher.EVENT_SEARCHING, function () {
-            self.fireEvent(BI.MultiSelectTrigger.EVENT_SEARCHING, arguments);
+        this.searcher.on(MultiSelectSearcher.EVENT_SEARCHING, function () {
+            self.fireEvent(MultiSelectTrigger.EVENT_SEARCHING, arguments);
         });
-        this.searcher.on(BI.MultiSelectSearcher.EVENT_STOP, function () {
-            self.fireEvent(BI.MultiSelectTrigger.EVENT_STOP);
+        this.searcher.on(MultiSelectSearcher.EVENT_STOP, () => {
+            self.fireEvent(MultiSelectTrigger.EVENT_STOP);
         });
-        this.searcher.on(BI.MultiSelectSearcher.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectTrigger.EVENT_CHANGE, arguments);
+        this.searcher.on(MultiSelectSearcher.EVENT_CHANGE, function () {
+            self.fireEvent(MultiSelectTrigger.EVENT_CHANGE, arguments);
         });
-        this.searcher.on(BI.MultiSelectSearcher.EVENT_BLUR, function () {
-            self.fireEvent(BI.MultiSelectTrigger.EVENT_BLUR);
+        this.searcher.on(MultiSelectSearcher.EVENT_BLUR, () => {
+            self.fireEvent(MultiSelectTrigger.EVENT_BLUR);
         });
-        this.searcher.on(BI.MultiSelectSearcher.EVENT_FOCUS, function () {
-            self.fireEvent(BI.MultiSelectTrigger.EVENT_FOCUS);
+        this.searcher.on(MultiSelectSearcher.EVENT_FOCUS, () => {
+            self.fireEvent(MultiSelectTrigger.EVENT_FOCUS);
         });
 
-        this.wrapNumberCounter = BI.createWidget({
-            type: "bi.layout"
+        this.wrapNumberCounter = createWidget({
+            type: Layout.xtype,
         });
 
-        this.wrapper = BI.createWidget({
-            type: "bi.htape",
+        this.wrapper = createWidget({
+            type: HTapeLayout.xtype,
             element: this,
             items: [
                 {
                     el: this.searcher,
                     width: "fill",
-                    rgap: 24
+                    rgap: 24,
                 }
-            ]
+            ],
         });
 
-        !o.allowEdit && BI.createWidget({
-            type: "bi.absolute",
+        !o.allowEdit &&
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
             items: [
                 {
                     el: {
-                        type: "bi.text",
-                        title: function () {
+                        type: Text.xtype,
+                        title() {
                             /** 修正REPORT-73699引入，需要考虑到传递过来的值是方法的情况 */
-                            var state = self.searcher.getState();
-                            if (BI.isFunction(state)) {
+                            const state = self.searcher.getState();
+                            if (isFunction(state)) {
                                 return state();
                             }
+
                             return state;
-                        }
+                        },
                     },
                     left: 0,
                     right: 24,
                     top: 0,
-                    bottom: 0
+                    bottom: 0,
                 }
-            ]
+            ],
         });
-    },
+    }
 
-    /**
-     * 重新调整numberCounter的空白占位符
-     */
-    refreshPlaceHolderWidth: function (width) {
+    refreshPlaceHolderWidth(width) {
         this.wrapper.attr("items")[0].rgap = 24 + width;
         this.wrapper.resize();
-    },
+    }
 
-    getSearcher: function () {
+    getSearcher() {
         return this.searcher;
-    },
+    }
 
-    stopEditing: function () {
+    stopEditing() {
         this.searcher.stopSearch();
-    },
+    }
 
-    setAdapter: function (adapter) {
+    setAdapter(adapter) {
         this.searcher.setAdapter(adapter);
-    },
+    }
 
-    setValue: function (ob) {
+    setValue(ob) {
         this.searcher.setValue(ob);
-    },
+    }
 
-    getKey: function () {
+    getKey() {
         return this.searcher.getKey();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.searcher.getValue();
-    },
+    }
 
-    focus: function () {
+    focus() {
         this.searcher.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.searcher.blur();
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.searcher.setWaterMark(v);
     }
-});
-
-BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK = "EVENT_TRIGGER_CLICK";
-BI.MultiSelectTrigger.EVENT_COUNTER_CLICK = "EVENT_COUNTER_CLICK";
-BI.MultiSelectTrigger.EVENT_CHANGE = "EVENT_CHANGE";
-BI.MultiSelectTrigger.EVENT_START = "EVENT_START";
-BI.MultiSelectTrigger.EVENT_STOP = "EVENT_STOP";
-BI.MultiSelectTrigger.EVENT_PAUSE = "EVENT_PAUSE";
-BI.MultiSelectTrigger.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiSelectTrigger.EVENT_BEFORE_COUNTER_POPUPVIEW = "EVENT_BEFORE_COUNTER_POPUPVIEW";
-BI.MultiSelectTrigger.EVENT_BLUR = "EVENT_BLUR";
-BI.MultiSelectTrigger.EVENT_FOCUS = "EVENT_FOCUS";
-
-BI.shortcut("bi.multi_select_trigger", BI.MultiSelectTrigger);
+}

src/widget/multiselect/search/multiselect.search.insert.pane.js

@@ -1,99 +1,109 @@
-/**
- *
- * 在搜索框中输入文本弹出的面板
- * @class BI.MultiSelectSearchInsertPane
- * @extends Widget
- */
-
-BI.MultiSelectSearchInsertPane = BI.inherit(BI.Widget, {
-
-    constants: {
-        height: 24,
-        lgap: 10,
-        tgap: 5
-    },
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectSearchInsertPane.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    i18nText,
+    Controller, VerticalFillLayout
+} from "@/core";
+import { Label } from "@/base";
+import { MultiSelectSearchLoader } from "./multiselect.search.loader";
+
+@shortcut()
+export class MultiSelectSearchInsertPane extends Widget {
+    static xtype = "bi.multi_select_search_insert_pane";
+
+    constants = { height: 24, lgap: 10, tgap: 5 };
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-search-pane bi-card",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
-            keywordGetter: BI.emptyFn,
-            itemHeight: 24
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
+            keywordGetter: emptyFn,
+            itemHeight: 24,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectSearchInsertPane.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
 
-        this.addNotMatchTip = BI.createWidget({
-            type: "bi.label",
-            text: BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", ""),
+        this.addNotMatchTip = createWidget({
+            type: Label.xtype,
+            text: i18nText("BI-Basic_Press_Enter_To_Add_Text", ""),
             height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             cls: "bi-keyword-red-mark",
             hgap: 5,
         });
 
-        this.loader = BI.createWidget({
-            type: "bi.multi_select_search_loader",
+        this.loader = createWidget({
+            type: MultiSelectSearchLoader.xtype,
             keywordGetter: o.keywordGetter,
             valueFormatter: o.valueFormatter,
             itemFormatter: o.itemFormatter,
-            itemsCreator: function (op, callback) {
-                o.itemsCreator.apply(self, [op, function (res) {
-                    callback(res);
-                    self.setKeyword(o.keywordGetter());
-                }]);
+            itemsCreator(op, callback) {
+                o.itemsCreator.apply(self, [
+                    op,
+                    function (res) {
+                        callback(res);
+                        self.setKeyword(o.keywordGetter());
+                    }
+                ]);
             },
             itemHeight: o.itemHeight,
-            value: o.value
+            value: o.value,
         });
-        this.loader.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.loader.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
 
-        this.resizer = BI.createWidget({
-            type: "bi.vertical_fill",
+        this.resizer = createWidget({
+            type: VerticalFillLayout.xtype,
             rowSize: ["", "fill"],
             element: this,
-            items: [{
-                el: this.addNotMatchTip,
-            }, {
-                el: this.loader,
-            }],
+            items: [
+                {
+                    el: this.addNotMatchTip,
+                },
+                {
+                    el: this.loader,
+                }
+            ],
         });
-    },
+    }
 
-    setKeyword: function (keyword) {
-        this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword));
-    },
+    setKeyword(keyword) {
+        this.addNotMatchTip.setText(
+            i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword)
+        );
+    }
 
-    isAllSelected: function () {
+    isAllSelected() {
         return this.loader.isAllSelected();
-    },
+    }
 
-    hasMatched: function () {
+    hasMatched() {
         return false;
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.loader.setValue(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.loader.getValue();
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.loader.empty();
-    },
-
-    populate: function (items) {
-        this.loader.populate.apply(this.loader, arguments);
     }
-});
-
-BI.MultiSelectSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE";
 
-BI.shortcut("bi.multi_select_search_insert_pane", BI.MultiSelectSearchInsertPane);
+    populate(items) {
+        this.loader.populate(...arguments);
+    }
+}

src/widget/multiselect/search/multiselect.search.loader.js

@@ -1,136 +1,160 @@
-/**
- * 多选加载数据搜索loader面板
- * Created by guy on 15/11/4.
- * @class BI.MultiSelectSearchLoader
- * @extends Widget
- */
-BI.MultiSelectSearchLoader = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectSearchLoader.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    deepClone,
+    createWidget,
+    i18nText,
+    Controller,
+    VerticalLayout,
+    map,
+    isKey,
+    Func
+} from "@/core";
+import { ButtonGroup, Loader } from "@/base";
+import { SelectList, MultiSelectBar, MultiSelectItem } from "@/case";
+
+@shortcut()
+export class MultiSelectSearchLoader extends Widget {
+    static xtype = "bi.multi_select_search_loader";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-search-loader",
-            itemsCreator: BI.emptyFn,
-            keywordGetter: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
-            itemFormatter: BI.emptyFn,
-            itemHeight: 24
+            itemsCreator: emptyFn,
+            keywordGetter: emptyFn,
+            valueFormatter: emptyFn,
+            itemFormatter: emptyFn,
+            itemHeight: 24,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectSearchLoader.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, opts = this.options;
-        var hasNext = false;
-        this.storeValue = BI.deepClone(opts.value);
-        this.button_group = BI.createWidget({
-            type: "bi.select_list",
+        const self = this,
+            opts = this.options;
+        let hasNext = false;
+        this.storeValue = deepClone(opts.value);
+        this.button_group = createWidget({
+            type: SelectList.xtype,
             toolbar: {
-                type: "bi.multi_select_bar",
+                type: MultiSelectBar.xtype,
                 cls: "bi-list-item-active",
-                iconWrapperWidth: 36
+                iconWrapperWidth: 36,
             },
             element: this,
             logic: {
-                dynamic: false
+                dynamic: false,
             },
             value: opts.value,
             el: {
-                tipText: BI.i18nText("BI-No_Select"),
+                tipText: i18nText("BI-No_Select"),
                 el: {
-                    type: "bi.loader",
+                    type: Loader.xtype,
                     isDefaultInit: false,
                     logic: {
                         dynamic: true,
-                        scrolly: true
+                        scrolly: true,
                     },
                     el: {
-                        chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI,
+                        chooseType: ButtonGroup.CHOOSE_TYPE_MULTI,
                         behaviors: {
-                            redmark: function () {
+                            redmark() {
                                 return true;
-                            }
+                            },
                         },
                         layouts: [
                             {
-                                type: "bi.vertical"
+                                type: VerticalLayout.xtype,
                             }
-                        ]
-                    }
-                }
+                        ],
+                    },
+                },
             },
-            itemsCreator: function (op, callback) {
-                self.storeValue && (op = BI.extend(op || {}, {
-                    selectedValues: self.storeValue.value
+            itemsCreator(op, callback) {
+                self.storeValue &&
+                (op = extend(op || {}, {
+                    selectedValues: self.storeValue.value,
                 }));
-                opts.itemsCreator(op, function (ob) {
-                    var keyword = ob.keyword = opts.keywordGetter();
+                opts.itemsCreator(op, ob => {
+                    const keyword = (ob.keyword = opts.keywordGetter());
                     hasNext = ob.hasNext;
-                    var firstItems = [];
+                    let firstItems = [];
                     if (op.times === 1 && self.storeValue) {
-                        var json = self._filterValues(self.storeValue);
+                        const json = self._filterValues(self.storeValue);
                         firstItems = self._createItems(json);
                     }
-                    var context = {
+                    const context = {
                         tipText: ob.tipText,
                     };
-                    callback(firstItems.concat(self._createItems(ob.items)), keyword, context);
+                    callback(
+                        firstItems.concat(self._createItems(ob.items)),
+                        keyword,
+                        context
+                    );
                     if (op.times === 1 && self.storeValue) {
                         self.setValue(self.storeValue);
                     }
                 });
             },
-            hasNext: function () {
+            hasNext() {
                 return hasNext;
-            }
+            },
         });
-        this.button_group.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.button_group.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
-        this.button_group.on(BI.SelectList.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectSearchLoader.EVENT_CHANGE, arguments);
+        this.button_group.on(SelectList.EVENT_CHANGE, function () {
+            self.fireEvent(MultiSelectSearchLoader.EVENT_CHANGE, arguments);
         });
-    },
+    }
+
+    _createItems(items) {
+        const allSelected = this.isAllSelected();
+        const itemFormatter = this.options.itemFormatter;
 
-    _createItems: function (items) {
-        var allSelected = this.isAllSelected();
-        var itemFormatter = this.options.itemFormatter;
-        
-        return BI.map(items, (index, item) => {
+        return map(items, (index, item) => {
             return {
-                type: "bi.multi_select_item",
+                type: MultiSelectItem.xtype,
                 logic: {
-                    dynamic: false
+                    dynamic: false,
                 },
-                height: this.options.itemHeight || BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                height:
+                    this.options.itemHeight ||
+                    BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
                 selected: allSelected,
                 cls: "bi-list-item-active",
                 iconWrapperWidth: 36,
                 ...item,
-                ...itemFormatter(item)
+                ...itemFormatter(item),
             };
         });
-    },
+    }
 
-    isAllSelected: function () {
+    isAllSelected() {
         return this.button_group.isAllSelected();
-    },
+    }
 
-    _filterValues: function (src) {
-        var o = this.options;
-        var keyword = o.keywordGetter();
-        var values = BI.deepClone(src.value) || [];
-        var newValues = BI.map(values, function (i, v) {
+    _filterValues(src) {
+        const o = this.options;
+        const keyword = o.keywordGetter();
+        let values = deepClone(src.value) || [];
+        const newValues = map(values, (i, v) => {
             return {
                 text: o.valueFormatter(v) || v,
                 value: v,
             };
         });
-        if (BI.isKey(keyword)) {
-            var search = BI.Func.getSearchResult(newValues, keyword);
+        if (isKey(keyword)) {
+            const search = Func.getSearchResult(newValues, keyword);
             values = search.match.concat(search.find);
         }
-        return BI.map(values, function (i, v) {
+
+        return map(values, (i, v) => {
             return {
                 text: v.text,
                 title: v.text,
@@ -139,38 +163,35 @@ BI.MultiSelectSearchLoader = BI.inherit(BI.Widget, {
                 ...o.itemFormatter(v),
             };
         });
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         // 暂存的值一定是新的值，不然v改掉后，storeValue也跟着改了
-        this.storeValue = BI.deepClone(v);
+        this.storeValue = deepClone(v);
         this.button_group.setValue(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.button_group.getValue();
-    },
+    }
 
-    getAllButtons: function () {
+    getAllButtons() {
         return this.button_group.getAllButtons();
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.button_group.empty();
-    },
+    }
 
-    populate: function (items) {
-        this.button_group.populate.apply(this.button_group, arguments);
-    },
+    populate(items) {
+        this.button_group.populate(...arguments);
+    }
 
-    resetHeight: function (h) {
+    resetHeight(h) {
         this.button_group.resetHeight(h);
-    },
+    }
 
-    resetWidth: function (w) {
+    resetWidth(w) {
         this.button_group.resetWidth(w);
     }
-});
-
-BI.MultiSelectSearchLoader.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_select_search_loader", BI.MultiSelectSearchLoader);
+}

src/widget/multiselect/search/multiselect.search.pane.js

@@ -1,86 +1,92 @@
-/**
- *
- * 在搜索框中输入文本弹出的面板
- * @class BI.MultiSelectSearchPane
- * @extends Widget
- */
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    Controller,
+    AbsoluteLayout
+} from "@/core";
+import { MultiSelectSearchLoader } from "./multiselect.search.loader";
 
-BI.MultiSelectSearchPane = BI.inherit(BI.Widget, {
+@shortcut()
+export class MultiSelectSearchPane extends Widget {
+    static xtype = "bi.multi_select_search_pane";
 
-    constants: {
-        height: 24,
-        lgap: 10,
-        tgap: 5
-    },
+    constants = { height: 24, lgap: 10, tgap: 5 };
 
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectSearchPane.superclass._defaultConfig.apply(this, arguments), {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-search-pane bi-card",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
-            keywordGetter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
+            keywordGetter: emptyFn,
             itemHeight: 24,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectSearchPane.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
 
-        this.loader = BI.createWidget({
-            type: "bi.multi_select_search_loader",
+        this.loader = createWidget({
+            type: MultiSelectSearchLoader.xtype,
             keywordGetter: o.keywordGetter,
             valueFormatter: o.valueFormatter,
             itemFormatter: o.itemFormatter,
-            itemsCreator: function (op, callback) {
-                o.itemsCreator.apply(self, [op, function (res) {
-                    callback(res);
-                }]);
+            itemsCreator(op, callback) {
+                o.itemsCreator.apply(self, [
+                    op,
+                    function (res) {
+                        callback(res);
+                    }
+                ]);
             },
             itemHeight: o.itemHeight,
-            value: o.value
+            value: o.value,
         });
-        this.loader.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.loader.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
 
-        this.resizer = BI.createWidget({
-            type: "bi.absolute",
+        this.resizer = createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
-                el: this.loader,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                top: 0,
-            }],
+            items: [
+                {
+                    el: this.loader,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    top: 0,
+                }
+            ],
         });
-    },
+    }
 
-    isAllSelected: function () {
+    isAllSelected() {
         return this.loader.isAllSelected();
-    },
+    }
 
-    hasMatched: function () {
-    },
+    hasMatched() {
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.loader.setValue(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.loader.getValue();
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.loader.empty();
-    },
-
-    populate: function (items) {
-        this.loader.populate.apply(this.loader, arguments);
     }
-});
 
-BI.MultiSelectSearchPane.EVENT_CHANGE = "EVENT_CHANGE";
-
-BI.shortcut("bi.multi_select_search_pane", BI.MultiSelectSearchPane);
+    populate(items) {
+        this.loader.populate(...arguments);
+    }
+}

src/widget/multiselect/trigger/button.checkselected.js

@@ -1,102 +1,124 @@
-/**
- * 查看已选按钮
- * Created by guy on 15/11/3.
- * @class BI.MultiSelectCheckSelectedButton
- * @extends BI.Single
- */
-BI.MultiSelectCheckSelectedButton = BI.inherit(BI.Single, {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    Controller,
+    i18nText,
+    isNotNull,
+    isNotEmptyString,
+    nextTick,
+    Selection
+} from "@/core";
+import { Single, TextButton } from "@/base";
+import { MultiSelectCombo } from "../multiselect.combo";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectCheckSelectedButton.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class MultiSelectCheckSelectedButton extends Single {
+    static xtype = "bi.multi_select_check_selected_button";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-check-selected-button",
-            itemsCreator: BI.emptyFn
+            itemsCreator: emptyFn,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectCheckSelectedButton.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.numberCounter = BI.createWidget({
-            type: "bi.text_button",
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.numberCounter = createWidget({
+            type: TextButton.xtype,
             element: this,
             hgap: 4,
             text: "0",
             textAlign: "center",
             textHeight: 16,
-            cls: "bi-high-light-background count-tip"
+            cls: "bi-high-light-background count-tip",
         });
-        this.numberCounter.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.numberCounter.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
 
-        this.numberCounter.on(BI.TextButton.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectCheckSelectedButton.EVENT_CHANGE, arguments);
+        this.numberCounter.on(TextButton.EVENT_CHANGE, function () {
+            self.fireEvent(
+                MultiSelectCheckSelectedButton.EVENT_CHANGE,
+                arguments
+            );
         });
 
-        this.numberCounter.element.hover(function () {
-            self.numberCounter.setTag(self.numberCounter.getText());
-            self.numberCounter.setText(BI.i18nText("BI-Check_Selected"));
-        }, function () {
-            self.numberCounter.setText(self.numberCounter.getTag());
-        });
+        this.numberCounter.element.hover(
+            () => {
+                self.numberCounter.setTag(self.numberCounter.getText());
+                self.numberCounter.setText(i18nText("BI-Check_Selected"));
+            },
+            () => {
+                self.numberCounter.setText(self.numberCounter.getTag());
+            }
+        );
         this.setVisible(false);
-        if (BI.isNotNull(o.value)) {
+        if (isNotNull(o.value)) {
             this.setValue(o.value);
         }
-    },
+    }
 
-    _populate: function (ob) {
-        var self = this, o = this.options;
-        if (ob.type === BI.Selection.All) {
-            o.itemsCreator({
-                type: BI.MultiSelectCombo.REQ_GET_DATA_LENGTH
-            }, function (res) {
-                if (self.options.value.type !== BI.Selection.All) {
-                    return;
-                }
-                if (BI.isNotEmptyString(res.count)) {
-                    BI.nextTick(function () {
-                        self.numberCounter.setText(res.count);
-                        self.setVisible(true);
-                    });
+    _populate(ob) {
+        const self = this,
+            o = this.options;
+        if (ob.type === Selection.All) {
+            o.itemsCreator(
+                {
+                    type: MultiSelectCombo.REQ_GET_DATA_LENGTH,
+                },
+                res => {
+                    if (self.options.value.type !== Selection.All) {
+                        return;
+                    }
+                    if (isNotEmptyString(res.count)) {
+                        nextTick(() => {
+                            self.numberCounter.setText(res.count);
+                            self.setVisible(true);
+                        });
 
-                    return;
+                        return;
+                    }
+                    const length = res.count - ob.value.length;
+                    nextTick(() => {
+                        self.numberCounter.setText(length);
+                        self.setVisible(length > 0);
+                    });
                 }
-                var length = res.count - ob.value.length;
-                BI.nextTick(function () {
-                    self.numberCounter.setText(length);
-                    self.setVisible(length > 0);
-                });
-            });
+            );
+
             return;
         }
-        BI.nextTick(function () {
+        nextTick(() => {
             self.numberCounter.setText(ob.value.length);
             self.setVisible(ob.value.length > 0);
         });
-    },
+    }
 
-    _assertValue: function (ob) {
+    _assertValue(ob) {
         ob || (ob = {});
         ob.type || (ob.type = BI.Selection.Multi);
         ob.value || (ob.value = []);
+
         return ob;
-    },
+    }
 
-    setValue: function (ob) {
+    setValue(ob) {
         ob = this._assertValue(ob);
         this.options.value = ob;
         this._populate(ob);
-    },
+    }
 
-    populate: function () {
+    populate() {
         this._populate(this._assertValue(this.options.value));
-    },
-
-    getValue: function () {
-
     }
-});
 
-BI.MultiSelectCheckSelectedButton.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_select_check_selected_button", BI.MultiSelectCheckSelectedButton);
+    getValue() {
+    }
+}

src/widget/multiselect/trigger/editor.multiselect.js

@@ -1,24 +1,38 @@
-/**
- * 多选输入框
- * Created by guy on 15/11/3.
- * @class BI.MultiSelectEditor
- * @extends Widget
- */
-BI.MultiSelectEditor = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectEditor.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    i18nText,
+    createWidget,
+    Controller,
+    isEmptyString,
+    isEmptyArray
+} from "@/core";
+import { StateEditor } from "@/case";
+import { SelectPatchEditor } from "./editor/editor.patch";
+
+@shortcut()
+export class MultiSelectEditor extends Widget {
+    static xtype = "bi.multi_select_editor";
+
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_PAUSE = "EVENT_PAUSE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-editor",
             el: {},
-            watermark: BI.i18nText("BI-Basic_Search")
+            watermark: i18nText("BI-Basic_Search"),
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectEditor.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.editor = BI.createWidget(o.el, {
-            type: "bi.select_patch_editor",
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.editor = createWidget(o.el, {
+            type: SelectPatchEditor.xtype,
             element: this,
             height: o.height,
             watermark: o.watermark,
@@ -30,49 +44,49 @@ BI.MultiSelectEditor = BI.inherit(BI.Widget, {
             warningTitle: o.warningTitle,
         });
 
-        this.editor.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.editor.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
-        this.editor.on(BI.StateEditor.EVENT_FOCUS, function () {
-            self.fireEvent(BI.MultiSelectEditor.EVENT_FOCUS);
+        this.editor.on(StateEditor.EVENT_FOCUS, () => {
+            self.fireEvent(MultiSelectEditor.EVENT_FOCUS);
         });
-        this.editor.on(BI.StateEditor.EVENT_BLUR, function () {
-            self.fireEvent(BI.MultiSelectEditor.EVENT_BLUR);
+        this.editor.on(StateEditor.EVENT_BLUR, () => {
+            self.fireEvent(MultiSelectEditor.EVENT_BLUR);
         });
-    },
+    }
 
-    focus: function () {
+    focus() {
         this.editor.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
-    },
+    }
 
-    setState: function (state) {
+    setState(state) {
         this.editor.setState(state);
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.editor.setValue(v);
-    },
+    }
 
-    setTipType: function (v) {
+    setTipType(v) {
         this.editor.setTipType(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.editor.getValue();
-    },
+    }
 
-    getState: function () {
+    getState() {
         return this.editor.getText();
-    },
+    }
 
-    getKeywords: function () {
-        var val = this.editor.getValue();
-        var keywords = val.split(/\u200b\s\u200b/);
-        if (BI.isEmptyString(keywords[keywords.length - 1])) {
+    getKeywords() {
+        const val = this.editor.getValue();
+        let keywords = val.split(/\u200b\s\u200b/);
+        if (isEmptyString(keywords[keywords.length - 1])) {
             keywords = keywords.slice(0, keywords.length - 1);
         }
         if (/\u200b\s\u200b$/.test(val)) {
@@ -80,27 +94,19 @@ BI.MultiSelectEditor = BI.inherit(BI.Widget, {
         }
 
         return keywords;
-    },
+    }
 
-    getKeyword: function () {
-        var val = this.editor.getValue();
-        var keywords = val.split(/\u200b\s\u200b/);
-        if (BI.isEmptyString(keywords[keywords.length - 1])) {
+    getKeyword() {
+        const val = this.editor.getValue();
+        let keywords = val.split(/\u200b\s\u200b/);
+        if (isEmptyString(keywords[keywords.length - 1])) {
             keywords = keywords.slice(0, keywords.length - 1);
         }
-        return BI.isEmptyArray(keywords) ? "" : keywords[keywords.length - 1];
-    },
 
-    populate: function (items) {
-
-    },
+        return isEmptyArray(keywords) ? "" : keywords[keywords.length - 1];
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.editor.setWaterMark(v);
     }
-});
-
-BI.MultiSelectEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.MultiSelectEditor.EVENT_BLUR = "EVENT_BLUR";
-BI.MultiSelectEditor.EVENT_PAUSE = "EVENT_PAUSE";
-BI.shortcut("bi.multi_select_editor", BI.MultiSelectEditor);
+}

src/widget/multiselect/trigger/editor/editor.patch.js

@@ -1,214 +1,248 @@
-/**
- * @author windy
- * @version 2.0
- * Created by windy on 2021/5/18
- */
-BI.SelectPatchEditor = BI.inherit(BI.Widget, {
-
-    props: {
-        baseCls: "bi-patch-select-editor",
-        height: 24,
-    },
-
-    render: function () {
-        var self = this, o = this.options;
-
-        var debounceInputChange = BI.debounce(BI.bind(this._dealChange, this), 300);
-
-        return BI.extend({
-            type: "bi.state_editor",
-            ref: function (_ref) {
-                self.editor = _ref;
-            },
-            hgap: o.hgap,
-            vgap: o.vgap,
-            lgap: o.lgap,
-            rgap: o.rgap,
-            tgap: o.tgap,
-            bgap: o.bgap,
-            height: o.height,
-            watermark: o.watermark,
-            allowBlank: true,
-            value: o.value,
-            defaultText: o.defaultText,
-            text: o.text,
-            tipType: o.tipType,
-            warningTitle: o.warningTitle,
-            el: {
-                type: 'bi.textarea_editor',
-                scrolly: false,
-                validationChecker: function () {
-                    return true;
+import {
+    shortcut,
+    Widget,
+    debounce,
+    bind,
+    extend,
+    Controller,
+    contains,
+    isKey,
+    Events,
+    trim, replaceAll
+} from "@/core";
+import { Editor, TextAreaEditor } from "@/base";
+import { StateEditor } from "@/case";
+
+@shortcut()
+export class SelectPatchEditor extends Widget {
+    static xtype = "bi.select_patch_editor";
+
+    props = { baseCls: "bi-patch-select-editor", height: 24 };
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_BLUR = "EVENT_BLUR";
+
+    render() {
+        const self = this,
+            o = this.options;
+
+        const debounceInputChange = debounce(bind(this._dealChange, this), 300);
+
+        return extend(
+            {
+                type: StateEditor.xtype,
+                ref(_ref) {
+                    self.editor = _ref;
                 },
-                throttle: true,
-            },
-            listeners: [{
-                eventName: BI.Controller.EVENT_CHANGE,
-                action: function (type, v) {
-                    if (BI.contains(v, "\n")) {
-                        self._dealChange(type, v);
-                    } else {
-                        debounceInputChange(type, v);
-                    }
+                hgap: o.hgap,
+                vgap: o.vgap,
+                lgap: o.lgap,
+                rgap: o.rgap,
+                tgap: o.tgap,
+                bgap: o.bgap,
+                height: o.height,
+                watermark: o.watermark,
+                allowBlank: true,
+                value: o.value,
+                defaultText: o.defaultText,
+                text: o.text,
+                tipType: o.tipType,
+                warningTitle: o.warningTitle,
+                el: {
+                    type: TextAreaEditor.xtype,
+                    scrolly: false,
+                    validationChecker() {
+                        return true;
+                    },
+                    throttle: true,
                 },
-            }, {
-                eventName: BI.Editor.EVENT_KEY_DOWN,
-                action: function (keyCode) {
-                    if (keyCode === BI.KeyCode.ENTER) {
-                        self._clearSplitValue();
+                listeners: [
+                    {
+                        eventName: Controller.EVENT_CHANGE,
+                        action(type, v) {
+                            if (contains(v, "\n")) {
+                                self._dealChange(type, v);
+                            } else {
+                                debounceInputChange(type, v);
+                            }
+                        },
+                    },
+                    {
+                        eventName: Editor.EVENT_KEY_DOWN,
+                        action(keyCode) {
+                            if (keyCode === BI.KeyCode.ENTER) {
+                                self._clearSplitValue();
+                            }
+                        },
+                    },
+                    {
+                        eventName: Editor.EVENT_FOCUS,
+                        action() {
+                            self.fireEvent(
+                                SelectPatchEditor.EVENT_FOCUS,
+                                arguments
+                            );
+                        },
+                    },
+                    {
+                        eventName: Editor.EVENT_BLUR,
+                        action() {
+                            self._start = false;
+                            self.fireEvent(
+                                SelectPatchEditor.EVENT_BLUR,
+                                arguments
+                            );
+                        },
                     }
-                },
-            }, {
-                eventName: BI.Editor.EVENT_FOCUS,
-                action: function () {
-                    self.fireEvent(BI.SelectPatchEditor.EVENT_FOCUS, arguments);
-                },
-            }, {
-                eventName: BI.Editor.EVENT_BLUR,
-                action: function () {
-                    self._start = false;
-                    self.fireEvent(BI.SelectPatchEditor.EVENT_BLUR, arguments);
-                },
-            }],
-        }, o.el);
-    },
+                ],
+            },
+            o.el
+        );
+    }
 
-    _clearSplitValue: function () {
+    _clearSplitValue() {
         this.editor.setValue("");
-    },
+    }
 
-    _dealChange: function (type, v) {
-        var value = "";
+    _dealChange(type, v) {
+        let value = "";
         if (v !== this.editor.getValue()) {
             return;
         }
-        if (BI.isKey(v)) {
+        if (isKey(v)) {
             value = this._formatText(v);
         }
-        if (type === BI.Events.CHANGE) {
+        if (type === Events.CHANGE) {
             this._setValue(value);
             if (this._trimValue(value) !== "") {
-                if (!this._start || !BI.isKey(this._lastValue) || (this._pause === true && this._trimValue(this._lastValue) !== this._trimValue(value))) {
+                if (
+                    !this._start ||
+                    !isKey(this._lastValue) ||
+                    (this._pause === true &&
+                        this._trimValue(this._lastValue) !==
+                        this._trimValue(value))
+                ) {
                     this._start = true;
                     this._pause = false;
-                    this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.STARTEDIT, this.getValue(), this);
+                    this.fireEvent(
+                        Controller.EVENT_CHANGE,
+                        Events.STARTEDIT,
+                        this.getValue(),
+                        this
+                    );
                 }
             }
             if (this._trimValue(this._lastValue) !== this._trimValue(value)) {
-                this.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+                this.fireEvent(Controller.EVENT_CHANGE, arguments);
             }
             if (BI.endWith(value, BI.BlankSplitChar)) {
                 this._pause = true;
-                this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.PAUSE, "", this);
+                this.fireEvent(Controller.EVENT_CHANGE, Events.PAUSE, "", this);
             }
         }
-        if (type === BI.Events.EMPTY || type === BI.Events.STOPEDIT) {
-            this.fireEvent(BI.Controller.EVENT_CHANGE, BI.Events.EMPTY);
+        if (type === Events.EMPTY || type === Events.STOPEDIT) {
+            this.fireEvent(Controller.EVENT_CHANGE, Events.EMPTY);
         }
         this._lastValue = value;
-    },
+    }
 
-    _trimValue: function (v) {
-        return BI.trim(BI.replaceAll(v || "", BI.BlankSplitChar, ""));
-    },
+    _trimValue(v) {
+        return trim(replaceAll(v || "", BI.BlankSplitChar, ""));
+    }
 
-    _formatText: function (v) {
-        return BI.replaceAll(v || "", "\n", BI.BlankSplitChar);
-    },
+    _formatText(v) {
+        return replaceAll(v || "", "\n", BI.BlankSplitChar);
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.editor.setWaterMark(v);
-    },
+    }
 
-    doRedMark: function () {
-        this.editor.doRedMark.apply(this.editor, arguments);
-    },
+    doRedMark() {
+        this.editor.doRedMark(...arguments);
+    }
 
-    unRedMark: function () {
-        this.editor.unRedMark.apply(this.editor, arguments);
-    },
+    unRedMark() {
+        this.editor.unRedMark(...arguments);
+    }
 
-    doHighLight: function () {
-        this.editor.doHighLight.apply(this.editor, arguments);
-    },
+    doHighLight() {
+        this.editor.doHighLight(...arguments);
+    }
 
-    unHighLight: function () {
-        this.text.unHighLight.apply(this.text, arguments);
-    },
+    unHighLight() {
+        this.text.unHighLight(...arguments);
+    }
 
-    focus: function () {
+    focus() {
         this.editor.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
-    },
+    }
 
-    _setValue: function (v) {
+    _setValue(v) {
         this.editor.setValue(this._formatText(v));
-    },
+    }
 
-    _showInput: function () {
+    _showInput() {
         this.editor.visible();
         this.text.invisible();
-    },
+    }
 
-    _showHint: function () {
+    _showHint() {
         this.editor.invisible();
         this.text.visible();
-    },
+    }
 
-    isValid: function () {
+    isValid() {
         return this.editor.isValid();
-    },
+    }
 
-    setErrorText: function (text) {
+    setErrorText(text) {
         this.editor.setErrorText(text);
-    },
+    }
 
-    getErrorText: function () {
+    getErrorText() {
         return this.editor.getErrorText();
-    },
+    }
 
-    isEditing: function () {
+    isEditing() {
         return this.editor.isEditing();
-    },
+    }
 
-    getLastValidValue: function () {
+    getLastValidValue() {
         return this.editor.getLastValidValue();
-    },
+    }
 
-    getLastChangedValue: function () {
+    getLastChangedValue() {
         return this.editor.getLastChangedValue();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this._setValue(v);
         this._lastValue = this._trimValue(v);
-    },
+    }
 
-    getValue: function () {
-        return BI.trim(this.editor.getValue());
-    },
+    getValue() {
+        return trim(this.editor.getValue());
+    }
 
-    getState: function () {
+    getState() {
         return this.editor.getState();
-    },
+    }
 
-    setState: function (v) {
+    setState(v) {
         this.editor.setState(v);
-    },
+    }
 
-    setTipType: function (v) {
+    setTipType(v) {
         this.editor.setTipType(v);
-    },
+    }
 
-    getText: function () {
+    getText() {
         return this.editor.getText();
-    },
-});
-BI.SelectPatchEditor.EVENT_CHANGE = "EVENT_CHANGE";
-BI.SelectPatchEditor.EVENT_FOCUS = "EVENT_FOCUS";
-BI.SelectPatchEditor.EVENT_BLUR = "EVENT_BLUR";
-
-BI.shortcut("bi.select_patch_editor", BI.SelectPatchEditor);
+    }
+}

src/widget/multiselect/trigger/searcher.multiselect.insert.js

@@ -1,161 +1,196 @@
-/**
- * searcher
- * Created by guy on 15/11/3.
- * @class BI.MultiSelectInsertSearcher
- * @extends Widget
- */
-BI.MultiSelectInsertSearcher = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectInsertSearcher.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    i18nText,
+    createWidget,
+    isNotNull,
+    isEmptyArray,
+    size,
+    each
+} from "@/core";
+import { MultiSelectEditor } from "./editor.multiselect";
+import { Searcher } from "@/base";
+import { MultiSelectSearchInsertPane } from "../search/multiselect.search.insert.pane";
+
+@shortcut()
+export class MultiSelectInsertSearcher extends Widget {
+    static xtype = "bi.multi_select_insert_searcher";
+
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_START = "EVENT_START";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_PAUSE = "EVENT_PAUSE";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_BLUR = "EVENT_BLUR";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-searcher",
-            itemsCreator: BI.emptyFn,
+            itemsCreator: emptyFn,
             itemHeight: 24,
             el: {},
             popup: {},
-            valueFormatter: BI.emptyFn,
+            valueFormatter: emptyFn,
             adapter: null,
             masker: {},
-            watermark: BI.i18nText("BI-Basic_Search_And_Patch_Paste"),
+            watermark: i18nText("BI-Basic_Search_And_Patch_Paste"),
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectInsertSearcher.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.editor = BI.createWidget(o.el, {
-            type: "bi.multi_select_editor",
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.editor = createWidget(o.el, {
+            type: MultiSelectEditor.xtype,
             watermark: o.watermark,
             height: o.height,
             text: o.text,
             defaultText: o.defaultText,
             listeners: [
                 {
-                    eventName: BI.MultiSelectEditor.EVENT_FOCUS,
-                    action: function () {
-                        self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_FOCUS);
-                    }
-                }, {
-                    eventName: BI.MultiSelectEditor.EVENT_BLUR,
-                    action: function () {
-                        self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_BLUR);
-                    }
+                    eventName: MultiSelectEditor.EVENT_FOCUS,
+                    action() {
+                        self.fireEvent(MultiSelectInsertSearcher.EVENT_FOCUS);
+                    },
+                },
+                {
+                    eventName: MultiSelectEditor.EVENT_BLUR,
+                    action() {
+                        self.fireEvent(MultiSelectInsertSearcher.EVENT_BLUR);
+                    },
                 }
-            ]
+            ],
         });
 
-        this.searcher = BI.createWidget({
-            type: "bi.searcher",
+        this.searcher = createWidget({
+            type: Searcher.xtype,
             element: this,
             height: o.height,
             isAutoSearch: false,
             isAutoSync: false,
-            onSearch: function (op, callback) {
+            onSearch(op, callback) {
                 callback();
             },
             el: this.editor,
 
-            popup: BI.extend({
-                type: "bi.multi_select_search_insert_pane",
-                valueFormatter: o.valueFormatter,
-                itemFormatter: o.itemFormatter,
-                keywordGetter: function () {
-                    return self.editor.getKeyword();
-                },
-                itemsCreator: function (op, callback) {
-                    var keyword = self.editor.getKeyword();
-                    op.keywords = [keyword];
-                    this.setKeyword(keyword);
-                    o.itemsCreator(op, function () {
-                        if (keyword === self.editor.getValue()) {
-                            callback.apply(null, arguments);
-                        }
-                    });
+            popup: extend(
+                {
+                    type: MultiSelectSearchInsertPane.xtype,
+                    valueFormatter: o.valueFormatter,
+                    itemFormatter: o.itemFormatter,
+                    keywordGetter() {
+                        return self.editor.getKeyword();
+                    },
+                    itemsCreator(op, callback) {
+                        const keyword = self.editor.getKeyword();
+                        op.keywords = [keyword];
+                        this.setKeyword(keyword);
+                        o.itemsCreator(op, function () {
+                            if (keyword === self.editor.getValue()) {
+                                callback(...arguments);
+                            }
+                        });
+                    },
+                    itemHeight: o.itemHeight,
+                    value: o.value,
                 },
-                itemHeight: o.itemHeight,
-                value: o.value,
-            }, o.popup),
+                o.popup
+            ),
 
             adapter: o.adapter,
-            masker: o.masker
+            masker: o.masker,
         });
-        this.searcher.on(BI.Searcher.EVENT_START, function () {
-            self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_START);
+        this.searcher.on(Searcher.EVENT_START, () => {
+            self.fireEvent(MultiSelectInsertSearcher.EVENT_START);
         });
-        this.searcher.on(BI.Searcher.EVENT_PAUSE, function () {
-            if (this.hasMatched()) {
-
-            }
-            self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_PAUSE);
+        this.searcher.on(Searcher.EVENT_PAUSE, () => {
+            self.fireEvent(MultiSelectInsertSearcher.EVENT_PAUSE);
         });
-        this.searcher.on(BI.Searcher.EVENT_STOP, function () {
-            self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_STOP);
+        this.searcher.on(Searcher.EVENT_STOP, () => {
+            self.fireEvent(MultiSelectInsertSearcher.EVENT_STOP);
         });
-        this.searcher.on(BI.Searcher.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_CHANGE, arguments);
+        this.searcher.on(Searcher.EVENT_CHANGE, function () {
+            self.fireEvent(MultiSelectInsertSearcher.EVENT_CHANGE, arguments);
         });
-        this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () {
-            var keywords = this.getKeywords();
-            self.fireEvent(BI.MultiSelectInsertSearcher.EVENT_SEARCHING, keywords.length > 2000 ? keywords.slice(0, 2000).concat([BI.BlankSplitChar]) : keywords.slice(0, 2000));
+        this.searcher.on(Searcher.EVENT_SEARCHING, function () {
+            const keywords = this.getKeywords();
+            self.fireEvent(
+                MultiSelectInsertSearcher.EVENT_SEARCHING,
+                keywords.length > 2000
+                    ? keywords.slice(0, 2000).concat([BI.BlankSplitChar])
+                    : keywords.slice(0, 2000)
+            );
         });
-        if (BI.isNotNull(o.value)) {
+        if (isNotNull(o.value)) {
             this.setState(o.value);
         }
-    },
+    }
 
-    adjustView: function () {
+    adjustView() {
         this.searcher.adjustView();
-    },
+    }
 
-    isSearching: function () {
+    isSearching() {
         return this.searcher.isSearching();
-    },
+    }
 
-    stopSearch: function () {
+    stopSearch() {
         this.searcher.stopSearch();
-    },
+    }
 
-    getKeywordsLength: function () {
-        var keywords = this.editor.getKeywords();
+    getKeywordsLength() {
+        const keywords = this.editor.getKeywords();
 
-        return keywords[keywords.length - 1] === BI.BlankSplitChar ? keywords.length - 1 : keywords.length;
-    },
+        return keywords[keywords.length - 1] === BI.BlankSplitChar
+            ? keywords.length - 1
+            : keywords.length;
+    }
 
-    getKeyword: function () {
-        var keywords = this.editor.getKeywords().slice(0, 2000);
+    getKeyword() {
+        let keywords = this.editor.getKeywords().slice(0, 2000);
         if (keywords[keywords.length - 1] === BI.BlankSplitChar) {
             keywords = keywords.slice(0, keywords.length - 1);
         }
 
-        return BI.isEmptyArray(keywords) ? "" : keywords[keywords.length - 1];
-    },
+        return isEmptyArray(keywords) ? "" : keywords[keywords.length - 1];
+    }
 
-    hasMatched: function () {
+    hasMatched() {
         return this.searcher.hasMatched();
-    },
+    }
 
-    hasChecked: function () {
+    hasChecked() {
         return this.searcher.getView() && this.searcher.getView().hasChecked();
-    },
+    }
 
-    setAdapter: function (adapter) {
+    setAdapter(adapter) {
         this.searcher.setAdapter(adapter);
-    },
+    }
 
-    setState: function (ob) {
-        var o = this.options;
+    setState(ob) {
+        let state;
+        const o = this.options;
         ob || (ob = {});
         ob.value || (ob.value = []);
         if (ob.type === BI.Selection.All) {
             if (ob.value.length === 0) {
                 this.editor.setState(BI.Selection.All);
-            } else if (BI.size(ob.assist) <= 20) {
-                var state = "";
-                BI.each(ob.assist, function (i, v) {
+            } else if (size(ob.assist) <= 20) {
+                state = "";
+                each(ob.assist, (i, v) => {
                     if (i === 0) {
-                        state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v));
+                        state +=
+                            `${
+                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                     } else {
-                        state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v));
+                        state +=
+                            `,${
+                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                     }
                 });
                 this.editor.setState(state);
@@ -165,13 +200,17 @@ BI.MultiSelectInsertSearcher = BI.inherit(BI.Widget, {
         } else {
             if (ob.value.length === 0) {
                 this.editor.setState(BI.Selection.None);
-            } else if (BI.size(ob.value) <= 20) {
-                var state = "";
-                BI.each(ob.value, function (i, v) {
+            } else if (size(ob.value) <= 20) {
+                state = "";
+                each(ob.value, (i, v) => {
                     if (i === 0) {
-                        state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v));
+                        state +=
+                            `${
+                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                     } else {
-                        state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v));
+                        state +=
+                            `,${
+                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                     }
                 });
                 this.editor.setState(state);
@@ -179,36 +218,26 @@ BI.MultiSelectInsertSearcher = BI.inherit(BI.Widget, {
                 this.editor.setState(BI.Selection.Multi);
             }
         }
-    },
+    }
 
-    getState: function () {
+    getState() {
         return this.editor.getState();
-    },
+    }
 
-    setValue: function (ob) {
+    setValue(ob) {
         this.setState(ob);
         this.searcher.setValue(ob);
-    },
+    }
 
-    getKey: function () {
+    getKey() {
         return this.editor.getValue();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.searcher.getValue();
-    },
-
-    populate: function (items) {
-        this.searcher.populate.apply(this.searcher, arguments);
-    }
-});
-
-BI.MultiSelectInsertSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-BI.MultiSelectInsertSearcher.EVENT_CHANGE = "EVENT_CHANGE";
-BI.MultiSelectInsertSearcher.EVENT_START = "EVENT_START";
-BI.MultiSelectInsertSearcher.EVENT_STOP = "EVENT_STOP";
-BI.MultiSelectInsertSearcher.EVENT_PAUSE = "EVENT_PAUSE";
-BI.MultiSelectInsertSearcher.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiSelectInsertSearcher.EVENT_FOCUS = "EVENT_FOCUS";
-BI.MultiSelectInsertSearcher.EVENT_BLUR = "EVENT_BLUR";
-BI.shortcut("bi.multi_select_insert_searcher", BI.MultiSelectInsertSearcher);
+    }
+
+    populate(items) {
+        this.searcher.populate(...arguments);
+    }
+}

src/widget/multiselect/trigger/searcher.multiselect.js

@@ -1,160 +1,187 @@
-/**
- * searcher
- * Created by guy on 15/11/3.
- * @class BI.MultiSelectSearcher
- * @extends Widget
- */
-BI.MultiSelectSearcher = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectSearcher.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    i18nText,
+    createWidget,
+    isNotNull,
+    size,
+    each
+} from "@/core";
+import { MultiSelectEditor } from "./editor.multiselect";
+import { Searcher } from "@/base";
+import { MultiSelectSearchPane } from "../search/multiselect.search.pane";
+
+@shortcut()
+export class MultiSelectSearcher extends Widget {
+    static xtype = "bi.multi_select_searcher";
+
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_START = "EVENT_START";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_PAUSE = "EVENT_PAUSE";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_BLUR = "EVENT_BLUR";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-searcher",
-            itemsCreator: BI.emptyFn,
+            itemsCreator: emptyFn,
             el: {},
             popup: {},
-            valueFormatter: BI.emptyFn,
+            valueFormatter: emptyFn,
             adapter: null,
             masker: {},
-            defaultText: BI.i18nText("BI-Basic_Please_Select"),
-            itemHeight: 24
+            defaultText: i18nText("BI-Basic_Please_Select"),
+            itemHeight: 24,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectSearcher.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.editor = BI.createWidget(o.el, {
-            type: "bi.multi_select_editor",
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.editor = createWidget(o.el, {
+            type: MultiSelectEditor.xtype,
             height: o.height,
             text: o.text,
             defaultText: o.defaultText,
             watermark: o.watermark,
             listeners: [
                 {
-                    eventName: BI.MultiSelectEditor.EVENT_FOCUS,
-                    action: function () {
-                        self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS);
-                    }
-                }, {
-                    eventName: BI.MultiSelectEditor.EVENT_BLUR,
-                    action: function () {
-                        self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR);
-                    }
+                    eventName: MultiSelectEditor.EVENT_FOCUS,
+                    action() {
+                        self.fireEvent(MultiSelectSearcher.EVENT_FOCUS);
+                    },
+                },
+                {
+                    eventName: MultiSelectEditor.EVENT_BLUR,
+                    action() {
+                        self.fireEvent(MultiSelectSearcher.EVENT_BLUR);
+                    },
                 }
-            ]
+            ],
         });
 
-        this.searcher = BI.createWidget({
-            type: "bi.searcher",
+        this.searcher = createWidget({
+            type: Searcher.xtype,
             element: this,
             height: o.height,
             isAutoSearch: false,
             isAutoSync: false,
-            onSearch: function (op, callback) {
+            onSearch(op, callback) {
                 callback();
             },
             el: this.editor,
-            popup: BI.extend({
-                type: "bi.multi_select_search_pane",
-                valueFormatter: o.valueFormatter,
-                itemFormatter: o.itemFormatter,
-                keywordGetter: function () {
-                    return self.editor.getValue();
-                },
-                itemsCreator: function (op, callback) {
-                    var keyword = self.editor.getValue();
-                    op.keywords = [keyword];
-                    o.itemsCreator(op, function () {
-                        var keyword = self.editor.getValue();
+            popup: extend(
+                {
+                    type: MultiSelectSearchPane.xtype,
+                    valueFormatter: o.valueFormatter,
+                    itemFormatter: o.itemFormatter,
+                    keywordGetter() {
+                        return self.editor.getValue();
+                    },
+                    itemsCreator(op, callback) {
+                        const keyword = self.editor.getValue();
                         op.keywords = [keyword];
-                        o.itemsCreator(op, function () {
-                            if (keyword === self.editor.getValue()) {
-                                callback.apply(null, arguments);
-                            }
+                        o.itemsCreator(op, () => {
+                            const keyword = self.editor.getValue();
+                            op.keywords = [keyword];
+                            o.itemsCreator(op, function () {
+                                if (keyword === self.editor.getValue()) {
+                                    callback(...arguments);
+                                }
+                            });
                         });
-                    });
+                    },
+                    itemHeight: o.itemHeight,
+                    value: o.value,
                 },
-                itemHeight: o.itemHeight,
-                value: o.value
-            }, o.popup),
+                o.popup
+            ),
 
             adapter: o.adapter,
-            masker: o.masker
+            masker: o.masker,
         });
-        this.searcher.on(BI.Searcher.EVENT_START, function () {
-            self.fireEvent(BI.MultiSelectSearcher.EVENT_START);
+        this.searcher.on(Searcher.EVENT_START, () => {
+            self.fireEvent(MultiSelectSearcher.EVENT_START);
         });
-        this.searcher.on(BI.Searcher.EVENT_PAUSE, function () {
-            if (this.hasMatched()) {
-
-            }
-            self.fireEvent(BI.MultiSelectSearcher.EVENT_PAUSE);
+        this.searcher.on(Searcher.EVENT_PAUSE, () => {
+            self.fireEvent(MultiSelectSearcher.EVENT_PAUSE);
         });
-        this.searcher.on(BI.Searcher.EVENT_STOP, function () {
-            self.fireEvent(BI.MultiSelectSearcher.EVENT_STOP);
+        this.searcher.on(Searcher.EVENT_STOP, () => {
+            self.fireEvent(MultiSelectSearcher.EVENT_STOP);
         });
-        this.searcher.on(BI.Searcher.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectSearcher.EVENT_CHANGE, arguments);
+        this.searcher.on(Searcher.EVENT_CHANGE, function () {
+            self.fireEvent(MultiSelectSearcher.EVENT_CHANGE, arguments);
         });
-        this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () {
-            var keywords = this.getKeywords();
-            self.fireEvent(BI.MultiSelectSearcher.EVENT_SEARCHING, keywords);
+        this.searcher.on(Searcher.EVENT_SEARCHING, function () {
+            const keywords = this.getKeywords();
+            self.fireEvent(MultiSelectSearcher.EVENT_SEARCHING, keywords);
         });
-        if (BI.isNotNull(o.value)) {
+        if (isNotNull(o.value)) {
             this.setState(o.value);
         }
-    },
+    }
 
-    focus: function () {
+    focus() {
         this.editor.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
-    },
+    }
 
-    adjustView: function () {
+    adjustView() {
         this.searcher.adjustView();
-    },
+    }
 
-    isSearching: function () {
+    isSearching() {
         return this.searcher.isSearching();
-    },
+    }
 
-    stopSearch: function () {
+    stopSearch() {
         this.searcher.stopSearch();
-    },
+    }
 
-    getKeyword: function () {
+    getKeyword() {
         return this.editor.getValue();
-    },
+    }
 
-    hasMatched: function () {
+    hasMatched() {
         return this.searcher.hasMatched();
-    },
+    }
 
-    hasChecked: function () {
+    hasChecked() {
         return this.searcher.getView() && this.searcher.getView().hasChecked();
-    },
+    }
 
-    setAdapter: function (adapter) {
+    setAdapter(adapter) {
         this.searcher.setAdapter(adapter);
-    },
+    }
 
-    setState: function (ob) {
-        var o = this.options;
+    setState(ob) {
+        let state;
+        const o = this.options;
         ob || (ob = {});
         ob.value || (ob.value = []);
         if (ob.type === BI.Selection.All) {
             if (ob.value.length === 0) {
                 this.editor.setState(BI.Selection.All);
-            } else if (BI.size(ob.assist) <= 20) {
-                var state = "";
-                BI.each(ob.assist, function (i, v) {
+            } else if (size(ob.assist) <= 20) {
+                state = "";
+                each(ob.assist, (i, v) => {
                     if (i === 0) {
-                        state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v));
+                        state +=
+                            `${
+                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                     } else {
-                        state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v));
+                        state +=
+                            `,${
+                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                     }
                 });
                 this.editor.setState(state);
@@ -164,13 +191,17 @@ BI.MultiSelectSearcher = BI.inherit(BI.Widget, {
         } else {
             if (ob.value.length === 0) {
                 this.editor.setState(BI.Selection.None);
-            } else if (BI.size(ob.value) <= 20) {
-                var state = "";
-                BI.each(ob.value, function (i, v) {
+            } else if (size(ob.value) <= 20) {
+                state = "";
+                each(ob.value, (i, v) => {
                     if (i === 0) {
-                        state += "" + (v === null ? "" : (o.valueFormatter(v + "") || v));
+                        state +=
+                            `${
+                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                     } else {
-                        state += "," + (v === null ? "" : (o.valueFormatter(v + "") || v));
+                        state +=
+                            `,${
+                                v === null ? "" : o.valueFormatter(`${v}`) || v}`;
                     }
                 });
                 this.editor.setState(state);
@@ -178,36 +209,26 @@ BI.MultiSelectSearcher = BI.inherit(BI.Widget, {
                 this.editor.setState(BI.Selection.Multi);
             }
         }
-    },
+    }
 
-    getState: function () {
+    getState() {
         return this.editor.getState();
-    },
+    }
 
-    setValue: function (ob) {
+    setValue(ob) {
         this.setState(ob);
         this.searcher.setValue(ob);
-    },
+    }
 
-    getKey: function () {
+    getKey() {
         return this.editor.getValue();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.searcher.getValue();
-    },
-
-    populate: function (items) {
-        this.searcher.populate.apply(this.searcher, arguments);
-    }
-});
-
-BI.MultiSelectSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-BI.MultiSelectSearcher.EVENT_CHANGE = "EVENT_CHANGE";
-BI.MultiSelectSearcher.EVENT_START = "EVENT_START";
-BI.MultiSelectSearcher.EVENT_STOP = "EVENT_STOP";
-BI.MultiSelectSearcher.EVENT_PAUSE = "EVENT_PAUSE";
-BI.MultiSelectSearcher.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiSelectSearcher.EVENT_FOCUS = "EVENT_FOCUS";
-BI.MultiSelectSearcher.EVENT_BLUR = "EVENT_BLUR";
-BI.shortcut("bi.multi_select_searcher", BI.MultiSelectSearcher);
+    }
+
+    populate(items) {
+        this.searcher.populate(...arguments);
+    }
+}

src/widget/multiselect/trigger/switcher.checkselected.js

@@ -1,112 +1,128 @@
-/**
- * 查看已选switcher
- * Created by guy on 15/11/3.
- * @class BI.MultiSelectCheckSelectedSwitcher
- * @extends Widget
- */
-BI.MultiSelectCheckSelectedSwitcher = BI.inherit(BI.Widget, {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    Events,
+    nextTick
+} from "@/core";
+import { Switcher } from "@/base";
+import { MultiSelectCheckSelectedButton } from "./button.checkselected";
+import { MultiSelectCheckPane } from "../check/multiselect.check.pane";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectCheckSelectedSwitcher.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class MultiSelectCheckSelectedSwitcher extends Widget {
+    static xtype = "bi.multi_select_check_selected_switcher";
+
+    static EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-check-selected-switcher",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
             el: {},
             popup: {},
             adapter: null,
-            masker: {}
+            masker: {},
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectCheckSelectedSwitcher.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
 
-        this.button = BI.createWidget(o.el, {
-            type: "bi.multi_select_check_selected_button",
+        this.button = createWidget(o.el, {
+            type: MultiSelectCheckSelectedButton.xtype,
             itemsCreator: o.itemsCreator,
-            value: o.value
+            value: o.value,
         });
-        this.button.on(BI.Events.VIEW, function () {
-            self.fireEvent(BI.Events.VIEW, arguments);
+        this.button.on(Events.VIEW, function () {
+            self.fireEvent(Events.VIEW, arguments);
         });
-        this.switcher = BI.createWidget({
-            type: "bi.switcher",
+        this.switcher = createWidget({
+            type: Switcher.xtype,
             toggle: false,
             element: this,
             el: this.button,
-            popup: BI.extend({
-                type: "bi.multi_select_check_pane",
-                valueFormatter: o.valueFormatter,
-                itemsCreator: o.itemsCreator,
-                onClickContinueSelect: function () {
-                    self.switcher.hideView();
-                },
-                ref: function (_ref) {
-                    self.checkPane = _ref;
+            popup: extend(
+                {
+                    type: MultiSelectCheckPane.xtype,
+                    valueFormatter: o.valueFormatter,
+                    itemsCreator: o.itemsCreator,
+                    onClickContinueSelect() {
+                        self.switcher.hideView();
+                    },
+                    ref(_ref) {
+                        self.checkPane = _ref;
+                    },
+                    value: o.value,
                 },
-                value: o.value
-            }, o.popup),
+                o.popup
+            ),
             adapter: o.adapter,
-            masker: o.masker
+            masker: o.masker,
         });
-        this.switcher.on(BI.Switcher.EVENT_TRIGGER_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE);
+        this.switcher.on(Switcher.EVENT_TRIGGER_CHANGE, () => {
+            self.fireEvent(
+                MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE
+            );
         });
-        this.switcher.on(BI.Switcher.EVENT_BEFORE_POPUPVIEW, function () {
-            self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW);
+        this.switcher.on(Switcher.EVENT_BEFORE_POPUPVIEW, () => {
+            self.fireEvent(
+                MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW
+            );
         });
-        this.switcher.on(BI.Switcher.EVENT_AFTER_HIDEVIEW, function () {
-            self.fireEvent(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW);
+        this.switcher.on(Switcher.EVENT_AFTER_HIDEVIEW, () => {
+            self.fireEvent(
+                MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW
+            );
         });
-        this.switcher.on(BI.Switcher.EVENT_AFTER_POPUPVIEW, function () {
-            var me = this;
-            BI.nextTick(function () {
+        this.switcher.on(Switcher.EVENT_AFTER_POPUPVIEW, function () {
+            const me = this;
+            nextTick(() => {
                 me._populate();
             });
         });
-    },
+    }
 
-    adjustView: function () {
+    adjustView() {
         this.switcher.adjustView();
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this.switcher.empty();
         this.switcher.hideView();
-    },
+    }
 
-    setAdapter: function (adapter) {
+    setAdapter(adapter) {
         this.switcher.setAdapter(adapter);
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.switcher.setValue(v);
-    },
+    }
 
-    // 与setValue的区别是只更新查看已选面板的的selectedValue, 不会更新按钮的计数
-    updateSelectedValue: function (v) {
+    updateSelectedValue(v) {
         this.checkPane.setValue(v);
-    },
+    }
 
-    setButtonChecked: function (v) {
+    setButtonChecked(v) {
         this.button.setValue(v);
-    },
-
-    getValue: function () {
+    }
 
-    },
+    getValue() {
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.switcher.populate.apply(this.switcher, arguments);
-    },
+    }
 
-    populateSwitcher: function () {
+    populateSwitcher() {
         this.button.populate.apply(this.button, arguments);
     }
-});
-
-BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE = "EVENT_TRIGGER_CHANGE";
-BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
-BI.shortcut("bi.multi_select_check_selected_switcher", BI.MultiSelectCheckSelectedSwitcher);
+}

src/widget/multiselecttree/multiselecttree.js

@@ -1,171 +1,193 @@
-/**
- * Created by zcf_1 on 2017/5/11.
- */
-BI.MultiSelectTree = BI.inherit(BI.Single, {
-    _constant: {
-        EDITOR_HEIGHT: 24
-    },
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectTree.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    nextTick,
+    AbsoluteLayout
+} from "@/core";
+import { Single, Searcher } from "@/base";
+import { MultiSelectTreePopup } from "./multiselecttree.popup";
+
+@shortcut()
+export class MultiSelectTree extends Single {
+    static xtype = "bi.multi_select_tree";
+
+    _constant = { EDITOR_HEIGHT: 24 };
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-select-tree",
-            itemsCreator: BI.emptyFn
+            itemsCreator: emptyFn,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiSelectTree.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.storeValue = {value: {}};
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.storeValue = { value: {} };
 
-        this.adapter = BI.createWidget({
-            type: "bi.multi_select_tree_popup",
+        this.adapter = createWidget({
+            type: MultiSelectTreePopup.xtype,
             itemsCreator: o.itemsCreator,
-            showLine: o.showLine
+            showLine: o.showLine,
         });
-        this.adapter.on(BI.MultiSelectTreePopup.EVENT_CHANGE, function () {
+        this.adapter.on(MultiSelectTreePopup.EVENT_CHANGE, () => {
             if (self.searcher.isSearching()) {
-                self.storeValue = {value: self.searcherPane.getValue()};
+                self.storeValue = { value: self.searcherPane.getValue() };
             } else {
-                self.storeValue = {value: self.adapter.getValue()};
+                self.storeValue = { value: self.adapter.getValue() };
             }
             self.setSelectedValue(self.storeValue.value);
-            self.fireEvent(BI.MultiSelectTree.EVENT_CHANGE);
+            self.fireEvent(MultiSelectTree.EVENT_CHANGE);
         });
 
         // 搜索中的时候用的是parttree，同adapter中的synctree不一样
-        this.searcherPane = BI.createWidget({
+        this.searcherPane = createWidget({
             type: "bi.multi_tree_search_pane",
             cls: "bi-border-left bi-border-right bi-border-bottom",
-            keywordGetter: function () {
+            keywordGetter() {
                 return self.searcher.getKeyword();
             },
-            itemsCreator: function (op, callback) {
+            itemsCreator(op, callback) {
                 op.keyword = self.searcher.getKeyword();
                 o.itemsCreator(op, callback);
-            }
+            },
         });
         this.searcherPane.setVisible(false);
 
-        this.searcher = BI.createWidget({
-            type: "bi.searcher",
+        this.searcher = createWidget({
+            type: Searcher.xtype,
             isAutoSearch: false,
             isAutoSync: false,
-            onSearch: function (op, callback) {
+            onSearch(op, callback) {
                 callback({
-                    keyword: self.searcher.getKeyword()
+                    keyword: self.searcher.getKeyword(),
                 });
             },
             adapter: this.adapter,
             popup: this.searcherPane,
             masker: false,
-            listeners: [{
-                eventName: BI.Searcher.EVENT_START,
-                action: function () {
-                    self._showSearcherPane();
-                    // self.storeValue = {value: self.adapter.getValue()};
-                    // self.searcherPane.setSelectedValue(self.storeValue.value);
-                }
-            }, {
-                eventName: BI.Searcher.EVENT_STOP,
-                action: function () {
-                    self._showAdapter();
-                    // self.storeValue = {value: self.searcherPane.getValue()};
-                    // self.adapter.setSelectedValue(self.storeValue.value);
-                    BI.nextTick(function () {
-                        self.adapter.populate();
-                    });
-                }
-            }, {
-                eventName: BI.Searcher.EVENT_CHANGE,
-                action: function () {
-                    if (self.searcher.isSearching()) {
-                        self.storeValue = {value: self.searcherPane.getValue()};
-                    } else {
-                        self.storeValue = {value: self.adapter.getValue()};
-                    }
-                    self.setSelectedValue(self.storeValue.value);
-                    self.fireEvent(BI.MultiSelectTree.EVENT_CHANGE);
+            listeners: [
+                {
+                    eventName: Searcher.EVENT_START,
+                    action() {
+                        self._showSearcherPane();
+                        // self.storeValue = {value: self.adapter.getValue()};
+                        // self.searcherPane.setSelectedValue(self.storeValue.value);
+                    },
+                },
+                {
+                    eventName: Searcher.EVENT_STOP,
+                    action() {
+                        self._showAdapter();
+                        // self.storeValue = {value: self.searcherPane.getValue()};
+                        // self.adapter.setSelectedValue(self.storeValue.value);
+                        nextTick(() => {
+                            self.adapter.populate();
+                        });
+                    },
+                },
+                {
+                    eventName: Searcher.EVENT_CHANGE,
+                    action() {
+                        if (self.searcher.isSearching()) {
+                            self.storeValue = {
+                                value: self.searcherPane.getValue(),
+                            };
+                        } else {
+                            self.storeValue = {
+                                value: self.adapter.getValue(),
+                            };
+                        }
+                        self.setSelectedValue(self.storeValue.value);
+                        self.fireEvent(MultiSelectTree.EVENT_CHANGE);
+                    },
+                },
+                {
+                    eventName: Searcher.EVENT_PAUSE,
+                    action() {
+                        self._showAdapter();
+                        // BI-64732 pause 和stop一致, 都应该刷新adapter
+                        nextTick(() => {
+                            self.adapter.populate();
+                        });
+                    },
                 }
-            }, {
-                eventName: BI.Searcher.EVENT_PAUSE,
-                action: function () {
-                    self._showAdapter();
-                    // BI-64732 pause 和stop一致, 都应该刷新adapter
-                    BI.nextTick(function () {
-                        self.adapter.populate();
-                    });
-                }
-            }]
+            ],
         });
 
-        BI.createWidget({
+        createWidget({
             type: "bi.vertical_fill",
             element: this,
-            items: [{
-                el: this.searcher,
-                height: ""
-            }, {
-                el: this.adapter,
-                height: "fill"
-            }]
+            items: [
+                {
+                    el: this.searcher,
+                    height: "",
+                },
+                {
+                    el: this.adapter,
+                    height: "fill",
+                }
+            ],
         });
-        BI.createWidget({
-            type: "bi.absolute",
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
-                el: this.searcherPane,
-                top: this._constant.EDITOR_HEIGHT,
-                bottom: 0,
-                left: 0,
-                right: 0
-            }]
+            items: [
+                {
+                    el: this.searcherPane,
+                    top: this._constant.EDITOR_HEIGHT,
+                    bottom: 0,
+                    left: 0,
+                    right: 0,
+                }
+            ],
         });
+    }
 
-    },
-
-    _showAdapter: function () {
+    _showAdapter() {
         this.adapter.setVisible(true);
         this.searcherPane.setVisible(false);
-    },
+    }
 
-    _showSearcherPane: function () {
+    _showSearcherPane() {
         this.searcherPane.setVisible(true);
         this.adapter.setVisible(false);
-    },
-
-    resize: function () {
+    }
 
-    },
+    resize() {
+    }
 
-    setSelectedValue: function (v) {
+    setSelectedValue(v) {
         this.storeValue.value = v || {};
         this.adapter.setSelectedValue(v);
         this.searcherPane.setSelectedValue(v);
         this.searcher.setValue({
-            value: v || {}
+            value: v || {},
         });
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.adapter.setValue(v);
-    },
+    }
 
-    stopSearch: function () {
+    stopSearch() {
         this.searcher.stopSearch();
-    },
+    }
 
-    updateValue: function (v) {
+    updateValue(v) {
         this.adapter.updateValue(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.storeValue.value;
-    },
+    }
 
-    populate: function () {
+    populate() {
         this.adapter.populate();
     }
-});
-BI.MultiSelectTree.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_select_tree", BI.MultiSelectTree);
+}

src/widget/multiselecttree/multiselecttree.popup.js

@@ -1,58 +1,63 @@
-/**
- * Created by zcf on 2016/12/21.
- */
-BI.MultiSelectTreePopup = BI.inherit(BI.Widget, {
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiSelectTreePopup.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-multi-select-tree-popup bi-border-left bi-border-right bi-border-bottom",
-            itemsCreator: BI.emptyFn
+import { shortcut, Widget, extend, emptyFn, createWidget } from "@/core";
+import { TreeView, Asynctree } from "@/case";
+
+@shortcut()
+export class MultiSelectTreePopup extends Widget {
+    static xtype = "bi.multi_select_tree_popup";
+
+    static EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
+            baseCls:
+                "bi-multi-select-tree-popup bi-border-left bi-border-right bi-border-bottom",
+            itemsCreator: emptyFn,
         });
-    },
-    _init: function () {
-        BI.MultiSelectTreePopup.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.popup = BI.createWidget({
-            type: "bi.async_tree",
+    }
+
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.popup = createWidget({
+            type: Asynctree.xtype,
             showLine: o.showLine,
             element: this,
-            itemsCreator: o.itemsCreator
+            itemsCreator: o.itemsCreator,
         });
-        this.popup.on(BI.TreeView.EVENT_AFTERINIT, function () {
-            self.fireEvent(BI.MultiSelectTreePopup.EVENT_AFTER_INIT);
+        this.popup.on(TreeView.EVENT_AFTERINIT, () => {
+            self.fireEvent(MultiSelectTreePopup.EVENT_AFTER_INIT);
         });
-        this.popup.on(BI.TreeView.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectTreePopup.EVENT_CHANGE);
+        this.popup.on(TreeView.EVENT_CHANGE, () => {
+            self.fireEvent(MultiSelectTreePopup.EVENT_CHANGE);
         });
-    },
+    }
 
-    hasChecked: function () {
+    hasChecked() {
         return this.popup.hasChecked();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.popup.getValue();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         v || (v = {});
         this.popup.setValue(v);
-    },
+    }
 
-    setSelectedValue: function (v) {
+    setSelectedValue(v) {
         v || (v = {});
         this.popup.setSelectedValue(v);
-    },
+    }
 
-    updateValue: function (v) {
+    updateValue(v) {
         this.popup.updateValue(v);
         this.popup.refresh();
-    },
+    }
 
-    populate: function (config) {
+    populate(config) {
         this.popup.stroke(config);
     }
-
-});
-BI.MultiSelectTreePopup.EVENT_AFTER_INIT = "EVENT_AFTER_INIT";
-BI.MultiSelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_select_tree_popup", BI.MultiSelectTreePopup);
+}

src/widget/multitree/check/multi.tree.check.pane.js

@@ -1,121 +1,128 @@
-/**
- *
- * @class BI.MultiTreeCheckPane
- * @extends BI.Pane
- */
-BI.MultiTreeCheckPane = BI.inherit(BI.Pane, {
-
-    constants: {
-        height: 25,
-        lgap: 10,
-        tgap: 5
-    },
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiTreeCheckPane.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    i18nText,
+    nextTick,
+    Events,
+    VerticalAdaptLayout, VTapeLayout
+} from "@/core";
+import { Pane, TextButton, Label } from "@/base";
+import { DisplayTree, TreeView } from "@/case";
+
+@shortcut()
+export class MultiTreeCheckPane extends Pane {
+    static xtype = "bi.multi_tree_check_pane";
+
+    constants = { height: 25, lgap: 10, tgap: 5 };
+
+    static EVENT_CONTINUE_CLICK = "EVENT_CONTINUE_CLICK";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-tree-check-pane bi-background",
-            onClickContinueSelect: BI.emptyFn,
+            onClickContinueSelect: emptyFn,
             el: {
-                type: "bi.display_tree"
-            }
+                type: DisplayTree.xtype,
+            },
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiTreeCheckPane.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, opts = this.options;
+        const self = this,
+            opts = this.options;
 
         this.selectedValues = {};
 
-        var continueSelect = BI.createWidget({
-            type: "bi.text_button",
-            title: BI.i18nText("BI-Continue_Select"),
-            text: BI.i18nText("BI-Continue_Select"),
-            cls: "multi-tree-check-selected"
+        const continueSelect = createWidget({
+            type: TextButton.xtype,
+            title: i18nText("BI-Continue_Select"),
+            text: i18nText("BI-Continue_Select"),
+            cls: "multi-tree-check-selected",
         });
-        continueSelect.on(BI.TextButton.EVENT_CHANGE, function () {
+        continueSelect.on(TextButton.EVENT_CHANGE, () => {
             opts.onClickContinueSelect();
-            BI.nextTick(function () {
+            nextTick(() => {
                 self.empty();
             });
         });
 
-        var backToPopup = BI.createWidget({
-            type: "bi.vertical_adapt",
+        const backToPopup = createWidget({
+            type: VerticalAdaptLayout.xtype,
             columnSize: ["auto", "auto"],
             cls: "multi-tree-continue-select",
             items: [
                 {
                     el: {
-                        type: "bi.label",
-                        title: BI.i18nText("BI-Selected_Data"),
-                        text: BI.i18nText("BI-Selected_Data")
+                        type: Label.xtype,
+                        title: i18nText("BI-Selected_Data"),
+                        text: i18nText("BI-Selected_Data"),
                     },
                     lgap: this.constants.lgap,
-                    tgap: this.constants.tgap
+                    tgap: this.constants.tgap,
                 },
                 {
                     el: continueSelect,
                     hgap: this.constants.lgap,
-                    tgap: this.constants.tgap
-                }]
+                    tgap: this.constants.tgap,
+                }
+            ],
         });
 
-        this.display = BI.createWidget(opts.el, {
-            type: "bi.display_tree",
+        this.display = createWidget(opts.el, {
+            type: DisplayTree.xtype,
             cls: "bi-multi-tree-display",
-            itemsCreator: function (op, callback) {
-                op.type = BI.TreeView.REQ_TYPE_GET_SELECTED_DATA;
+            itemsCreator(op, callback) {
+                op.type = TreeView.REQ_TYPE_GET_SELECTED_DATA;
                 opts.itemsCreator(op, callback);
             },
-            value: (opts.value || {}).value
+            value: (opts.value || {}).value,
         });
 
-        this.display.on(BI.Events.AFTERINIT, function () {
-            self.fireEvent(BI.Events.AFTERINIT);
+        this.display.on(Events.AFTERINIT, () => {
+            self.fireEvent(Events.AFTERINIT);
         });
 
-        this.display.on(BI.TreeView.EVENT_INIT, function () {
+        this.display.on(TreeView.EVENT_INIT, () => {
             backToPopup.setVisible(false);
         });
 
-        this.display.on(BI.TreeView.EVENT_AFTERINIT, function () {
+        this.display.on(TreeView.EVENT_AFTERINIT, () => {
             backToPopup.setVisible(true);
         });
 
-        BI.createWidget({
-            type: "bi.vtape",
+        createWidget({
+            type: VTapeLayout.xtype,
             element: this,
-            items: [{
-                height: this.constants.height,
-                el: backToPopup
-            }, {
-                height: "fill",
-                el: this.display
-            }]
+            items: [
+                {
+                    height: this.constants.height,
+                    el: backToPopup,
+                },
+                {
+                    height: "fill",
+                    el: this.display,
+                }
+            ],
         });
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.display.empty();
-    },
+    }
 
-    populate: function (configs) {
+    populate(configs) {
         this.display.stroke(configs);
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         v || (v = {});
         this.display.setSelectedValue(v.value);
-    },
-
-    getValue: function () {
-
     }
-});
 
-BI.MultiTreeCheckPane.EVENT_CONTINUE_CLICK = "EVENT_CONTINUE_CLICK";
-
-
-BI.shortcut("bi.multi_tree_check_pane", BI.MultiTreeCheckPane);
+    getValue() {
+    }
+}

src/widget/multitree/multi.tree.combo.js

@@ -1,33 +1,67 @@
-/**
- *
- * @class BI.MultiTreeCombo
- * @extends BI.Single
- */
-
-BI.MultiTreeCombo = BI.inherit(BI.Single, {
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiTreeCombo.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    toPix,
+    nextTick,
+    Events,
+    AbsoluteLayout,
+    VerticalAdaptLayout,
+    deepClone
+} from "@/core";
+import { Single, Combo } from "@/base";
+import { MultiTreeSearcher } from "./trigger/searcher.multi.tree";
+import { MultiTreePopup } from "./multi.tree.popup";
+import { MultiSelectTrigger } from "../multiselect/multiselect.trigger";
+import { TriggerIconButton } from "@/case";
+import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected";
+
+@shortcut()
+export class MultiTreeCombo extends Single {
+    static xtype = "bi.multi_tree_combo";
+
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-tree-combo",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
             height: 24,
             allowEdit: true,
             isNeedAdjustWidth: true,
         });
-    },
+    }
 
-    _init: function () {
-        var self = this, o = this.options;
-        BI.MultiTreeCombo.superclass._init.apply(this, arguments);
-        var isInit = false;
-        var want2showCounter = false;
+    _init() {
+        const triggerBtn = createWidget({
+            type: TriggerIconButton.xtype,
+            width: o.height,
+            height: o.height,
+            cls: "multi-select-trigger-icon-button",
+        });
+        let clear;
+        let change;
+        const self = this,
+            o = this.options;
+        super._init(...arguments);
+        let isInit = false;
+        let want2showCounter = false;
 
         this.storeValue = { value: o.value || {} };
 
-        this.trigger = BI.createWidget({
+        this.trigger = createWidget({
             type: "bi.multi_select_trigger",
             allowEdit: o.allowEdit,
-            height: BI.toPix(o.height, o.simple ? 1 : 2),
+            height: toPix(o.height, o.simple ? 1 : 2),
             valueFormatter: o.valueFormatter,
             text: o.text,
             defaultText: o.defaultText,
@@ -45,72 +79,78 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
                 itemsCreator: o.itemsCreator,
                 listeners: [
                     {
-                        eventName: BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE,
-                        action: function () {
+                        eventName: MultiTreeSearcher.EVENT_CLICK_TREE_NODE,
+                        action() {
                             self._dataChange = true;
-                        }
+                        },
                     }
                 ],
             },
-            value: { value: o.value || {} }
+            value: { value: o.value || {} },
         });
 
-        this.combo = BI.createWidget({
-            type: "bi.combo",
-            cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
+        this.combo = createWidget({
+            type: Combo.xtype,
+            cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius",
             toggle: !o.allowEdit,
             container: o.container,
             el: this.trigger,
             adjustLength: 1,
             popup: {
                 type: "bi.multi_tree_popup_view",
-                ref: function () {
+                ref() {
                     self.popup = this;
                     self.trigger.setAdapter(this);
                     self.numberCounter.setAdapter(this);
                 },
                 listeners: [
                     {
-                        eventName: BI.MultiTreePopup.EVENT_AFTERINIT,
-                        action: function () {
+                        eventName: MultiTreePopup.EVENT_AFTERINIT,
+                        action() {
                             self.numberCounter.adjustView();
                             isInit = true;
                             if (want2showCounter === true) {
                                 showCounter();
                             }
-                        }
-                    }, {
-                        eventName: BI.MultiTreePopup.EVENT_CHANGE,
-                        action: function () {
+                        },
+                    },
+                    {
+                        eventName: MultiTreePopup.EVENT_CHANGE,
+                        action() {
                             change = true;
-                            var val = {
+                            const val = {
                                 type: BI.Selection.Multi,
-                                value: this.hasChecked() ? this.getValue() : {}
+                                value: this.hasChecked() ? this.getValue() : {},
                             };
                             self.trigger.getSearcher().setState(val);
                             self.numberCounter.setButtonChecked(val);
                             self.storeValue = { value: self.combo.getValue() };
-                            self.fireEvent(BI.MultiTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue());
+                            self.fireEvent(
+                                MultiTreeCombo.EVENT_CLICK_ITEM,
+                                self.combo.getValue()
+                            );
                             self._dataChange = true;
-                        }
-                    }, {
-                        eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM,
-                        action: function () {
+                        },
+                    },
+                    {
+                        eventName: MultiTreePopup.EVENT_CLICK_CONFIRM,
+                        action() {
                             self.combo.hideView();
-                        }
-                    }, {
-                        eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR,
-                        action: function () {
+                        },
+                    },
+                    {
+                        eventName: MultiTreePopup.EVENT_CLICK_CLEAR,
+                        action() {
                             clear = true;
                             self._dataChange = true;
                             self.setValue();
                             self._defaultState();
-                        }
+                        },
                     }
                 ],
                 itemsCreator: o.itemsCreator,
-                onLoaded: function () {
-                    BI.nextTick(function () {
+                onLoaded() {
+                    nextTick(() => {
                         self.numberCounter.adjustView();
                         self.trigger.getSearcher().adjustView();
                     });
@@ -119,49 +159,51 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
             },
             isNeedAdjustWidth: o.isNeedAdjustWidth,
             value: { value: o.value || {} },
-            hideChecker: function (e) {
-                return triggerBtn.element.find(e.target).length === 0 &&
-                    self.numberCounter.element.find(e.target).length === 0;
-            }
+            hideChecker(e) {
+                return (
+                    triggerBtn.element.find(e.target).length === 0 &&
+                    self.numberCounter.element.find(e.target).length === 0
+                );
+            },
         });
 
-        var change = false;
-        var clear = false;          // 标识当前是否点击了清空
+        change = false;
+        clear = false; // 标识当前是否点击了清空
 
-        var isSearching = function () {
+        function isSearching() {
             return self.trigger.getSearcher().isSearching();
-        };
+        }
 
-        var isPopupView = function () {
+        function isPopupView() {
             return self.combo.isViewVisible();
-        };
+        }
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () {
-            self.fireEvent(BI.MultiTreeCombo.EVENT_FOCUS);
+        this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
+            self.fireEvent(MultiTreeCombo.EVENT_FOCUS);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () {
-            self.fireEvent(BI.MultiTreeCombo.EVENT_BLUR);
+        this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
+            self.fireEvent(MultiTreeCombo.EVENT_BLUR);
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
             self.storeValue = { value: self.combo.getValue() };
             this.setValue(self.storeValue);
             self.numberCounter.setValue(self.storeValue);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () {
             self.storeValue = { value: this.getValue() };
             self.combo.setValue(self.storeValue);
             self.numberCounter.setValue(self.storeValue);
-            BI.nextTick(function () {
+            nextTick(() => {
                 if (isPopupView()) {
                     self.combo.populate();
                 }
             });
-            self.fireEvent(BI.MultiTreeCombo.EVENT_STOP);
+            self.fireEvent(MultiTreeCombo.EVENT_STOP);
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () {
-            self.fireEvent(BI.MultiTreeCombo.EVENT_SEARCHING);
+        this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => {
+            self.fireEvent(MultiTreeCombo.EVENT_SEARCHING);
         });
 
         function showCounter() {
@@ -174,28 +216,33 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
             self.numberCounter.setValue(self.storeValue);
         }
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => {
             self.combo.toggle();
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_COUNTER_CLICK, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_COUNTER_CLICK, () => {
             if (!self.combo.isViewVisible()) {
                 self.combo.showView();
             }
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () {
-            var checked = this.getSearcher().hasChecked();
-            var val = {
+        this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () {
+            const checked = this.getSearcher().hasChecked();
+            const val = {
                 type: BI.Selection.Multi,
-                value: checked ? { 1: 1 } : {}
+                value: checked ? { 1: 1 } : {},
             };
-            this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None);
+            this.getSearcher().setState(
+                checked ? BI.Selection.Multi : BI.Selection.None
+            );
             self.numberCounter.setButtonChecked(val);
-            self.fireEvent(BI.MultiTreeCombo.EVENT_CLICK_ITEM, self.combo.getValue());
+            self.fireEvent(
+                MultiTreeCombo.EVENT_CLICK_ITEM,
+                self.combo.getValue()
+            );
             self._dataChange = true;
         });
 
-        this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
+        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
             if (isSearching()) {
                 return;
             }
@@ -209,12 +256,13 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
             self.combo.setValue(self.storeValue);
             self.numberCounter.setValue(self.storeValue);
             self.populate();
-            self.fireEvent(BI.MultiTreeCombo.EVENT_BEFORE_POPUPVIEW);
+            self.fireEvent(MultiTreeCombo.EVENT_BEFORE_POPUPVIEW);
         });
-        this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () {
+        this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => {
             if (isSearching()) {
                 self._stopEditing();
-                self._dataChange && self.fireEvent(BI.MultiTreeCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiTreeCombo.EVENT_CONFIRM);
             } else {
                 if (isPopupView()) {
                     self._stopEditing();
@@ -222,23 +270,18 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
                     if (clear === true) {
                         self.storeValue = { value: {} };
                     }
-                    self._dataChange && self.fireEvent(BI.MultiTreeCombo.EVENT_CONFIRM);
+                    self._dataChange &&
+                    self.fireEvent(MultiTreeCombo.EVENT_CONFIRM);
                 }
             }
             clear = false;
             change = false;
         });
-        this.combo.on(BI.Combo.EVENT_AFTER_HIDEVIEW, function () {
-            self.fireEvent(BI.MultiTreeCombo.EVENT_AFTER_HIDEVIEW);
+        this.combo.on(Combo.EVENT_AFTER_HIDEVIEW, () => {
+            self.fireEvent(MultiTreeCombo.EVENT_AFTER_HIDEVIEW);
         });
 
-        var triggerBtn = BI.createWidget({
-            type: "bi.trigger_icon_button",
-            width: o.height,
-            height: o.height,
-            cls: "multi-select-trigger-icon-button"
-        });
-        triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
+        triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
             self.numberCounter.hideView();
             if (self.combo.isViewVisible()) {
                 self.combo.hideView();
@@ -247,13 +290,13 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
             }
         });
 
-        this.numberCounter = BI.createWidget({
+        this.numberCounter = createWidget({
             type: "bi.multi_select_check_selected_switcher",
             el: {
-                type: "bi.multi_tree_check_selected_button"
+                type: "bi.multi_tree_check_selected_button",
             },
             popup: {
-                type: "bi.multi_tree_check_pane"
+                type: "bi.multi_tree_check_pane",
             },
             masker: {
                 offset: {
@@ -265,43 +308,56 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
             },
             itemsCreator: o.itemsCreator,
             valueFormatter: o.valueFormatter,
-            value: { value: o.value || {} }
-        });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () {
-            if (!self.combo.isViewVisible()) {
-                self.combo.showView();
-            }
+            value: { value: o.value || {} },
         });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () {
-            if (want2showCounter === false) {
-                want2showCounter = true;
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
+            () => {
+                if (!self.combo.isViewVisible()) {
+                    self.combo.showView();
+                }
             }
-            if (isInit === true) {
-                want2showCounter = null;
-                showCounter();
+        );
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
+            () => {
+                if (want2showCounter === false) {
+                    want2showCounter = true;
+                }
+                if (isInit === true) {
+                    want2showCounter = null;
+                    showCounter();
+                }
             }
-        });
-
-        this.numberCounter.on(BI.Events.VIEW, function (b) {
-            BI.nextTick(function () {// 自动调整宽度
-                self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
+        );
+
+        this.numberCounter.on(Events.VIEW, b => {
+            nextTick(() => {
+                // 自动调整宽度
+                self.trigger.refreshPlaceHolderWidth(
+                    b === true ? self.numberCounter.element.outerWidth() + 8 : 0
+                );
             });
         });
 
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () {
-            BI.nextTick(function () {// 收起时自动调整宽度
-                self.trigger.refreshPlaceHolderWidth(0);
-            });
-        });
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
+            () => {
+                nextTick(() => {
+                    // 收起时自动调整宽度
+                    self.trigger.refreshPlaceHolderWidth(0);
+                });
+            }
+        );
 
-        this.trigger.element.click(function (e) {
+        this.trigger.element.click(e => {
             if (self.trigger.element.find(e.target).length > 0) {
                 self.numberCounter.hideView();
             }
         });
 
-        BI.createWidget({
-            type: "bi.absolute",
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
             items: [
                 {
@@ -309,85 +365,76 @@ BI.MultiTreeCombo = BI.inherit(BI.Single, {
                     left: 0,
                     right: 0,
                     top: 0,
-                    bottom: 0
-                }, {
+                    bottom: 0,
+                },
+                {
                     el: triggerBtn,
                     right: 0,
                     top: 0,
-                    bottom: 0
-                }, {
+                    bottom: 0,
+                },
+                {
                     el: {
-                        type: "bi.vertical_adapt",
-                        items: [this.numberCounter]
+                        type: VerticalAdaptLayout.xtype,
+                        items: [this.numberCounter],
                     },
                     right: o.height,
                     top: 0,
-                    bottom: 0
+                    bottom: 0,
                 }
-            ]
+            ],
         });
-    },
+    }
 
-    _stopEditing: function () {
+    _stopEditing() {
         this.trigger.stopEditing();
         this.numberCounter.hideView();
-    },
+    }
 
-    _defaultState: function () {
+    _defaultState() {
         this._stopEditing();
         this.combo.hideView();
-    },
+    }
 
-    showView: function () {
+    showView() {
         this.combo.showView();
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this.combo.hideView();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.storeValue.value = v || {};
         this.combo.setValue({
-            value: v || {}
+            value: v || {},
         });
         this.numberCounter.setValue({
-            value: v || {}
+            value: v || {},
         });
-    },
+    }
 
-    getSearcher: function () {
+    getSearcher() {
         return this.trigger.getSearcher();
-    },
+    }
 
-    getValue: function () {
-        return BI.deepClone(this.storeValue.value);
-    },
+    getValue() {
+        return deepClone(this.storeValue.value);
+    }
 
-    populate: function () {
+    populate() {
         this.combo.populate();
-    },
+    }
 
-    focus: function () {
+    focus() {
         this.trigger.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.trigger.blur();
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.trigger.setWaterMark(v);
     }
-});
-
-BI.MultiTreeCombo.EVENT_FOCUS = "EVENT_FOCUS";
-BI.MultiTreeCombo.EVENT_BLUR = "EVENT_BLUR";
-BI.MultiTreeCombo.EVENT_STOP = "EVENT_STOP";
-BI.MultiTreeCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiTreeCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
-BI.MultiTreeCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.MultiTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-BI.MultiTreeCombo.EVENT_AFTER_HIDEVIEW = "EVENT_AFTER_HIDEVIEW";
-
-BI.shortcut("bi.multi_tree_combo", BI.MultiTreeCombo);
+}

src/widget/multitree/multi.tree.insert.combo.js

@@ -1,34 +1,58 @@
-/**
- * 可以往当前选中节点下添加新值的下拉树
- * @class BI.MultiTreeInsertCombo
- * @extends BI.Single
- */
-
-BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiTreeInsertCombo.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    toPix,
+    nextTick,
+    Events,
+    AbsoluteLayout,
+    VerticalAdaptLayout,
+    deepClone
+} from "@/core";
+import { Single, Combo } from "@/base";
+import { MultiTreeSearchInsertPane } from "./trigger/multi.tree.search.insert.pane";
+import { MultiTreePopup } from "./multi.tree.popup";
+import { MultiSelectTrigger } from "../multiselect/multiselect.trigger";
+import { TriggerIconButton } from "@/case";
+import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected";
+
+@shortcut()
+export class MultiTreeInsertCombo extends Single {
+    static xtype = "bi.multi_tree_insert_combo";
+
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-tree-insert-combo",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
             height: 24,
             allowEdit: true,
             isNeedAdjustWidth: true,
         });
-    },
+    }
 
-    _init: function () {
-        var self = this, o = this.options;
-        BI.MultiTreeInsertCombo.superclass._init.apply(this, arguments);
-        var isInit = false;
-        var want2showCounter = false;
+    _init() {
+        const self = this,
+            o = this.options;
+        super._init(...arguments);
+        let isInit = false;
+        let want2showCounter = false;
 
         this.storeValue = { value: o.value || {} };
 
-        this.trigger = BI.createWidget({
+        this.trigger = createWidget({
             type: "bi.multi_select_trigger",
             allowEdit: o.allowEdit,
-            height: BI.toPix(o.height, o.simple ? 1 : 2),
+            height: toPix(o.height, o.simple ? 1 : 2),
             valueFormatter: o.valueFormatter,
             text: o.text,
             defaultText: o.defaultText,
@@ -49,85 +73,94 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
                     type: "bi.multi_tree_search_insert_pane",
                     listeners: [
                         {
-                            eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
-                            action: function () {
-                                self.storeValue.value[self.trigger.getSearcher().getKeyword()] = {};
+                            eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
+                            action() {
+                                self.storeValue.value[
+                                    self.trigger.getSearcher().getKeyword()
+                                    ] = {};
                                 self._assertShowValue();
                                 // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了
                                 self.combo.setValue(self.storeValue);
                                 self.numberCounter.setValue(self.storeValue);
                                 self._stopEditing();
                                 self._dataChange = true;
-                            }
-                        }, {
-                            eventName: BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE,
-                            action: function () {
+                            },
+                        },
+                        {
+                            eventName:
+                            MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE,
+                            action() {
                                 self._dataChange = true;
-                            }
+                            },
                         }
-                    ]
-                }
+                    ],
+                },
             },
-            value: { value: o.value || {} }
-
+            value: { value: o.value || {} },
         });
 
-        this.combo = BI.createWidget({
-            type: "bi.combo",
-            cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
+        this.combo = createWidget({
+            type: Combo.xtype,
+            cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius",
             toggle: !o.allowEdit,
             container: o.container,
             el: this.trigger,
             adjustLength: 1,
             popup: {
                 type: "bi.multi_tree_popup_view",
-                ref: function () {
+                ref() {
                     self.popup = this;
                     self.trigger.setAdapter(this);
                     self.numberCounter.setAdapter(this);
                 },
                 listeners: [
                     {
-                        eventName: BI.MultiTreePopup.EVENT_AFTERINIT,
-                        action: function () {
+                        eventName: MultiTreePopup.EVENT_AFTERINIT,
+                        action() {
                             self.numberCounter.adjustView();
                             isInit = true;
                             if (want2showCounter === true) {
                                 showCounter();
                             }
-                        }
-                    }, {
-                        eventName: BI.MultiTreePopup.EVENT_CHANGE,
-                        action: function () {
+                        },
+                    },
+                    {
+                        eventName: MultiTreePopup.EVENT_CHANGE,
+                        action() {
                             change = true;
-                            var val = {
+                            const val = {
                                 type: BI.Selection.Multi,
-                                value: this.hasChecked() ? this.getValue() : {}
+                                value: this.hasChecked() ? this.getValue() : {},
                             };
                             self.trigger.getSearcher().setState(val);
                             self.numberCounter.setButtonChecked(val);
                             self.storeValue = { value: self.combo.getValue() };
-                            self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM, self.getValue());
+                            self.fireEvent(
+                                MultiTreeInsertCombo.EVENT_CLICK_ITEM,
+                                self.getValue()
+                            );
                             self._dataChange = true;
-                        }
-                    }, {
-                        eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM,
-                        action: function () {
+                        },
+                    },
+                    {
+                        eventName: MultiTreePopup.EVENT_CLICK_CONFIRM,
+                        action() {
                             self.combo.hideView();
-                        }
-                    }, {
-                        eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR,
-                        action: function () {
+                        },
+                    },
+                    {
+                        eventName: MultiTreePopup.EVENT_CLICK_CLEAR,
+                        action() {
                             clear = true;
                             self._dataChange = true;
                             self.setValue();
                             self._defaultState();
-                        }
+                        },
                     }
                 ],
                 itemsCreator: o.itemsCreator,
-                onLoaded: function () {
-                    BI.nextTick(function () {
+                onLoaded() {
+                    nextTick(() => {
                         self.numberCounter.adjustView();
                         self.trigger.getSearcher().adjustView();
                     });
@@ -136,49 +169,51 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
             },
             isNeedAdjustWidth: o.isNeedAdjustWidth,
             value: { value: o.value || {} },
-            hideChecker: function (e) {
-                return triggerBtn.element.find(e.target).length === 0 &&
-                    self.numberCounter.element.find(e.target).length === 0;
-            }
+            hideChecker(e) {
+                return (
+                    triggerBtn.element.find(e.target).length === 0 &&
+                    self.numberCounter.element.find(e.target).length === 0
+                );
+            },
         });
 
         var change = false;
-        var clear = false;          // 标识当前是否点击了清空
+        var clear = false; // 标识当前是否点击了清空
 
-        var isSearching = function () {
+        const isSearching = function () {
             return self.trigger.getSearcher().isSearching();
         };
 
-        var isPopupView = function () {
+        const isPopupView = function () {
             return self.combo.isViewVisible();
         };
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () {
-            self.fireEvent(BI.MultiTreeInsertCombo.EVENT_FOCUS);
+        this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
+            self.fireEvent(MultiTreeInsertCombo.EVENT_FOCUS);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () {
-            self.fireEvent(BI.MultiTreeInsertCombo.EVENT_BLUR);
+        this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
+            self.fireEvent(MultiTreeInsertCombo.EVENT_BLUR);
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
             self.storeValue = { value: self.combo.getValue() };
             this.setValue(self.storeValue);
             self.numberCounter.setValue(self.storeValue);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () {
             self.storeValue = { value: this.getValue() };
             self.combo.setValue(self.storeValue);
             self.numberCounter.setValue(self.storeValue);
-            BI.nextTick(function () {
+            nextTick(() => {
                 if (isPopupView()) {
                     self.combo.populate();
                 }
             });
-            self.fireEvent(BI.MultiTreeInsertCombo.EVENT_STOP);
+            self.fireEvent(MultiTreeInsertCombo.EVENT_STOP);
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () {
-            self.fireEvent(BI.MultiTreeInsertCombo.EVENT_SEARCHING);
+        this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => {
+            self.fireEvent(MultiTreeInsertCombo.EVENT_SEARCHING);
         });
 
         function showCounter() {
@@ -191,23 +226,28 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
             self.numberCounter.setValue(self.storeValue);
         }
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => {
             self.combo.toggle();
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () {
-            var checked = this.getSearcher().hasChecked();
-            var val = {
+        this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () {
+            const checked = this.getSearcher().hasChecked();
+            const val = {
                 type: BI.Selection.Multi,
-                value: checked ? { 1: 1 } : {}
+                value: checked ? { 1: 1 } : {},
             };
-            this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None);
+            this.getSearcher().setState(
+                checked ? BI.Selection.Multi : BI.Selection.None
+            );
             self.numberCounter.setButtonChecked(val);
-            self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM, self.combo.getValue());
+            self.fireEvent(
+                MultiTreeInsertCombo.EVENT_CLICK_ITEM,
+                self.combo.getValue()
+            );
             self._dataChange = true;
         });
 
-        this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
+        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
             if (isSearching()) {
                 return;
             }
@@ -221,12 +261,13 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
             self.combo.setValue(self.storeValue);
             self.numberCounter.setValue(self.storeValue);
             self.populate();
-            self.fireEvent(BI.MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW);
+            self.fireEvent(MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW);
         });
-        this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () {
+        this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => {
             if (isSearching()) {
                 self._stopEditing();
-                self._dataChange && self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM);
             } else {
                 if (isPopupView()) {
                     self._stopEditing();
@@ -234,20 +275,21 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
                     if (clear === true) {
                         self.storeValue = { value: {} };
                     }
-                    self._dataChange && self.fireEvent(BI.MultiTreeInsertCombo.EVENT_CONFIRM);
+                    self._dataChange &&
+                    self.fireEvent(MultiTreeInsertCombo.EVENT_CONFIRM);
                 }
             }
             clear = false;
             change = false;
         });
 
-        var triggerBtn = BI.createWidget({
-            type: "bi.trigger_icon_button",
+        var triggerBtn = createWidget({
+            type: TriggerIconButton.xtype,
             width: o.height,
             height: o.height,
-            cls: "multi-select-trigger-icon-button"
+            cls: "multi-select-trigger-icon-button",
         });
-        triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
+        triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
             self.numberCounter.hideView();
             if (self.combo.isViewVisible()) {
                 self.combo.hideView();
@@ -256,13 +298,13 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
             }
         });
 
-        this.numberCounter = BI.createWidget({
+        this.numberCounter = createWidget({
             type: "bi.multi_select_check_selected_switcher",
             el: {
-                type: "bi.multi_tree_check_selected_button"
+                type: "bi.multi_tree_check_selected_button",
             },
             popup: {
-                type: "bi.multi_tree_check_pane"
+                type: "bi.multi_tree_check_pane",
             },
             itemsCreator: o.itemsCreator,
             masker: {
@@ -274,43 +316,56 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
                 },
             },
             valueFormatter: o.valueFormatter,
-            value: o.value
+            value: o.value,
         });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () {
-            if (!self.combo.isViewVisible()) {
-                self.combo.showView();
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
+            () => {
+                if (!self.combo.isViewVisible()) {
+                    self.combo.showView();
+                }
             }
-        });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () {
-            if (want2showCounter === false) {
-                want2showCounter = true;
+        );
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
+            () => {
+                if (want2showCounter === false) {
+                    want2showCounter = true;
+                }
+                if (isInit === true) {
+                    want2showCounter = null;
+                    showCounter();
+                }
             }
-            if (isInit === true) {
-                want2showCounter = null;
-                showCounter();
+        );
+
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
+            () => {
+                nextTick(() => {
+                    // 收起时自动调整宽度
+                    self.trigger.refreshPlaceHolderWidth(0);
+                });
             }
-        });
-
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () {
-            BI.nextTick(function () {// 收起时自动调整宽度
-                self.trigger.refreshPlaceHolderWidth(0);
-            });
-        });
-
-        this.numberCounter.on(BI.Events.VIEW, function (b) {
-            BI.nextTick(function () {// 自动调整宽度
-                self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
+        );
+
+        this.numberCounter.on(Events.VIEW, b => {
+            nextTick(() => {
+                // 自动调整宽度
+                self.trigger.refreshPlaceHolderWidth(
+                    b === true ? self.numberCounter.element.outerWidth() + 8 : 0
+                );
             });
         });
 
-        this.trigger.element.click(function (e) {
+        this.trigger.element.click(e => {
             if (self.trigger.element.find(e.target).length > 0) {
                 self.numberCounter.hideView();
             }
         });
 
-        BI.createWidget({
-            type: "bi.absolute",
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
             items: [
                 {
@@ -318,89 +373,81 @@ BI.MultiTreeInsertCombo = BI.inherit(BI.Single, {
                     left: 0,
                     right: 0,
                     top: 0,
-                    bottom: 0
-                }, {
+                    bottom: 0,
+                },
+                {
                     el: triggerBtn,
                     right: 0,
                     top: 0,
-                    bottom: 0
-                }, {
+                    bottom: 0,
+                },
+                {
                     el: {
-                        type: "bi.vertical_adapt",
-                        items: [this.numberCounter]
+                        type: VerticalAdaptLayout.xtype,
+                        items: [this.numberCounter],
                     },
                     right: o.height,
                     top: 0,
                     height: o.height,
                 }
-            ]
+            ],
         });
-    },
+    }
 
-    _assertShowValue: function () {
+    _assertShowValue() {
         this.trigger.getSearcher().setState(this.storeValue);
         this.numberCounter.setButtonChecked(this.storeValue);
-    },
+    }
 
-    _stopEditing: function () {
+    _stopEditing() {
         this.trigger.stopEditing();
         this.numberCounter.hideView();
-    },
+    }
 
-    _defaultState: function () {
+    _defaultState() {
         this._stopEditing();
         this.combo.hideView();
-    },
+    }
 
-    getSearcher: function () {
+    getSearcher() {
         return this.trigger.getSearcher();
-    },
+    }
 
-    showView: function () {
+    showView() {
         this.combo.showView();
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this.combo.hideView();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.storeValue.value = v || {};
         this.combo.setValue({
-            value: v || {}
+            value: v || {},
         });
         this.numberCounter.setValue({
-            value: v || {}
+            value: v || {},
         });
-    },
+    }
 
-    getValue: function () {
-        return BI.deepClone(this.storeValue.value);
-    },
+    getValue() {
+        return deepClone(this.storeValue.value);
+    }
 
-    populate: function () {
+    populate() {
         this.combo.populate();
-    },
+    }
 
-    focus: function () {
+    focus() {
         this.trigger.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.trigger.blur();
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.trigger.setWaterMark(v);
     }
-});
-
-BI.MultiTreeInsertCombo.EVENT_FOCUS = "EVENT_FOCUS";
-BI.MultiTreeInsertCombo.EVENT_BLUR = "EVENT_BLUR";
-BI.MultiTreeInsertCombo.EVENT_STOP = "EVENT_STOP";
-BI.MultiTreeInsertCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
-BI.MultiTreeInsertCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiTreeInsertCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.MultiTreeInsertCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-
-BI.shortcut("bi.multi_tree_insert_combo", BI.MultiTreeInsertCombo);
+}

src/widget/multitree/multi.tree.list.combo.js

@@ -1,38 +1,68 @@
-/**
- * 选中节点不影响父子节点状态的下拉树
- * @class BI.MultiTreeListCombo
- * @extends BI.Single
- */
-
-BI.MultiTreeListCombo = BI.inherit(BI.Single, {
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiTreeListCombo.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    toPix,
+    nextTick,
+    Events,
+    AbsoluteLayout,
+    VerticalAdaptLayout,
+    deepClone
+} from "@/core";
+import { Single, Combo } from "@/base";
+import { MultiTreeSearchInsertPane } from "./trigger/multi.tree.search.insert.pane";
+import { MultiTreePopup } from "./multi.tree.popup";
+import { MultiSelectTrigger } from "../multiselect/multiselect.trigger";
+import {
+    TriggerIconButton,
+    ListPartTree,
+    ListDisplayTree,
+    Listasynctree
+} from "@/case";
+import { MultiSelectCheckSelectedSwitcher } from "../multiselect/trigger/switcher.checkselected";
+
+@shortcut()
+export class MultiTreeListCombo extends Single {
+    static xtype = "bi.multi_tree_list_combo";
+
+    static EVENT_FOCUS = "EVENT_FOCUS";
+    static EVENT_BLUR = "EVENT_BLUR";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_CONFIRM = "EVENT_CONFIRM";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-tree-list-combo",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: BI.emptyFn,
+            itemsCreator: emptyFn,
+            valueFormatter: emptyFn,
             height: 24,
             allowEdit: true,
             allowInsertValue: true,
             isNeedAdjustWidth: true,
             text: "",
         });
-    },
+    }
 
-    _init: function () {
-        var self = this, o = this.options;
-        BI.MultiTreeListCombo.superclass._init.apply(this, arguments);
-        var isInit = false;
-        var want2showCounter = false;
+    _init() {
+        const self = this,
+            o = this.options;
+        super._init(...arguments);
+        let isInit = false;
+        let want2showCounter = false;
 
         this.storeValue = { value: o.value || [] };
 
-        this.trigger = BI.createWidget({
+        this.trigger = createWidget({
             type: "bi.multi_select_trigger",
             allowEdit: o.allowEdit,
             text: o.text,
             defaultText: o.defaultText,
             watermark: o.watermark,
-            height: BI.toPix(o.height, o.simple ? 1 : 2),
+            height: toPix(o.height, o.simple ? 1 : 2),
             valueFormatter: o.valueFormatter,
             masker: {
                 offset: {
@@ -46,96 +76,110 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
                 type: "bi.multi_list_tree_searcher",
                 itemsCreator: o.itemsCreator,
                 popup: {
-                    type: o.allowInsertValue ? "bi.multi_tree_search_insert_pane" : "bi.multi_tree_search_pane",
+                    type: o.allowInsertValue
+                        ? "bi.multi_tree_search_insert_pane"
+                        : "bi.multi_tree_search_pane",
                     el: {
-                        type: "bi.list_part_tree"
+                        type: ListPartTree.xtype,
                     },
-                    listeners: [{
-                        eventName: BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
-                        action: function () {
-                            self.storeValue.value.unshift([self.trigger.getSearcher().getKeyword()]);
-                            self._assertShowValue();
-                            // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了
-                            self.combo.setValue(self.storeValue);
-                            self.numberCounter.setValue(self.storeValue);
-                            self._stopEditing();
-                            self._dataChange = true;
+                    listeners: [
+                        {
+                            eventName: MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
+                            action() {
+                                self.storeValue.value.unshift([
+                                    self.trigger.getSearcher().getKeyword()
+                                ]);
+                                self._assertShowValue();
+                                // setValue以更新paras.value, 之后从search popup中拿到的就能有add的值了
+                                self.combo.setValue(self.storeValue);
+                                self.numberCounter.setValue(self.storeValue);
+                                self._stopEditing();
+                                self._dataChange = true;
+                            },
                         }
-                    }]
-                }
+                    ],
+                },
             },
             switcher: {
                 el: {
-                    type: "bi.multi_tree_check_selected_button"
+                    type: "bi.multi_tree_check_selected_button",
                 },
                 popup: {
                     type: "bi.multi_tree_check_pane",
                     el: {
-                        type: "bi.list_display_tree"
+                        type: ListDisplayTree.xtype,
                     },
-                    itemsCreator: o.itemsCreator
-                }
+                    itemsCreator: o.itemsCreator,
+                },
             },
-            value: this.storeValue
+            value: this.storeValue,
         });
 
-        this.combo = BI.createWidget({
-            type: "bi.combo",
-            cls: (o.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
+        this.combo = createWidget({
+            type: Combo.xtype,
+            cls: o.simple ? "bi-border-bottom" : "bi-border bi-border-radius",
             toggle: !o.allowEdit,
             container: o.container,
             el: this.trigger,
             adjustLength: 1,
             popup: {
-                type: "bi.multi_tree_popup_view",
-                ref: function () {
+                type: MultiTreePopup.xtype,
+                ref() {
                     self.popup = this;
                     self.trigger.setAdapter(this);
                     self.numberCounter.setAdapter(this);
                 },
                 el: {
-                    type: "bi.list_async_tree"
+                    type: Listasynctree.xtype,
                 },
-                listeners: [{
-                    eventName: BI.MultiTreePopup.EVENT_AFTERINIT,
-                    action: function () {
-                        self.numberCounter.adjustView();
-                        isInit = true;
-                        if (want2showCounter === true) {
-                            showCounter();
-                        }
-                    }
-                }, {
-                    eventName: BI.MultiTreePopup.EVENT_CHANGE,
-                    action: function () {
-                        change = true;
-                        var val = {
-                            type: BI.Selection.Multi,
-                            value: this.hasChecked() ? this.getValue() : []
-                        };
-                        self.trigger.getSearcher().setState(val);
-                        self.numberCounter.setButtonChecked(val);
-                        self.storeValue = { value: self.combo.getValue() };
-                        self.fireEvent(BI.MultiTreeListCombo.EVENT_CLICK_ITEM, self.getValue());
-                        self._dataChange = true;
-                    }
-                }, {
-                    eventName: BI.MultiTreePopup.EVENT_CLICK_CONFIRM,
-                    action: function () {
-                        self.combo.hideView();
-                    }
-                }, {
-                    eventName: BI.MultiTreePopup.EVENT_CLICK_CLEAR,
-                    action: function () {
-                        clear = true;
-                        self._dataChange = true;
-                        self.setValue();
-                        self._defaultState();
+                listeners: [
+                    {
+                        eventName: MultiTreePopup.EVENT_AFTERINIT,
+                        action() {
+                            self.numberCounter.adjustView();
+                            isInit = true;
+                            if (want2showCounter === true) {
+                                showCounter();
+                            }
+                        },
+                    },
+                    {
+                        eventName: MultiTreePopup.EVENT_CHANGE,
+                        action() {
+                            change = true;
+                            const val = {
+                                type: BI.Selection.Multi,
+                                value: this.hasChecked() ? this.getValue() : [],
+                            };
+                            self.trigger.getSearcher().setState(val);
+                            self.numberCounter.setButtonChecked(val);
+                            self.storeValue = { value: self.combo.getValue() };
+                            self.fireEvent(
+                                MultiTreeListCombo.EVENT_CLICK_ITEM,
+                                self.getValue()
+                            );
+                            self._dataChange = true;
+                        },
+                    },
+                    {
+                        eventName: MultiTreePopup.EVENT_CLICK_CONFIRM,
+                        action() {
+                            self.combo.hideView();
+                        },
+                    },
+                    {
+                        eventName: MultiTreePopup.EVENT_CLICK_CLEAR,
+                        action() {
+                            clear = true;
+                            self._dataChange = true;
+                            self.setValue();
+                            self._defaultState();
+                        },
                     }
-                }],
+                ],
                 itemsCreator: o.itemsCreator,
-                onLoaded: function () {
-                    BI.nextTick(function () {
+                onLoaded() {
+                    nextTick(() => {
                         self.numberCounter.adjustView();
                         self.trigger.getSearcher().adjustView();
                     });
@@ -144,49 +188,51 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
             },
             isNeedAdjustWidth: o.isNeedAdjustWidth,
             value: this.storeValue,
-            hideChecker: function (e) {
-                return triggerBtn.element.find(e.target).length === 0 &&
-                    self.numberCounter.element.find(e.target).length === 0;
-            }
+            hideChecker(e) {
+                return (
+                    triggerBtn.element.find(e.target).length === 0 &&
+                    self.numberCounter.element.find(e.target).length === 0
+                );
+            },
         });
 
         var change = false;
-        var clear = false;          // 标识当前是否点击了清空
+        var clear = false; // 标识当前是否点击了清空
 
-        var isSearching = function () {
+        const isSearching = function () {
             return self.trigger.getSearcher().isSearching();
         };
 
-        var isPopupView = function () {
+        const isPopupView = function () {
             return self.combo.isViewVisible();
         };
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_FOCUS, function () {
-            self.fireEvent(BI.MultiTreeListCombo.EVENT_FOCUS);
+        this.trigger.on(MultiSelectTrigger.EVENT_FOCUS, () => {
+            self.fireEvent(MultiTreeListCombo.EVENT_FOCUS);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_BLUR, function () {
-            self.fireEvent(BI.MultiTreeListCombo.EVENT_BLUR);
+        this.trigger.on(MultiSelectTrigger.EVENT_BLUR, () => {
+            self.fireEvent(MultiTreeListCombo.EVENT_BLUR);
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_START, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_START, function () {
             self.storeValue = { value: self.combo.getValue() };
             this.setValue(self.storeValue);
             self.numberCounter.setValue(self.storeValue);
         });
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_STOP, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_STOP, function () {
             self.storeValue = { value: this.getValue() };
             self.combo.setValue(self.storeValue);
             self.numberCounter.setValue(self.storeValue);
-            BI.nextTick(function () {
+            nextTick(() => {
                 if (isPopupView()) {
                     self.combo.populate();
                 }
             });
-            self.fireEvent(BI.MultiTreeListCombo.EVENT_STOP);
+            self.fireEvent(MultiTreeListCombo.EVENT_STOP);
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_SEARCHING, function () {
-            self.fireEvent(BI.MultiTreeListCombo.EVENT_SEARCHING);
+        this.trigger.on(MultiSelectTrigger.EVENT_SEARCHING, () => {
+            self.fireEvent(MultiTreeListCombo.EVENT_SEARCHING);
         });
 
         function showCounter() {
@@ -199,23 +245,28 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
             self.numberCounter.setValue(self.storeValue);
         }
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_TRIGGER_CLICK, function () {
+        this.trigger.on(MultiSelectTrigger.EVENT_TRIGGER_CLICK, () => {
             self.combo.toggle();
         });
 
-        this.trigger.on(BI.MultiSelectTrigger.EVENT_CHANGE, function () {
-            var checked = this.getSearcher().hasChecked();
-            var val = {
+        this.trigger.on(MultiSelectTrigger.EVENT_CHANGE, function () {
+            const checked = this.getSearcher().hasChecked();
+            const val = {
                 type: BI.Selection.Multi,
-                value: checked ? { 1: 1 } : {}
+                value: checked ? { 1: 1 } : {},
             };
-            this.getSearcher().setState(checked ? BI.Selection.Multi : BI.Selection.None);
+            this.getSearcher().setState(
+                checked ? BI.Selection.Multi : BI.Selection.None
+            );
             self.numberCounter.setButtonChecked(val);
-            self.fireEvent(BI.MultiTreeListCombo.EVENT_CLICK_ITEM, self.combo.getValue());
+            self.fireEvent(
+                MultiTreeListCombo.EVENT_CLICK_ITEM,
+                self.combo.getValue()
+            );
             self._dataChange = true;
         });
 
-        this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
+        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
             if (isSearching()) {
                 return;
             }
@@ -229,12 +280,13 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
             self.combo.setValue(self.storeValue);
             self.numberCounter.setValue(self.storeValue);
             self.populate();
-            self.fireEvent(BI.MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW);
+            self.fireEvent(MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW);
         });
-        this.combo.on(BI.Combo.EVENT_BEFORE_HIDEVIEW, function () {
+        this.combo.on(Combo.EVENT_BEFORE_HIDEVIEW, () => {
             if (isSearching()) {
                 self.trigger.stopEditing();
-                self._dataChange && self.fireEvent(BI.MultiTreeListCombo.EVENT_CONFIRM);
+                self._dataChange &&
+                self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM);
             } else {
                 if (isPopupView()) {
                     self._stopEditing();
@@ -242,20 +294,21 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
                     if (clear === true) {
                         self.storeValue = { value: [] };
                     }
-                    self._dataChange && self.fireEvent(BI.MultiTreeListCombo.EVENT_CONFIRM);
+                    self._dataChange &&
+                    self.fireEvent(MultiTreeListCombo.EVENT_CONFIRM);
                 }
             }
             clear = false;
             change = false;
         });
 
-        var triggerBtn = BI.createWidget({
-            type: "bi.trigger_icon_button",
+        var triggerBtn = createWidget({
+            type: TriggerIconButton.xtype,
             width: o.height,
             height: o.height,
-            cls: "multi-select-trigger-icon-button"
+            cls: "multi-select-trigger-icon-button",
         });
-        triggerBtn.on(BI.TriggerIconButton.EVENT_CHANGE, function () {
+        triggerBtn.on(TriggerIconButton.EVENT_CHANGE, () => {
             self.numberCounter.hideView();
             if (self.combo.isViewVisible()) {
                 self.combo.hideView();
@@ -264,13 +317,13 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
             }
         });
 
-        this.numberCounter = BI.createWidget({
+        this.numberCounter = createWidget({
             type: "bi.multi_select_check_selected_switcher",
             el: {
-                type: "bi.multi_tree_check_selected_button"
+                type: "bi.multi_tree_check_selected_button",
             },
             popup: {
-                type: "bi.multi_tree_check_pane"
+                type: "bi.multi_tree_check_pane",
             },
             itemsCreator: o.itemsCreator,
             masker: {
@@ -282,131 +335,138 @@ BI.MultiTreeListCombo = BI.inherit(BI.Single, {
                 },
             },
             valueFormatter: o.valueFormatter,
-            value: o.value
-        });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE, function () {
-            if (!self.combo.isViewVisible()) {
-                self.combo.showView();
-            }
+            value: o.value,
         });
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW, function () {
-            if (want2showCounter === false) {
-                want2showCounter = true;
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_TRIGGER_CHANGE,
+            () => {
+                if (!self.combo.isViewVisible()) {
+                    self.combo.showView();
+                }
             }
-            if (isInit === true) {
-                want2showCounter = null;
-                showCounter();
+        );
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_BEFORE_POPUPVIEW,
+            () => {
+                if (want2showCounter === false) {
+                    want2showCounter = true;
+                }
+                if (isInit === true) {
+                    want2showCounter = null;
+                    showCounter();
+                }
             }
-        });
-
-        this.numberCounter.on(BI.Events.VIEW, function (b) {
-            BI.nextTick(function () {// 自动调整宽度
-                self.trigger.refreshPlaceHolderWidth((b === true ? self.numberCounter.element.outerWidth() + 8 : 0));
+        );
+
+        this.numberCounter.on(Events.VIEW, b => {
+            nextTick(() => {
+                // 自动调整宽度
+                self.trigger.refreshPlaceHolderWidth(
+                    b === true ? self.numberCounter.element.outerWidth() + 8 : 0
+                );
             });
         });
 
-        this.numberCounter.on(BI.MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW, function () {
-            BI.nextTick(function () {// 收起时自动调整宽度
-                self.trigger.refreshPlaceHolderWidth(0);
-            });
-        });
+        this.numberCounter.on(
+            MultiSelectCheckSelectedSwitcher.EVENT_AFTER_HIDEVIEW,
+            () => {
+                nextTick(() => {
+                    // 收起时自动调整宽度
+                    self.trigger.refreshPlaceHolderWidth(0);
+                });
+            }
+        );
 
-        this.trigger.element.click(function (e) {
+        this.trigger.element.click(e => {
             if (self.trigger.element.find(e.target).length > 0) {
                 self.numberCounter.hideView();
             }
         });
 
-        BI.createWidget({
-            type: "bi.absolute",
+        createWidget({
+            type: AbsoluteLayout.xtype,
             element: this,
-            items: [{
-                el: this.combo,
-                left: 0,
-                right: 0,
-                top: 0,
-                bottom: 0
-            }, {
-                el: triggerBtn,
-                right: 0,
-                top: 0,
-                bottom: 0
-            }, {
-                el: {
-                    type: "bi.vertical_adapt",
-                    items: [this.numberCounter]
+            items: [
+                {
+                    el: this.combo,
+                    left: 0,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
+                },
+                {
+                    el: triggerBtn,
+                    right: 0,
+                    top: 0,
+                    bottom: 0,
                 },
-                right: o.height,
-                top: 0,
-                height: o.height,
-            }]
+                {
+                    el: {
+                        type: VerticalAdaptLayout.xtype,
+                        items: [this.numberCounter],
+                    },
+                    right: o.height,
+                    top: 0,
+                    height: o.height,
+                }
+            ],
         });
-    },
+    }
 
-    _assertShowValue: function () {
+    _assertShowValue() {
         this.trigger.getSearcher().setState(this.storeValue);
         this.numberCounter.setButtonChecked(this.storeValue);
-    },
+    }
 
-    _stopEditing: function () {
+    _stopEditing() {
         this.trigger.stopEditing();
         this.numberCounter.hideView();
-    },
+    }
 
-    _defaultState: function () {
+    _defaultState() {
         this._stopEditing();
         this.combo.hideView();
-    },
+    }
 
-    showView: function () {
+    showView() {
         this.combo.showView();
-    },
+    }
 
-    hideView: function () {
+    hideView() {
         this.combo.hideView();
-    },
+    }
 
-    getSearcher: function () {
+    getSearcher() {
         return this.trigger.getSearcher();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.storeValue.value = v || [];
         this.combo.setValue({
-            value: v || []
+            value: v || [],
         });
         this.numberCounter.setValue({
-            value: v || []
+            value: v || [],
         });
-    },
+    }
 
-    getValue: function () {
-        return BI.deepClone(this.storeValue.value);
-    },
+    getValue() {
+        return deepClone(this.storeValue.value);
+    }
 
-    populate: function () {
+    populate() {
         this.combo.populate();
-    },
+    }
 
-    focus: function () {
+    focus() {
         this.trigger.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.trigger.blur();
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.trigger.setWaterMark(v);
     }
-});
-
-BI.MultiTreeListCombo.EVENT_FOCUS = "EVENT_FOCUS";
-BI.MultiTreeListCombo.EVENT_BLUR = "EVENT_BLUR";
-BI.MultiTreeListCombo.EVENT_STOP = "EVENT_STOP";
-BI.MultiTreeListCombo.EVENT_CLICK_ITEM = "EVENT_CLICK_ITEM";
-BI.MultiTreeListCombo.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiTreeListCombo.EVENT_CONFIRM = "EVENT_CONFIRM";
-BI.MultiTreeListCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-
-BI.shortcut("bi.multi_tree_list_combo", BI.MultiTreeListCombo);
+}

src/widget/multitree/multi.tree.popup.js

@@ -1,106 +1,108 @@
-/**
- * 带加载的多选下拉面板
- * @class BI.MultiTreePopup
- * @extends BI.Pane
- */
-BI.MultiTreePopup = BI.inherit(BI.Pane, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiTreePopup.superclass._defaultConfig.apply(this, arguments), {
+import { shortcut, extend, emptyFn, createWidget, i18nText } from "@/core";
+import { Pane } from "@/base";
+import { Asynctree, MultiPopupView, TreeView } from "@/case";
+
+@shortcut()
+export class MultiTreePopup extends Pane {
+    static xtype = "bi.multi_tree_popup_view";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
+    static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
+    static EVENT_AFTERINIT = "EVENT_AFTERINIT";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-tree-popup",
             maxWidth: "auto",
             minWidth: 140,
             maxHeight: 400,
-            onLoaded: BI.emptyFn,
+            onLoaded: emptyFn,
             el: {
-                type: "bi.async_tree"
-            }
+                type: Asynctree.xtype,
+            },
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiTreePopup.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, opts = this.options, v = opts.value;
+        const self = this,
+            opts = this.options,
+            v = opts.value;
 
         this.selectedValues = {};
 
-        this.tree = BI.createWidget(opts.el, {
-            type: "bi.async_tree",
+        this.tree = createWidget(opts.el, {
+            type: Asynctree.xtype,
             showLine: opts.showLine,
             height: 400,
             cls: "popup-view-tree",
             itemsCreator: opts.itemsCreator,
             onLoaded: opts.onLoaded,
-            value: v.value || {}
+            value: v.value || {},
         });
 
-        this.popupView = BI.createWidget({
-            type: "bi.multi_popup_view",
+        this.popupView = createWidget({
+            type: MultiPopupView.xtype,
             element: this,
             stopPropagation: false,
             maxWidth: opts.maxWidth,
             minWidth: opts.minWidth,
             maxHeight: opts.maxHeight,
-            buttons: [BI.i18nText("BI-Basic_Clears"), BI.i18nText("BI-Basic_OK")],
-            el: this.tree
+            buttons: [i18nText("BI-Basic_Clears"), i18nText("BI-Basic_OK")],
+            el: this.tree,
         });
 
-        this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) {
-            switch (index) {
+        this.popupView.on(
+            MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON,
+            index => {
+                switch (index) {
                 case 0:
-                    self.fireEvent(BI.MultiTreePopup.EVENT_CLICK_CLEAR);
+                    self.fireEvent(MultiTreePopup.EVENT_CLICK_CLEAR);
                     break;
                 case 1:
-                    self.fireEvent(BI.MultiTreePopup.EVENT_CLICK_CONFIRM);
+                    self.fireEvent(MultiTreePopup.EVENT_CLICK_CONFIRM);
                     break;
+                }
             }
-        });
+        );
 
-        this.tree.on(BI.TreeView.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiTreePopup.EVENT_CHANGE);
+        this.tree.on(TreeView.EVENT_CHANGE, () => {
+            self.fireEvent(MultiTreePopup.EVENT_CHANGE);
         });
 
-        this.tree.on(BI.TreeView.EVENT_AFTERINIT, function () {
-            self.fireEvent(BI.MultiTreePopup.EVENT_AFTERINIT);
+        this.tree.on(TreeView.EVENT_AFTERINIT, () => {
+            self.fireEvent(MultiTreePopup.EVENT_AFTERINIT);
         });
+    }
 
-    },
-
-    getValue: function () {
+    getValue() {
         return this.tree.getValue();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         v || (v = {});
         this.tree.setSelectedValue(v.value);
-    },
+    }
 
-    populate: function (config) {
+    populate(config) {
         this.tree.stroke(config);
-    },
+    }
 
-    hasChecked: function () {
+    hasChecked() {
         return this.tree.hasChecked();
-    },
+    }
 
-    setDirection: function (direction, position) {
+    setDirection(direction, position) {
         this.popupView.setDirection(direction, position);
-    },
+    }
 
-    resetHeight: function (h) {
+    resetHeight(h) {
         this.popupView.resetHeight(h);
-    },
+    }
 
-    resetWidth: function (w) {
+    resetWidth(w) {
         this.popupView.resetWidth(w);
     }
-});
-
-BI.MultiTreePopup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.MultiTreePopup.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
-BI.MultiTreePopup.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
-BI.MultiTreePopup.EVENT_AFTERINIT = "EVENT_AFTERINIT";
-
-
-BI.shortcut("bi.multi_tree_popup_view", BI.MultiTreePopup);
+}

src/widget/multitree/trigger/multi.tree.button.checkselected.js

@@ -1,67 +1,80 @@
-/**
- * 查看已选按钮
- * Created by guy on 15/11/3.
- * @class BI.MultiTreeCheckSelectedButton
- * @extends BI.Single
- */
-BI.MultiTreeCheckSelectedButton = BI.inherit(BI.Single, {
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    i18nText,
+    Controller,
+    size
+} from "@/core";
+import { Single, TextButton, IconButton } from "@/base";
+import { MultiSelectCheckSelectedButton } from "../../multiselect/trigger/button.checkselected";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiTreeCheckSelectedButton.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class MultiTreeCheckSelectedButton extends Single {
+    static xtype = "bi.multi_tree_check_selected_button";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-tree-check-selected-button",
-            itemsCreator: BI.emptyFn
+            itemsCreator: emptyFn,
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiTreeCheckSelectedButton.superclass._init.apply(this, arguments);
-        var self = this;
-        this.indicator = BI.createWidget({
-            type: "bi.icon_button",
+    _init() {
+        super._init(...arguments);
+        const self = this;
+        this.indicator = createWidget({
+            type: IconButton.xtype,
             cls: "check-font trigger-check-selected icon-size-12",
             width: 16,
             height: 16,
-            stopPropagation: true
+            stopPropagation: true,
         });
 
-        this.checkSelected = BI.createWidget({
-            type: "bi.text_button",
+        this.checkSelected = createWidget({
+            type: TextButton.xtype,
             cls: "bi-high-light-background trigger-check-text",
             invisible: true,
             hgap: 4,
-            text: BI.i18nText("BI-Check_Selected"),
+            text: i18nText("BI-Check_Selected"),
             textAlign: "center",
         });
-        this.checkSelected.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.checkSelected.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
 
-        this.checkSelected.on(BI.TextButton.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiSelectCheckSelectedButton.EVENT_CHANGE, arguments);
+        this.checkSelected.on(TextButton.EVENT_CHANGE, function () {
+            self.fireEvent(
+                MultiSelectCheckSelectedButton.EVENT_CHANGE,
+                arguments
+            );
         });
 
-        BI.createWidget({
+        createWidget({
             type: "bi.horizontal",
             element: this,
-            items: [this.indicator, this.checkSelected]
+            items: [this.indicator, this.checkSelected],
         });
 
-        this.element.hover(function () {
-            self.indicator.setVisible(false);
-            self.checkSelected.setVisible(true);
-        }, function () {
-            self.indicator.setVisible(true);
-            self.checkSelected.setVisible(false);
-        });
+        this.element.hover(
+            () => {
+                self.indicator.setVisible(false);
+                self.checkSelected.setVisible(true);
+            },
+            () => {
+                self.indicator.setVisible(true);
+                self.checkSelected.setVisible(false);
+            }
+        );
         this.setVisible(false);
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         v || (v = {});
-        var show = BI.size(v.value) > 0;
+        const show = size(v.value) > 0;
         this.setVisible(show);
     }
-});
-
-BI.MultiTreeCheckSelectedButton.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.multi_tree_check_selected_button", BI.MultiTreeCheckSelectedButton);
+}

src/widget/multitree/trigger/multi.tree.search.insert.pane.js

@@ -1,129 +1,148 @@
-/**
- *
- * 在搜索框中输入文本弹出的面板
- * @class BI.MultiTreeSearchInsertPane
- * @extends BI.Pane
- */
+import {
+    shortcut,
+    Widget,
+    i18nText,
+    extend,
+    Controller,
+    AbsoluteLayout,
+    isEmptyArray
+} from "@/core";
+import { TreeView, PartTree } from "@/case";
+import { TextButton } from "@/base";
 
-BI.MultiTreeSearchInsertPane = BI.inherit(BI.Widget, {
+@shortcut()
+export class MultiTreeSearchInsertPane extends Widget {
+    static xtype = "bi.multi_tree_search_insert_pane";
 
-    constants: {
-        height: 24,
-    },
-
-    props: {
+    props = {
         baseCls: "bi-multi-tree-search-insert-pane bi-card",
-        itemsCreator: BI.emptyFn,
-        keywordGetter: BI.emptyFn,
-        el: {
-            type: "bi.part_tree"
-        }
-    },
+        el: { type: PartTree.xtype },
+    };
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
+    static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
+    static EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
+    static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
 
-    render: function () {
-        var self = this, opts = this.options;
+    render() {
+        const self = this,
+            opts = this.options;
 
         return {
-            type: "bi.absolute",
+            type: AbsoluteLayout.xtype,
             items: [
                 {
                     el: {
-                        type: "bi.text_button",
+                        type: TextButton.xtype,
                         invisible: true,
-                        ref: function (_ref) {
+                        ref(_ref) {
                             self.addTip = _ref;
                         },
-                        text: BI.i18nText("BI-Basic_Click_To_Add_Text", ""),
+                        text: i18nText("BI-Basic_Click_To_Add_Text", ""),
                         height: this.constants.height,
                         cls: "bi-high-light",
-                        handler: function () {
-                            self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM, opts.keywordGetter());
-                        }
+                        handler() {
+                            self.fireEvent(
+                                MultiTreeSearchInsertPane.EVENT_ADD_ITEM,
+                                opts.keywordGetter()
+                            );
+                        },
                     },
                     top: 5,
                     left: 0,
-                    right: 0
-                }, {
-                    el: BI.extend({
-                        type: "bi.part_tree",
-                        tipText: BI.i18nText("BI-No_Select"),
-                        itemsCreator: function (op, callback) {
-                            op.keyword = opts.keywordGetter();
-                            opts.itemsCreator(op, function (res) {
-                                callback(res);
-                                self.setKeyword(opts.keywordGetter(), res.items);
-                            });
-                        },
-                        ref: function (_ref) {
-                            self.partTree = _ref;
-                        },
-                        value: opts.value,
-                        listeners: [
-                            {
-                                eventName: BI.Controller.EVENT_CHANGE,
-                                action: function () {
-                                    self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-                                }
-                            }, {
-                                eventName: BI.TreeView.EVENT_CHANGE,
-                                action: function () {
-                                    self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CHANGE);
-                                }
-                            }, {
-                                eventName: BI.PartTree.EVENT_CLICK_TREE_NODE,
-                                action: function () {
-                                    self.fireEvent(BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE);
+                    right: 0,
+                },
+                {
+                    el: extend(
+                        {
+                            type: PartTree.xtype,
+                            tipText: i18nText("BI-No_Select"),
+                            itemsCreator(op, callback) {
+                                op.keyword = opts.keywordGetter();
+                                opts.itemsCreator(op, res => {
+                                    callback(res);
+                                    self.setKeyword(
+                                        opts.keywordGetter(),
+                                        res.items
+                                    );
+                                });
+                            },
+                            ref(_ref) {
+                                self.partTree = _ref;
+                            },
+                            value: opts.value,
+                            listeners: [
+                                {
+                                    eventName: Controller.EVENT_CHANGE,
+                                    action() {
+                                        self.fireEvent(
+                                            Controller.EVENT_CHANGE,
+                                            arguments
+                                        );
+                                    },
+                                },
+                                {
+                                    eventName: TreeView.EVENT_CHANGE,
+                                    action() {
+                                        self.fireEvent(
+                                            MultiTreeSearchInsertPane.EVENT_CHANGE
+                                        );
+                                    },
+                                },
+                                {
+                                    eventName: PartTree.EVENT_CLICK_TREE_NODE,
+                                    action() {
+                                        self.fireEvent(
+                                            MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE
+                                        );
+                                    },
                                 }
-                            }
-                        ]
-                    }, opts.el),
+                            ],
+                        },
+                        opts.el
+                    ),
                     left: 0,
                     top: 0,
                     bottom: 0,
-                    right: 0
+                    right: 0,
                 }
-            ]
+            ],
         };
-    },
+    }
 
-    setKeyword: function (keyword, nodes) {
-        var isAddTipVisible = BI.isEmptyArray(nodes);
+    setKeyword(keyword, nodes) {
+        const isAddTipVisible = isEmptyArray(nodes);
         this.addTip.setVisible(isAddTipVisible);
         this.partTree.setVisible(!isAddTipVisible);
-        isAddTipVisible && this.addTip.setText(BI.i18nText("BI-Basic_Click_To_Add_Text", keyword));
-    },
+        isAddTipVisible &&
+        this.addTip.setText(
+            i18nText("BI-Basic_Click_To_Add_Text", keyword)
+        );
+    }
 
-    hasChecked: function () {
+    hasChecked() {
         return this.partTree.hasChecked();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.setSelectedValue(v.value);
-    },
+    }
 
-    setSelectedValue: function (v) {
+    setSelectedValue(v) {
         v || (v = {});
         this.partTree.setSelectedValue(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.partTree.getValue();
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.partTree.empty();
-    },
-
-    populate: function (op) {
-        this.partTree.stroke.apply(this.partTree, arguments);
     }
-});
-
-BI.MultiTreeSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE";
 
-BI.MultiTreeSearchInsertPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
-BI.MultiTreeSearchInsertPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
-BI.MultiTreeSearchInsertPane.EVENT_ADD_ITEM = "EVENT_ADD_ITEM";
-BI.MultiTreeSearchInsertPane.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
-
-BI.shortcut("bi.multi_tree_search_insert_pane", BI.MultiTreeSearchInsertPane);
+    populate(op) {
+        this.partTree.stroke(...arguments);
+    }
+}

src/widget/multitree/trigger/multi.tree.search.pane.js

@@ -1,84 +1,84 @@
-/**
- *
- * 在搜索框中输入文本弹出的面板
- * @class BI.MultiTreeSearchPane
- * @extends BI.Pane
- */
+import { shortcut, extend, i18nText, Controller } from "@/core";
+import { Pane } from "@/base";
+import { TreeView, PartTree } from "@/case";
 
-BI.MultiTreeSearchPane = BI.inherit(BI.Pane, {
+@shortcut()
+export class MultiTreeSearchPane extends Pane {
+    static xtype = "bi.multi_tree_search_pane";
 
-    props: {
-        baseCls: "bi-multi-tree-search-pane bi-card",
-        itemsCreator: BI.emptyFn,
-        keywordGetter: BI.emptyFn
-    },
+    props = { baseCls: "bi-multi-tree-search-pane bi-card" };
 
-    render: function () {
-        var self = this, opts = this.options;
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
+    static EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
+    static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
 
-        return BI.extend({
-            type: "bi.part_tree",
-            element: this,
-            tipText: BI.i18nText("BI-No_Select"),
-            itemsCreator: function (op, callback) {
-                op.keyword = opts.keywordGetter();
-                opts.itemsCreator(op, callback);
-            },
-            value: opts.value,
-            listeners: [
-                {
-                    eventName: BI.Controller.EVENT_CHANGE,
-                    action: function () {
-                        self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
-                    }
-                }, {
-                    eventName: BI.TreeView.EVENT_CHANGE,
-                    action: function () {
-                        self.fireEvent(BI.MultiTreeSearchPane.EVENT_CHANGE);
-                    }
-                }, {
-                    eventName: BI.PartTree.EVENT_CLICK_TREE_NODE,
-                    action: function () {
-                        self.fireEvent(BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE);
+    render() {
+        const self = this,
+            opts = this.options;
+
+        return extend(
+            {
+                type: PartTree.xtype,
+                element: this,
+                tipText: i18nText("BI-No_Select"),
+                itemsCreator(op, callback) {
+                    op.keyword = opts.keywordGetter();
+                    opts.itemsCreator(op, callback);
+                },
+                value: opts.value,
+                listeners: [
+                    {
+                        eventName: Controller.EVENT_CHANGE,
+                        action() {
+                            self.fireEvent(Controller.EVENT_CHANGE, arguments);
+                        },
+                    },
+                    {
+                        eventName: TreeView.EVENT_CHANGE,
+                        action() {
+                            self.fireEvent(MultiTreeSearchPane.EVENT_CHANGE);
+                        },
+                    },
+                    {
+                        eventName: PartTree.EVENT_CLICK_TREE_NODE,
+                        action() {
+                            self.fireEvent(
+                                MultiTreeSearchPane.EVENT_CLICK_TREE_NODE
+                            );
+                        },
                     }
-                }
-            ],
-            ref: function (_ref) {
-                self.partTree = _ref;
-            }
-        }, opts.el);
-    },
+                ],
+                ref(_ref) {
+                    self.partTree = _ref;
+                },
+            },
+            opts.el
+        );
+    }
 
-    hasChecked: function () {
+    hasChecked() {
         return this.partTree.hasChecked();
-    },
+    }
 
-    setValue: function (v) {
+    setValue(v) {
         this.setSelectedValue(v.value);
-    },
+    }
 
-    setSelectedValue: function (v) {
+    setSelectedValue(v) {
         v || (v = {});
         this.partTree.setSelectedValue(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.partTree.getValue();
-    },
+    }
 
-    empty: function () {
+    empty() {
         this.partTree.empty();
-    },
-
-    populate: function (op) {
-        this.partTree.stroke.apply(this.partTree, arguments);
     }
-});
 
-BI.MultiTreeSearchPane.EVENT_CHANGE = "EVENT_CHANGE";
-
-BI.MultiTreeSearchPane.EVENT_CLICK_CONFIRM = "EVENT_CLICK_CONFIRM";
-BI.MultiTreeSearchPane.EVENT_CLICK_CLEAR = "EVENT_CLICK_CLEAR";
-BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
-
-BI.shortcut("bi.multi_tree_search_pane", BI.MultiTreeSearchPane);
+    populate(op) {
+        this.partTree.stroke(...arguments);
+    }
+}

src/widget/multitree/trigger/searcher.list.multi.tree.js

@@ -1,140 +1,168 @@
-/**
- * searcher
- * Created by guy on 15/11/3.
- * @class BI.MultiListTreeSearcher
- * @extends Widget
- */
-BI.MultiListTreeSearcher = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiListTreeSearcher.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    isNotNull,
+    isNumber,
+    size,
+    each,
+    last
+} from "@/core";
+import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect";
+import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect";
+import { Searcher } from "@/base";
+import { SimpleStateEditor } from "@/case";
+import { MultiTreeSearchPane } from "./multi.tree.search.pane";
+
+@shortcut()
+export class MultiListTreeSearcher extends Widget {
+    static xtype = "bi.multi_list_tree_searcher";
+
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_START = "EVENT_START";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_PAUSE = "EVENT_PAUSE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-list-tree-searcher",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: function (v) {
+            itemsCreator: emptyFn,
+            valueFormatter(v) {
                 return v;
             },
             popup: {},
 
             adapter: null,
-            masker: {}
+            masker: {},
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiListTreeSearcher.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.editor = BI.createWidget({
-            type: "bi.multi_select_editor",
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.editor = createWidget({
+            type: MultiSelectEditor.xtype,
             height: o.height,
             text: o.text,
             defaultText: o.defaultText,
             watermark: o.watermark,
             el: {
-                type: "bi.simple_state_editor",
-                height: o.height
+                type: SimpleStateEditor.xtype,
+                height: o.height,
             },
-            listeners: [{
-                eventName: BI.MultiSelectEditor.EVENT_FOCUS,
-                action: function () {
-                    self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS);
-                }
-            }, {
-                eventName: BI.MultiSelectEditor.EVENT_BLUR,
-                action: function () {
-                    self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR);
+            listeners: [
+                {
+                    eventName: MultiSelectEditor.EVENT_FOCUS,
+                    action() {
+                        self.fireEvent(MultiSelectSearcher.EVENT_FOCUS);
+                    },
+                },
+                {
+                    eventName: MultiSelectEditor.EVENT_BLUR,
+                    action() {
+                        self.fireEvent(MultiSelectSearcher.EVENT_BLUR);
+                    },
                 }
-            }]
+            ],
         });
 
-        this.searcher = BI.createWidget({
-            type: "bi.searcher",
+        this.searcher = createWidget({
+            type: Searcher.xtype,
             element: this,
             isAutoSearch: false,
             isAutoSync: false,
-            onSearch: function (op, callback) {
+            onSearch(op, callback) {
                 callback({
-                    keyword: self.editor.getValue()
+                    keyword: self.editor.getValue(),
                 });
             },
             el: this.editor,
 
-            popup: BI.extend({
-                type: "bi.multi_tree_search_pane",
-                keywordGetter: function () {
-                    return self.editor.getValue();
+            popup: extend(
+                {
+                    type: MultiTreeSearchPane.xtype,
+                    keywordGetter() {
+                        return self.editor.getValue();
+                    },
+                    itemsCreator(op, callback) {
+                        op.keyword = self.editor.getValue();
+                        o.itemsCreator(op, callback);
+                    },
+                    value: o.value,
                 },
-                itemsCreator: function (op, callback) {
-                    op.keyword = self.editor.getValue();
-                    o.itemsCreator(op, callback);
-                },
-                value: o.value
-            }, o.popup),
+                o.popup
+            ),
 
             adapter: o.adapter,
-            masker: o.masker
+            masker: o.masker,
         });
-        this.searcher.on(BI.Searcher.EVENT_START, function () {
-            self.fireEvent(BI.MultiListTreeSearcher.EVENT_START);
+        this.searcher.on(Searcher.EVENT_START, () => {
+            self.fireEvent(MultiListTreeSearcher.EVENT_START);
         });
-        this.searcher.on(BI.Searcher.EVENT_PAUSE, function () {
-            if (this.hasMatched()) {
-
-            }
-            self.fireEvent(BI.MultiListTreeSearcher.EVENT_PAUSE);
+        this.searcher.on(Searcher.EVENT_PAUSE, () => {
+            self.fireEvent(MultiListTreeSearcher.EVENT_PAUSE);
         });
-        this.searcher.on(BI.Searcher.EVENT_STOP, function () {
-            self.fireEvent(BI.MultiListTreeSearcher.EVENT_STOP);
+        this.searcher.on(Searcher.EVENT_STOP, () => {
+            self.fireEvent(MultiListTreeSearcher.EVENT_STOP);
         });
-        this.searcher.on(BI.Searcher.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiListTreeSearcher.EVENT_CHANGE, arguments);
+        this.searcher.on(Searcher.EVENT_CHANGE, function () {
+            self.fireEvent(MultiListTreeSearcher.EVENT_CHANGE, arguments);
         });
-        if (BI.isNotNull(o.value)) {
+        if (isNotNull(o.value)) {
             this.setState(o.value);
         }
-    },
+    }
 
-    adjustView: function () {
+    adjustView() {
         this.searcher.adjustView();
-    },
+    }
 
-    setAdapter: function (adapter) {
+    setAdapter(adapter) {
         this.searcher.setAdapter(adapter);
-    },
+    }
 
-    isSearching: function () {
+    isSearching() {
         return this.searcher.isSearching();
-    },
+    }
 
-    stopSearch: function () {
+    stopSearch() {
         this.searcher.stopSearch();
-    },
+    }
 
-    getKeyword: function () {
+    getKeyword() {
         return this.editor.getValue();
-    },
+    }
 
-    hasMatched: function () {
+    hasMatched() {
         return this.searcher.hasMatched();
-    },
+    }
 
-    hasChecked: function () {
+    hasChecked() {
         return this.searcher.getView() && this.searcher.getView().hasChecked();
-    },
+    }
 
-    setState: function (ob) {
-        var o = this.options;
+    setState(ob) {
+        const o = this.options;
         ob || (ob = {});
         ob.value || (ob.value = []);
-        var count = 0;
-        if (BI.isNumber(ob)) {
+        let count = 0;
+        if (isNumber(ob)) {
             this.editor.setState(ob);
-        } else if (BI.size(ob.value) === 0) {
+        } else if (size(ob.value) === 0) {
             this.editor.setState(BI.Selection.None);
         } else {
-            var text = "";
-            BI.each(ob.value, function (idx, path) {
-                var childValue = BI.last(path);
-                text += (path === "null" ? "" : (o.valueFormatter(childValue + "") || childValue) + "; ");
+            let text = "";
+            each(ob.value, (idx, path) => {
+                const childValue = last(path);
+                text +=
+                    path === "null"
+                        ? ""
+                        : `${o.valueFormatter(`${childValue}`) || childValue
+                        }; `;
                 count++;
             });
 
@@ -144,45 +172,38 @@ BI.MultiListTreeSearcher = BI.inherit(BI.Widget, {
                 this.editor.setState(text);
             }
         }
-    },
+    }
 
-    getState: function () {
+    getState() {
         return this.editor.getState();
-    },
+    }
 
-    setValue: function (ob) {
+    setValue(ob) {
         this.setState(ob);
         this.searcher.setValue(ob);
-    },
+    }
 
-    getKey: function () {
+    getKey() {
         return this.editor.getValue();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.searcher.getValue();
-    },
+    }
 
-    populate: function (items) {
-        this.searcher.populate.apply(this.searcher, arguments);
-    },
+    populate(items) {
+        this.searcher.populate(...arguments);
+    }
 
-    focus: function () {
+    focus() {
         this.editor.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.editor.setWaterMark(v);
     }
-});
-
-BI.MultiListTreeSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-BI.MultiListTreeSearcher.EVENT_CHANGE = "EVENT_CHANGE";
-BI.MultiListTreeSearcher.EVENT_START = "EVENT_START";
-BI.MultiListTreeSearcher.EVENT_STOP = "EVENT_STOP";
-BI.MultiListTreeSearcher.EVENT_PAUSE = "EVENT_PAUSE";
-BI.shortcut("bi.multi_list_tree_searcher", BI.MultiListTreeSearcher);
+}

src/widget/multitree/trigger/searcher.multi.tree.js

@@ -1,220 +1,260 @@
-/**
- * searcher
- * Created by guy on 15/11/3.
- * @class BI.MultiTreeSearcher
- * @extends Widget
- */
-BI.MultiTreeSearcher = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.MultiTreeSearcher.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    createWidget,
+    isNotNull,
+    isNumber,
+    size,
+    keys,
+    each,
+    isEmptyObject, Func
+} from "@/core";
+import { MultiSelectEditor } from "../../multiselect/trigger/editor.multiselect";
+import { MultiSelectSearcher } from "../../multiselect/trigger/searcher.multiselect";
+import { MultiTreeSearchPane } from "./multi.tree.search.pane";
+import { Searcher } from "@/base";
+import { SimpleStateEditor } from "@/case";
+
+@shortcut()
+export class MultiTreeSearcher extends Widget {
+    static xtype = "bi.multi_tree_searcher";
+
+    static EVENT_SEARCHING = "EVENT_SEARCHING";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_START = "EVENT_START";
+    static EVENT_STOP = "EVENT_STOP";
+    static EVENT_PAUSE = "EVENT_PAUSE";
+    static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-multi-tree-searcher",
-            itemsCreator: BI.emptyFn,
-            valueFormatter: function (v) {
+            itemsCreator: emptyFn,
+            valueFormatter(v) {
                 return v;
             },
             popup: {},
 
             adapter: null,
-            masker: {}
+            masker: {},
         });
-    },
+    }
 
-    _init: function () {
-        BI.MultiTreeSearcher.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.editor = BI.createWidget({
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.editor = createWidget({
             type: "bi.multi_select_editor",
             watermark: o.watermark,
             height: o.height,
             el: {
-                type: "bi.simple_state_editor",
+                type: SimpleStateEditor.xtype,
                 text: o.text,
                 defaultText: o.defaultText,
-                height: o.height
+                height: o.height,
             },
             listeners: [
                 {
-                    eventName: BI.MultiSelectEditor.EVENT_FOCUS,
-                    action: function () {
-                        self.fireEvent(BI.MultiSelectSearcher.EVENT_FOCUS);
-                    }
-                }, {
-                    eventName: BI.MultiSelectEditor.EVENT_BLUR,
-                    action: function () {
-                        self.fireEvent(BI.MultiSelectSearcher.EVENT_BLUR);
-                    }
+                    eventName: MultiSelectEditor.EVENT_FOCUS,
+                    action() {
+                        self.fireEvent(MultiSelectSearcher.EVENT_FOCUS);
+                    },
+                },
+                {
+                    eventName: MultiSelectEditor.EVENT_BLUR,
+                    action() {
+                        self.fireEvent(MultiSelectSearcher.EVENT_BLUR);
+                    },
                 }
-            ]
+            ],
         });
 
-        this.searcher = BI.createWidget({
-            type: "bi.searcher",
+        this.searcher = createWidget({
+            type: Searcher.xtype,
             element: this,
             isAutoSearch: false,
             isAutoSync: false,
-            onSearch: function (op, callback) {
+            onSearch(op, callback) {
                 callback({
-                    keyword: self.editor.getValue()
+                    keyword: self.editor.getValue(),
                 });
             },
             el: this.editor,
 
-            popup: BI.extend({
-                type: "bi.multi_tree_search_pane",
-                keywordGetter: function () {
-                    return self.editor.getValue();
-                },
-                itemsCreator: function (op, callback) {
-                    op.keyword = self.editor.getValue();
-                    o.itemsCreator(op, callback);
-                },
-                listeners: [
-                    {
-                        eventName: BI.MultiTreeSearchPane.EVENT_CLICK_TREE_NODE,
-                        action: function () {
-                            self.fireEvent(BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE, arguments);
+            popup: extend(
+                {
+                    type: MultiTreeSearchPane.xtype,
+                    keywordGetter() {
+                        return self.editor.getValue();
+                    },
+                    itemsCreator(op, callback) {
+                        op.keyword = self.editor.getValue();
+                        o.itemsCreator(op, callback);
+                    },
+                    listeners: [
+                        {
+                            eventName:
+                            MultiTreeSearchPane.EVENT_CLICK_TREE_NODE,
+                            action() {
+                                self.fireEvent(
+                                    MultiTreeSearcher.EVENT_CLICK_TREE_NODE,
+                                    arguments
+                                );
+                            },
                         }
-                    }
-                ],
-                value: o.value
-            }, o.popup),
+                    ],
+                    value: o.value,
+                },
+                o.popup
+            ),
 
             adapter: o.adapter,
-            masker: o.masker
+            masker: o.masker,
         });
-        this.searcher.on(BI.Searcher.EVENT_START, function () {
-            self.fireEvent(BI.MultiTreeSearcher.EVENT_START);
+        this.searcher.on(Searcher.EVENT_START, () => {
+            self.fireEvent(MultiTreeSearcher.EVENT_START);
         });
-        this.searcher.on(BI.Searcher.EVENT_PAUSE, function () {
-            self.fireEvent(BI.MultiTreeSearcher.EVENT_PAUSE);
+        this.searcher.on(Searcher.EVENT_PAUSE, () => {
+            self.fireEvent(MultiTreeSearcher.EVENT_PAUSE);
         });
-        this.searcher.on(BI.Searcher.EVENT_STOP, function () {
-            self.fireEvent(BI.MultiTreeSearcher.EVENT_STOP);
+        this.searcher.on(Searcher.EVENT_STOP, () => {
+            self.fireEvent(MultiTreeSearcher.EVENT_STOP);
         });
-        this.searcher.on(BI.Searcher.EVENT_CHANGE, function () {
-            self.fireEvent(BI.MultiTreeSearcher.EVENT_CHANGE, arguments);
+        this.searcher.on(Searcher.EVENT_CHANGE, function () {
+            self.fireEvent(MultiTreeSearcher.EVENT_CHANGE, arguments);
         });
-        this.searcher.on(BI.Searcher.EVENT_SEARCHING, function () {
-            var keywords = this.getKeywords();
-            self.fireEvent(BI.MultiTreeSearcher.EVENT_SEARCHING, keywords);
+        this.searcher.on(Searcher.EVENT_SEARCHING, function () {
+            const keywords = this.getKeywords();
+            self.fireEvent(MultiTreeSearcher.EVENT_SEARCHING, keywords);
         });
-        if (BI.isNotNull(o.value)) {
+        if (isNotNull(o.value)) {
             this.setState(o.value);
         }
-    },
+    }
 
-    adjustView: function () {
+    adjustView() {
         this.searcher.adjustView();
-    },
+    }
 
-    setAdapter: function (adapter) {
+    setAdapter(adapter) {
         this.searcher.setAdapter(adapter);
-    },
+    }
 
-    isSearching: function () {
+    isSearching() {
         return this.searcher.isSearching();
-    },
+    }
 
-    stopSearch: function () {
+    stopSearch() {
         this.searcher.stopSearch();
-    },
+    }
 
-    getKeyword: function () {
+    getKeyword() {
         return this.editor.getValue();
-    },
+    }
 
-    hasMatched: function () {
+    hasMatched() {
         return this.searcher.hasMatched();
-    },
+    }
 
-    hasChecked: function () {
+    hasChecked() {
         return this.searcher.getView() && this.searcher.getView().hasChecked();
-    },
+    }
 
-    setState: function (ob) {
-        var o = this.options;
+    setState(ob) {
+        const o = this.options;
         ob || (ob = {});
         ob.value || (ob.value = {});
-        var count = 0;
-        if (BI.isNumber(ob)) {
+        let count = 0;
+        if (isNumber(ob)) {
             this.editor.setState(ob);
-        } else if (BI.size(ob.value) === 0) {
+        } else if (size(ob.value) === 0) {
             this.editor.setState(BI.Selection.None);
         } else {
-            var text = "";
-            var value = ob.value;
-            var names = BI.Func.getSortedResult(BI.keys(value));
-            BI.each(names, function (idx, name) {
-                var childNodes = getChildrenNode(value[name]);
-                text += (name === "null" ? "" : (o.valueFormatter(name + "") || name)) + (childNodes === "" ? (BI.isEmptyObject(value[name]) ? "" : ":") : (":" + childNodes)) + "; ";
+            let text = "";
+            const value = ob.value;
+            const names = BI.Func.getSortedResult(keys(value));
+            each(names, (idx, name) => {
+                const childNodes = getChildrenNode(value[name]);
+                text +=
+                    `${(name === "null"
+                        ? ""
+                        : o.valueFormatter(`${name}`) || name) +
+                    (childNodes === ""
+                        ? isEmptyObject(value[name])
+                            ? ""
+                            : ":"
+                        : `:${childNodes}`)
+                    }; `;
                 if (childNodes === "") {
                     count++;
                 }
             });
 
             if (count > 20) {
-                this.editor.setState(BI.Selection.Multi);
+                this.editor.setState(Selection.Multi);
             } else {
                 this.editor.setState(text);
             }
         }
 
         function getChildrenNode(ob) {
-            var text = "";
-            var index = 0, size = BI.size(ob);
-            var names = BI.Func.getSortedResult(BI.keys(ob));
-            BI.each(names, function (idx, name) {
+            let text = "";
+            const size = size(ob);
+            let index = 0;
+
+            const names = Func.getSortedResult(keys(ob));
+            each(names, (idx, name) => {
                 index++;
-                var childNodes = getChildrenNode(ob[name]);
-                text += (name === "null" ? "" : (o.valueFormatter(name + "") || name)) + (childNodes === "" ? "" : (":" + childNodes)) + (index === size ? "" : ",");
+                const childNodes = getChildrenNode(ob[name]);
+                text +=
+                    (name === "null"
+                        ? ""
+                        : o.valueFormatter(`${name}`) || name) +
+                    (childNodes === "" ? "" : `:${childNodes}`) +
+                    (index === size ? "" : ",");
                 if (childNodes === "") {
                     count++;
                 }
             });
+
             return text;
         }
-    },
+    }
 
-    getState: function () {
+    getState() {
         return this.editor.getState();
-    },
+    }
 
-    setValue: function (ob) {
+    setValue(ob) {
         this.setState(ob);
         this.searcher.setValue(ob);
-    },
+    }
 
-    getKey: function () {
+    getKey() {
         return this.editor.getValue();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.searcher.getValue();
-    },
+    }
 
-    populate: function (items) {
-        this.searcher.populate.apply(this.searcher, arguments);
-    },
+    populate(items) {
+        this.searcher.populate(...arguments);
+    }
 
-    focus: function () {
+    focus() {
         this.editor.focus();
-    },
+    }
 
-    blur: function () {
+    blur() {
         this.editor.blur();
-    },
+    }
 
-    setWaterMark: function (v) {
+    setWaterMark(v) {
         this.editor.setWaterMark(v);
     }
-});
-
-BI.MultiTreeSearcher.EVENT_SEARCHING = "EVENT_SEARCHING";
-BI.MultiTreeSearcher.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-BI.MultiTreeSearcher.EVENT_CHANGE = "EVENT_CHANGE";
-BI.MultiTreeSearcher.EVENT_START = "EVENT_START";
-BI.MultiTreeSearcher.EVENT_STOP = "EVENT_STOP";
-BI.MultiTreeSearcher.EVENT_PAUSE = "EVENT_PAUSE";
-BI.MultiTreeSearcher.EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
-BI.shortcut("bi.multi_tree_searcher", BI.MultiTreeSearcher);
+}

src/widget/selecttree/nodes/node.first.plus.js

@@ -1,35 +1,48 @@
-/**
- * 加号表示的组节点
- * Created by GUY on 2015/9/6.
- * @class BI.SelectTreeFirstPlusGroupNode
- * @extends BI.NodeButton
- */
-BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
-    _defaultConfig: function () {
-        var conf = BI.SelectTreeFirstPlusGroupNode.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-select-tree-first-plus-group-node bi-list-item-active",
+import {
+    shortcut,
+    extend,
+    createWidget,
+    Controller,
+    Events,
+    isNotNull, LogicFactory, Direction
+} from "@/core";
+import { NodeButton, Label } from "@/base";
+import { FirstTreeNodeCheckbox } from "@/case";
+
+@shortcut()
+export class SelectTreeFirstPlusGroupNode extends NodeButton {
+    static xtype = "bi.select_tree_first_plus_group_node";
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+
+        return extend(conf, {
+            baseCls:
+                `${conf.baseCls || ""
+                } bi-select-tree-first-plus-group-node bi-list-item-active`,
             logic: {
-                dynamic: false
+                dynamic: false,
             },
             id: "",
             pId: "",
             readonly: true,
             open: false,
-            height: 24
+            height: 24,
         });
-    },
-    _init: function () {
-        BI.SelectTreeFirstPlusGroupNode.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.checkbox = BI.createWidget({
-            type: "bi.first_tree_node_checkbox",
+    }
+
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.checkbox = createWidget({
+            type: FirstTreeNodeCheckbox.xtype,
             stopPropagation: true,
             iconHeight: o.height,
-            iconWidth: o.height
+            iconWidth: o.height,
         });
-        this.text = BI.createWidget({
-            type: "bi.label",
+        this.text = createWidget({
+            type: Label.xtype,
             textAlign: "left",
             whiteSpace: "nowrap",
             textHeight: o.height,
@@ -38,10 +51,10 @@ BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
             text: o.text,
             value: o.value,
             keyword: o.keyword,
-            py: o.py
+            py: o.py,
         });
-        this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) {
-            if (type === BI.Events.CLICK) {
+        this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
+            if (type === Events.CLICK) {
                 if (this.isSelected()) {
                     self.triggerExpand();
                 } else {
@@ -49,40 +62,48 @@ BI.SelectTreeFirstPlusGroupNode = BI.inherit(BI.NodeButton, {
                 }
             }
         });
-        var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
-        var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, {
-            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-            el: this.checkbox
-        }, this.text);
-        BI.createWidget(BI.extend({
-            element: this
-        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
-            items: items
-        }))));
-    },
+        const type = LogicFactory.createLogicTypeByDirection(
+            Direction.Left
+        );
+        const items = LogicFactory.createLogicItemsByDirection(
+            Direction.Left,
+            {
+                width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                el: this.checkbox,
+            },
+            this.text
+        );
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                LogicFactory.createLogic(
+                    type,
+                    extend(o.logic, {
+                        items,
+                    })
+                )
+            )
+        );
+    }
 
-    isOnce: function () {
+    isOnce() {
         return true;
-    },
-
-    doRedMark: function () {
-        this.text.doRedMark.apply(this.text, arguments);
-    },
+    }
 
-    unRedMark: function () {
-        this.text.unRedMark.apply(this.text, arguments);
-    },
+    doRedMark() {
+        this.text.doRedMark(...arguments);
+    }
 
-    doClick: function () {
-        BI.NodeButton.superclass.doClick.apply(this, arguments);
-    },
+    unRedMark() {
+        this.text.unRedMark(...arguments);
+    }
 
-    setOpened: function (v) {
-        BI.SelectTreeFirstPlusGroupNode.superclass.setOpened.apply(this, arguments);
-        if (BI.isNotNull(this.checkbox)) {
+    setOpened(v) {
+        super.setOpened(...arguments);
+        if (isNotNull(this.checkbox)) {
             this.checkbox.setSelected(v);
         }
     }
-});
-
-BI.shortcut("bi.select_tree_first_plus_group_node", BI.SelectTreeFirstPlusGroupNode);
+}

src/widget/selecttree/nodes/node.last.plus.js

@@ -1,35 +1,48 @@
-/**
- * 加号表示的组节点
- * Created by GUY on 2015/9/6.
- * @class BI.SelectTreeLastPlusGroupNode
- * @extends BI.NodeButton
- */
-BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
-    _defaultConfig: function () {
-        var conf = BI.SelectTreeLastPlusGroupNode.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-select-tree-last-plus-group-node bi-list-item-active",
+import {
+    shortcut,
+    extend,
+    createWidget,
+    Controller,
+    Events,
+    isNotNull, LogicFactory, Direction
+} from "@/core";
+import { NodeButton, Label } from "@/base";
+import { LastTreeNodeCheckbox } from "@/case";
+
+@shortcut()
+export class SelectTreeLastPlusGroupNode extends NodeButton {
+    static xtype = "bi.select_tree_last_plus_group_node";
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+
+        return extend(conf, {
+            baseCls:
+                `${conf.baseCls || ""
+                } bi-select-tree-last-plus-group-node bi-list-item-active`,
             logic: {
-                dynamic: false
+                dynamic: false,
             },
             id: "",
             pId: "",
             readonly: true,
             open: false,
-            height: 24
+            height: 24,
         });
-    },
-    _init: function () {
-        BI.SelectTreeLastPlusGroupNode.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.checkbox = BI.createWidget({
-            type: "bi.last_tree_node_checkbox",
+    }
+
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.checkbox = createWidget({
+            type: LastTreeNodeCheckbox.xtype,
             stopPropagation: true,
             iconHeight: o.height,
-            iconWidth: o.height
+            iconWidth: o.height,
         });
-        this.text = BI.createWidget({
-            type: "bi.label",
+        this.text = createWidget({
+            type: Label.xtype,
             textAlign: "left",
             whiteSpace: "nowrap",
             textHeight: o.height,
@@ -38,10 +51,10 @@ BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
             text: o.text,
             value: o.value,
             keyword: o.keyword,
-            py: o.py
+            py: o.py,
         });
-        this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) {
-            if (type === BI.Events.CLICK) {
+        this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
+            if (type === Events.CLICK) {
                 if (this.isSelected()) {
                     self.triggerExpand();
                 } else {
@@ -49,40 +62,48 @@ BI.SelectTreeLastPlusGroupNode = BI.inherit(BI.NodeButton, {
                 }
             }
         });
-        var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
-        var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, {
-            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-            el: this.checkbox
-        }, this.text);
-        BI.createWidget(BI.extend({
-            element: this
-        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
-            items: items
-        }))));
-    },
+        const type = LogicFactory.createLogicTypeByDirection(
+            Direction.Left
+        );
+        const items = LogicFactory.createLogicItemsByDirection(
+            Direction.Left,
+            {
+                width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                el: this.checkbox,
+            },
+            this.text
+        );
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                LogicFactory.createLogic(
+                    type,
+                    extend(o.logic, {
+                        items,
+                    })
+                )
+            )
+        );
+    }
 
-    isOnce: function () {
+    isOnce() {
         return true;
-    },
-
-    doRedMark: function () {
-        this.text.doRedMark.apply(this.text, arguments);
-    },
+    }
 
-    unRedMark: function () {
-        this.text.unRedMark.apply(this.text, arguments);
-    },
+    doRedMark() {
+        this.text.doRedMark(...arguments);
+    }
 
-    doClick: function () {
-        BI.NodeButton.superclass.doClick.apply(this, arguments);
-    },
+    unRedMark() {
+        this.text.unRedMark(...arguments);
+    }
 
-    setOpened: function (v) {
-        BI.SelectTreeLastPlusGroupNode.superclass.setOpened.apply(this, arguments);
-        if (BI.isNotNull(this.checkbox)) {
+    setOpened(v) {
+        super.setOpened(...arguments);
+        if (isNotNull(this.checkbox)) {
             this.checkbox.setSelected(v);
         }
     }
-});
-
-BI.shortcut("bi.select_tree_last_plus_group_node", BI.SelectTreeLastPlusGroupNode);
+}

src/widget/selecttree/nodes/node.mid.plus.js

@@ -1,35 +1,48 @@
-/**
- * 加号表示的组节点
- * Created by GUY on 2015/9/6.
- * @class BI.SelectTreeMidPlusGroupNode
- * @extends BI.NodeButton
- */
-BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
-    _defaultConfig: function () {
-        var conf = BI.SelectTreeMidPlusGroupNode.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-select-tree-mid-plus-group-node bi-list-item-active",
+import {
+    shortcut,
+    extend,
+    createWidget,
+    Controller,
+    Events,
+    isNotNull, Direction, LogicFactory
+} from "@/core";
+import { NodeButton, Label } from "@/base";
+import { MidTreeNodeCheckbox } from "@/case";
+
+@shortcut()
+export class SelectTreeMidPlusGroupNode extends NodeButton {
+    static xtype = "bi.select_tree_mid_plus_group_node";
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+
+        return extend(conf, {
+            baseCls:
+                `${conf.baseCls || ""
+                } bi-select-tree-mid-plus-group-node bi-list-item-active`,
             logic: {
-                dynamic: false
+                dynamic: false,
             },
             id: "",
             pId: "",
             readonly: true,
             open: false,
-            height: 24
+            height: 24,
         });
-    },
-    _init: function () {
-        BI.SelectTreeMidPlusGroupNode.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.checkbox = BI.createWidget({
-            type: "bi.mid_tree_node_checkbox",
+    }
+
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.checkbox = createWidget({
+            type: MidTreeNodeCheckbox.xtype,
             stopPropagation: true,
             iconHeight: o.height,
-            iconWidth: o.height
+            iconWidth: o.height,
         });
-        this.text = BI.createWidget({
-            type: "bi.label",
+        this.text = createWidget({
+            type: Label.xtype,
             textAlign: "left",
             whiteSpace: "nowrap",
             textHeight: o.height,
@@ -38,10 +51,10 @@ BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
             text: o.text,
             value: o.value,
             keyword: o.keyword,
-            py: o.py
+            py: o.py,
         });
-        this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) {
-            if (type === BI.Events.CLICK) {
+        this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
+            if (type === Events.CLICK) {
                 if (this.isSelected()) {
                     self.triggerExpand();
                 } else {
@@ -49,40 +62,48 @@ BI.SelectTreeMidPlusGroupNode = BI.inherit(BI.NodeButton, {
                 }
             }
         });
-        var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
-        var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, {
-            width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-            el: this.checkbox
-        }, this.text);
-        BI.createWidget(BI.extend({
-            element: this
-        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
-            items: items
-        }))));
-    },
+        const type = LogicFactory.createLogicTypeByDirection(
+            Direction.Left
+        );
+        const items = LogicFactory.createLogicItemsByDirection(
+            Direction.Left,
+            {
+                width: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
+                el: this.checkbox,
+            },
+            this.text
+        );
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                LogicFactory.createLogic(
+                    type,
+                    extend(o.logic, {
+                        items,
+                    })
+                )
+            )
+        );
+    }
 
-    isOnce: function () {
+    isOnce() {
         return true;
-    },
-
-    doRedMark: function () {
-        this.text.doRedMark.apply(this.text, arguments);
-    },
+    }
 
-    unRedMark: function () {
-        this.text.unRedMark.apply(this.text, arguments);
-    },
+    doRedMark() {
+        this.text.doRedMark(...arguments);
+    }
 
-    doClick: function () {
-        BI.NodeButton.superclass.doClick.apply(this, arguments);
-    },
+    unRedMark() {
+        this.text.unRedMark(...arguments);
+    }
 
-    setOpened: function (v) {
-        BI.SelectTreeMidPlusGroupNode.superclass.setOpened.apply(this, arguments);
-        if (BI.isNotNull(this.checkbox)) {
+    setOpened(v) {
+        super.setOpened(...arguments);
+        if (isNotNull(this.checkbox)) {
             this.checkbox.setSelected(v);
         }
     }
-});
-
-BI.shortcut("bi.select_tree_mid_plus_group_node", BI.SelectTreeMidPlusGroupNode);
+}

src/widget/selecttree/nodes/node.plus.js

@@ -1,35 +1,48 @@
-/**
- * 加号表示的组节点
- * Created by GUY on 2015/9/6.
- * @class BI.SelectTreePlusGroupNode
- * @extends BI.NodeButton
- */
-BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, {
-    _defaultConfig: function () {
-        var conf = BI.SelectTreePlusGroupNode.superclass._defaultConfig.apply(this, arguments);
-        return BI.extend(conf, {
-            baseCls: (conf.baseCls || "") + " bi-select-tree-plus-group-node bi-list-item-active",
+import {
+    shortcut,
+    extend,
+    createWidget,
+    Controller,
+    Events,
+    isNotNull, LogicFactory
+} from "@/core";
+import { NodeButton, Label } from "@/base";
+import { TreeNodeCheckbox } from "@/case";
+
+@shortcut()
+export class SelectTreePlusGroupNode extends NodeButton {
+    static xtype = "bi.select_tree_plus_group_node";
+
+    _defaultConfig() {
+        const conf = super._defaultConfig(...arguments);
+
+        return extend(conf, {
+            baseCls:
+                `${conf.baseCls || ""
+                } bi-select-tree-plus-group-node bi-list-item-active`,
             logic: {
-                dynamic: false
+                dynamic: false,
             },
             id: "",
             pId: "",
             readonly: true,
             open: false,
-            height: 24
+            height: 24,
         });
-    },
-    _init: function () {
-        BI.SelectTreePlusGroupNode.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
-        this.checkbox = BI.createWidget({
-            type: "bi.tree_node_checkbox",
+    }
+
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
+        this.checkbox = createWidget({
+            type: TreeNodeCheckbox.xtype,
             stopPropagation: true,
             iconHeight: o.height,
-            iconWidth: o.iconWrapperWidth || o.height
+            iconWidth: o.iconWrapperWidth || o.height,
         });
-        this.text = BI.createWidget({
-            type: "bi.label",
+        this.text = createWidget({
+            type: Label.xtype,
             textAlign: "left",
             whiteSpace: "nowrap",
             textHeight: o.height,
@@ -38,10 +51,10 @@ BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, {
             text: o.text,
             value: o.value,
             keyword: o.keyword,
-            py: o.py
+            py: o.py,
         });
-        this.checkbox.on(BI.Controller.EVENT_CHANGE, function (type) {
-            if (type === BI.Events.CLICK) {
+        this.checkbox.on(Controller.EVENT_CHANGE, function (type) {
+            if (type === Events.CLICK) {
                 if (this.isSelected()) {
                     self.triggerExpand();
                 } else {
@@ -49,40 +62,48 @@ BI.SelectTreePlusGroupNode = BI.inherit(BI.NodeButton, {
                 }
             }
         });
-        var type = BI.LogicFactory.createLogicTypeByDirection(BI.Direction.Left);
-        var items = BI.LogicFactory.createLogicItemsByDirection(BI.Direction.Left, {
-            width: 24,
-            el: this.checkbox
-        }, this.text);
-        BI.createWidget(BI.extend({
-            element: this
-        }, BI.LogicFactory.createLogic(type, BI.extend(o.logic, {
-            items: items
-        }))));
-    },
+        const type = LogicFactory.createLogicTypeByDirection(
+            BI.Direction.Left
+        );
+        const items = LogicFactory.createLogicItemsByDirection(
+            BI.Direction.Left,
+            {
+                width: 24,
+                el: this.checkbox,
+            },
+            this.text
+        );
+        createWidget(
+            extend(
+                {
+                    element: this,
+                },
+                LogicFactory.createLogic(
+                    type,
+                    extend(o.logic, {
+                        items,
+                    })
+                )
+            )
+        );
+    }
 
-    isOnce: function () {
+    isOnce() {
         return true;
-    },
-
-    doRedMark: function () {
-        this.text.doRedMark.apply(this.text, arguments);
-    },
+    }
 
-    unRedMark: function () {
-        this.text.unRedMark.apply(this.text, arguments);
-    },
+    doRedMark() {
+        this.text.doRedMark(...arguments);
+    }
 
-    doClick: function () {
-        BI.NodeButton.superclass.doClick.apply(this, arguments);
-    },
+    unRedMark() {
+        this.text.unRedMark(...arguments);
+    }
 
-    setOpened: function (v) {
-        BI.SelectTreePlusGroupNode.superclass.setOpened.apply(this, arguments);
-        if (BI.isNotNull(this.checkbox)) {
+    setOpened(v) {
+        super.setOpened(...arguments);
+        if (isNotNull(this.checkbox)) {
             this.checkbox.setSelected(v);
         }
     }
-});
-
-BI.shortcut("bi.select_tree_plus_group_node", BI.SelectTreePlusGroupNode);
+}

src/widget/selecttree/selecttree.combo.js

@@ -1,11 +1,32 @@
 /**
- * @class BI.SelectTreeCombo
- * @extends BI.Widget
+ * @class SelectTreeCombo
+ * @extends Widget
  */
-BI.SelectTreeCombo = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.SelectTreeCombo.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    Widget,
+    extend,
+    createWidget,
+    Controller,
+    contains,
+    isArray,
+    toPix,
+    isKey,
+    isEmptyArray,
+    isEmptyString,
+    find,
+    isNull
+} from "@/core";
+import { Combo } from "@/base";
+import { SingleTreeTrigger } from "@/widget/singletree/singletree.trigger";
+import { SelectTreePopup } from "./selecttree.popup";
+
+@shortcut()
+export class SelectTreeCombo extends Widget {
+    static xtype = "bi.select_tree_combo";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-select-tree-combo bi-border bi-border-radius",
             height: 24,
             text: "",
@@ -13,70 +34,68 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
             value: "",
             allowClear: false,
         });
-    },
+    }
 
-    _init: function () {
-        var self = this, o = this.options;
-        BI.SelectTreeCombo.superclass._init.apply(this, arguments);
+    _init() {
+        const self = this, o = this.options;
+        super._init(...arguments);
 
-        this.trigger = BI.createWidget({
-            type: "bi.single_tree_trigger",
+        this.trigger = createWidget({
+            type: SingleTreeTrigger.xtype,
             text: o.text,
-            height: BI.toPix(o.height, 2),
+            height: toPix(o.height, 2),
             items: o.items,
             value: o.value,
             allowClear: o.allowClear,
             warningTitle: o.warningTitle,
         });
 
-        this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () {
-            self._clear();
+        this.trigger.on(SingleTreeTrigger.EVENT_CLEAR, () => {
+            this._clear();
         });
 
-        this.popup = BI.createWidget({
-            type: "bi.select_level_tree",
+        this.popup = createWidget({
+            type: SelectTreePopup.xtype,
             items: o.items,
-            value: o.value
+            value: o.value,
         });
 
-        this.combo = BI.createWidget({
-            type: "bi.combo",
-            width: BI.toPix(o.width, 2),
-            height: BI.toPix(o.height, 2),
+        this.combo = createWidget({
+            type: Combo.xtype,
+            width: toPix(o.width, 2),
+            height: toPix(o.height, 2),
             container: o.container,
             element: this,
             adjustLength: 2,
             el: this.trigger,
             popup: {
-                el: this.popup
-            }
+                el: this.popup,
+            },
         });
 
-        this.combo.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.combo.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
 
-        this.popup.on(BI.SingleTreePopup.EVENT_CHANGE, function () {
+        this.popup.on(SelectTreePopup.EVENT_CHANGE, () => {
             self.setValue(self.popup.getValue());
             self.combo.hideView();
         });
 
-        if (BI.isKey(o.value)) {
+        if (isKey(o.value)) {
             this._checkError(o.value);
         }
-    },
+    }
 
-    _checkError: function (v) {
-        if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) {
+    _checkError(v) {
+        if (isNull(v) || isEmptyArray(v) || isEmptyString(v)) {
             this.trigger.options.tipType = "success";
             this.trigger.element.removeClass("error");
             this.element.removeClass("error");
         } else {
-            v = BI.isArray(v) ? v : [v];
-            var result = BI.find(this.options.items, function (idx, item) {
-                return BI.contains(v, item.value);
-            });
-            if (BI.isNull(result)) {
+            v = isArray(v) ? v : [v];
+            const result = find(this.options.items, (idx, item) => contains(v, item.value));
+            if (isNull(result)) {
                 this.trigger.setTipType("warning");
                 this.element.removeClass("error").addClass("error");
                 this.trigger.element.removeClass("error").addClass("error");
@@ -86,27 +105,24 @@ BI.SelectTreeCombo = BI.inherit(BI.Widget, {
                 this.element.removeClass("error");
             }
         }
-    },
+    }
 
-    _clear: function () {
+    _clear() {
         this.setValue([]);
-    },
+    }
 
-    setValue: function (v) {
-        v = BI.isArray(v) ? v : [v];
+    setValue(v) {
+        v = isArray(v) ? v : [v];
         this.trigger.setValue(v);
         this.popup.setValue(v);
         this._checkError(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.popup.getValue();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.combo.populate(items);
     }
-});
-
-
-BI.shortcut("bi.select_tree_combo", BI.SelectTreeCombo);
+}

src/widget/selecttree/selecttree.expander.js

@@ -1,77 +1,86 @@
-/**
- * @class BI.SelectTreeExpander
- * @extends BI.Widget
- */
-BI.SelectTreeExpander = BI.inherit(BI.Widget, {
+import {
+    shortcut,
+    Widget,
+    extend,
+    createWidget,
+    Controller,
+    Events,
+    contains
+} from "@/core";
+import { Expander } from "@/base";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.SelectTreeExpander.superclass._defaultConfig.apply(this, arguments), {
+@shortcut()
+export class SelectTreeExpander extends Widget {
+    static xtype = "bi.select_tree_expander";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-select-tree-expander",
             trigger: "",
             toggle: true,
             direction: "bottom",
             isDefaultInit: true,
             el: {},
-            popup: {}
+            popup: {},
         });
-    },
+    }
 
-    _init: function () {
-        BI.SelectTreeExpander.superclass._init.apply(this, arguments);
-        var self = this, o = this.options;
+    _init() {
+        super._init(...arguments);
+        const self = this,
+            o = this.options;
 
-        this.trigger = BI.createWidget(o.el);
-        this.trigger.on(BI.Controller.EVENT_CHANGE, function (type) {
-            if (type === BI.Events.CLICK) {
+        this.trigger = createWidget(o.el);
+        this.trigger.on(Controller.EVENT_CHANGE, function (type) {
+            if (type === Events.CLICK) {
                 if (this.isSelected()) {
                     self.expander.setValue([]);
                 }
             }
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
 
-        this.expander = BI.createWidget({
-            type: "bi.expander",
+        this.expander = createWidget({
+            type: Expander.xtype,
             element: this,
             trigger: o.trigger,
             toggle: o.toggle,
             direction: o.direction,
             isDefaultInit: o.isDefaultInit,
             el: this.trigger,
-            popup: o.popup
+            popup: o.popup,
         });
-        this.expander.on(BI.Controller.EVENT_CHANGE, function (type) {
-            if (type === BI.Events.CLICK) {
+        this.expander.on(Controller.EVENT_CHANGE, function (type) {
+            if (type === Events.CLICK) {
                 self.trigger.setSelected(false);
             }
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
-    },
+    }
 
-    getAllLeaves: function () {
+    getAllLeaves() {
         return this.expander.getAllLeaves();
-    },
+    }
 
-    setValue: function (v) {
-        if (BI.contains(v, this.trigger.getValue())) {
+    setValue(v) {
+        if (contains(v, this.trigger.getValue())) {
             this.trigger.setSelected(true);
             this.expander.setValue([]);
         } else {
             this.trigger.setSelected(false);
             this.expander.setValue(v);
         }
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         if (this.trigger.isSelected()) {
             return [this.trigger.getValue()];
         }
+
         return this.expander.getValue();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.expander.populate(items);
     }
-});
-
-BI.shortcut("bi.select_tree_expander", BI.SelectTreeExpander);
+}

src/widget/selecttree/selecttree.popup.js

@@ -1,94 +1,109 @@
-/**
- * @class BI.SelectTreePopup
- * @extends BI.Pane
- */
-
-BI.SelectTreePopup = BI.inherit(BI.Pane, {
-
-    _defaultConfig: function () {
-        return BI.extend(BI.SelectTreePopup.superclass._defaultConfig.apply(this, arguments), {
+import {
+    shortcut,
+    extend,
+    i18nText,
+    each,
+    createWidget,
+    Controller,
+    isArray, isNotEmptyArray, UUID, defaults, Tree, VerticalLayout
+} from "@/core";
+import { Pane } from "@/base";
+import { BasicTreeItem, BasicTreeNode, LevelTree, TreeExpander } from "@/case";
+
+@shortcut()
+export class SelectTreePopup extends Pane {
+    static xtype = "bi.select_level_tree";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-select-level-tree",
-            tipText: BI.i18nText("BI-No_Selected_Item"),
+            tipText: i18nText("BI-No_Selected_Item"),
             items: [],
-            value: ""
+            value: "",
         });
-    },
+    }
 
-    _formatItems: function (nodes, layer, pNode) {
-        var self = this;
-        BI.each(nodes, function (i, node) {
-            var extend = {
-                layer: layer,
+    _formatItems(nodes, layer, pNode) {
+        const self = this;
+        each(nodes, (i, node) => {
+            const extend = {
+                layer,
                 isFirstNode: i === 0,
                 isLastNode: i === nodes.length - 1,
                 height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT,
-                pNode: pNode,
+                pNode,
             };
-            node.id = node.id || BI.UUID();
-
-            if (node.isParent === true || node.parent === true || BI.isNotEmptyArray(node.children)) {
-
-                extend.type = "bi.tree_node";
+            node.id = node.id || UUID();
+
+            if (
+                node.isParent === true ||
+                node.parent === true ||
+                isNotEmptyArray(node.children)
+            ) {
+                extend.type = BasicTreeNode.xtype;
                 extend.selectable = true;
-                BI.defaults(node, extend);
+                defaults(node, extend);
                 self._formatItems(node.children, layer + 1, node);
             } else {
-                extend.type = "bi.tree_item";
-                BI.defaults(node, extend);
+                extend.type = BasicTreeItem.xtype;
+                defaults(node, extend);
             }
         });
+
         return nodes;
-    },
+    }
 
-    _init: function () {
-        BI.SelectTreePopup.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, o = this.options;
+        const self = this,
+            o = this.options;
 
-        this.tree = BI.createWidget({
-            type: "bi.level_tree",
+        this.tree = createWidget({
+            type: LevelTree.xtype,
             expander: {
-                type: "bi.tree_expander",
+                type: TreeExpander.xtype,
                 // isDefaultInit: true,
                 selectable: true,
             },
-            items: this._formatItems(BI.Tree.transformToTreeFormat(o.items), 0),
+            items: this._formatItems(Tree.transformToTreeFormat(o.items), 0),
             value: o.value,
-            chooseType: BI.Selection.Single
+            chooseType: Selection.Single,
         });
 
-        BI.createWidget({
-            type: "bi.vertical",
+        createWidget({
+            type: VerticalLayout.xtype,
             element: this,
             vgap: 5,
-            items: [this.tree]
+            items: [this.tree],
         });
 
-        this.tree.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.tree.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
 
-        this.tree.on(BI.LevelTree.EVENT_CHANGE, function () {
-            self.fireEvent(BI.SelectTreePopup.EVENT_CHANGE);
+        this.tree.on(LevelTree.EVENT_CHANGE, () => {
+            self.fireEvent(SelectTreePopup.EVENT_CHANGE);
         });
 
         this.check();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.tree.getValue();
-    },
+    }
 
-    setValue: function (v) {
-        v = BI.isArray(v) ? v : [v];
+    setValue(v) {
+        v = isArray(v) ? v : [v];
         this.tree.setValue(v);
-    },
-
-    populate: function (items) {
-        BI.SelectTreePopup.superclass.populate.apply(this, arguments);
-        this.tree.populate(this._formatItems(BI.Tree.transformToTreeFormat(items)));
     }
-});
 
-BI.SelectTreePopup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.select_level_tree", BI.SelectTreePopup);
+    populate(items) {
+        super.populate(...arguments);
+        this.tree.populate(
+            this._formatItems(Tree.transformToTreeFormat(items))
+        );
+    }
+}

src/widget/singletree/singletree.combo.js

@@ -1,12 +1,35 @@
-/**
- * @class BI.SingleTreeCombo
- * @extends BI.Widget
- */
-BI.SingleTreeCombo = BI.inherit(BI.Widget, {
-
-    _defaultConfig: function (config) {
-        return BI.extend(BI.SingleTreeCombo.superclass._defaultConfig.apply(this, arguments), {
-            baseCls: "bi-single-tree-combo " + (config.simple ? "bi-border-bottom" : "bi-border bi-border-radius"),
+import {
+    shortcut,
+    Widget,
+    extend,
+    createWidget,
+    toPix,
+    Controller,
+    isKey,
+    isNull,
+    isEmptyArray,
+    isEmptyString,
+    isArray,
+    contains, find
+} from "@/core";
+import { Combo } from "@/base";
+import { SingleTreeTrigger } from "./singletree.trigger";
+import { SingleTreePopup } from "./singletree.popup";
+
+@shortcut()
+export class SingleTreeCombo extends Widget {
+    static xtype = "bi.single_tree_combo";
+
+    static EVENT_CHANGE = "EVENT_CHANGE";
+    static EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
+
+    _defaultConfig(config) {
+        return extend(super._defaultConfig(...arguments), {
+            baseCls:
+                `bi-single-tree-combo ${
+                    config.simple
+                        ? "bi-border-bottom"
+                        : "bi-border bi-border-radius"}`,
             trigger: {},
             height: 24,
             text: "",
@@ -14,75 +37,79 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
             value: "",
             allowClear: false,
         });
-    },
+    }
 
-    _init: function () {
-        var self = this, o = this.options;
-        BI.SingleTreeCombo.superclass._init.apply(this, arguments);
+    _init() {
+        const self = this,
+            o = this.options;
+        super._init(...arguments);
 
-        this.trigger = BI.createWidget(BI.extend({
-            type: "bi.single_tree_trigger",
-            text: o.text,
-            defaultText: o.defaultText,
-            height: BI.toPix(o.height, 2),
-            items: o.items,
-            value: o.value,
-            allowClear: o.allowClear,
-            warningTitle: o.warningTitle,
-        }, o.trigger));
+        this.trigger = createWidget(
+            extend(
+                {
+                    type: SingleTreeTrigger.xtype,
+                    text: o.text,
+                    defaultText: o.defaultText,
+                    height: toPix(o.height, 2),
+                    items: o.items,
+                    value: o.value,
+                    allowClear: o.allowClear,
+                    warningTitle: o.warningTitle,
+                },
+                o.trigger
+            )
+        );
 
-        this.trigger.on(BI.SingleTreeTrigger.EVENT_CLEAR, function () {
+        this.trigger.on(SingleTreeTrigger.EVENT_CLEAR, () => {
             self._clear();
         });
 
-        this.popup = BI.createWidget({
-            type: "bi.single_level_tree",
+        this.popup = createWidget({
+            type: SingleTreePopup.xtype,
             items: o.items,
-            value: o.value
+            value: o.value,
         });
 
-        this.combo = BI.createWidget({
-            type: "bi.combo",
-            width: BI.toPix(o.width, 2),
-            height: BI.toPix(o.height, 2),
+        this.combo = createWidget({
+            type: Combo.xtype,
+            width: toPix(o.width, 2),
+            height: toPix(o.height, 2),
             container: o.container,
             element: this,
             adjustLength: 2,
             el: this.trigger,
             popup: {
-                el: this.popup
-            }
+                el: this.popup,
+            },
         });
 
-        this.combo.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.combo.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
-        this.combo.on(BI.Combo.EVENT_BEFORE_POPUPVIEW, function () {
-            self.fireEvent(BI.SingleTreeCombo.EVENT_BEFORE_POPUPVIEW, arguments);
+        this.combo.on(Combo.EVENT_BEFORE_POPUPVIEW, function () {
+            self.fireEvent(SingleTreeCombo.EVENT_BEFORE_POPUPVIEW, arguments);
         });
 
-        this.popup.on(BI.SingleTreePopup.EVENT_CHANGE, function () {
+        this.popup.on(SingleTreePopup.EVENT_CHANGE, () => {
             self.setValue(self.popup.getValue());
             self.combo.hideView();
-            self.fireEvent(BI.SingleTreeCombo.EVENT_CHANGE);
+            self.fireEvent(SingleTreeCombo.EVENT_CHANGE);
         });
 
-        if (BI.isKey(o.value)) {
+        if (isKey(o.value)) {
             this._checkError(o.value);
         }
-    },
+    }
 
-    _checkError: function (v) {
-        if (BI.isNull(v) || BI.isEmptyArray(v) || BI.isEmptyString(v)) {
+    _checkError(v) {
+        if (isNull(v) || isEmptyArray(v) || isEmptyString(v)) {
             this.trigger.options.tipType = "success";
             this.trigger.element.removeClass("error");
             this.element.removeClass("error");
         } else {
-            v = BI.isArray(v) ? v : [v];
-            var result = BI.find(this.options.items, function (idx, item) {
-                return BI.contains(v, item.value);
-            });
-            if (BI.isNull(result)) {
+            v = isArray(v) ? v : [v];
+            const result = find(this.options.items, (idx, item) => contains(v, item.value));
+            if (isNull(result)) {
                 this.trigger.setTipType("warning");
                 this.element.removeClass("error").addClass("error");
                 this.trigger.element.removeClass("error").addClass("error");
@@ -92,28 +119,24 @@ BI.SingleTreeCombo = BI.inherit(BI.Widget, {
                 this.element.removeClass("error");
             }
         }
-    },
+    }
 
-    _clear: function () {
+    _clear() {
         this.setValue([]);
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.combo.populate(items);
-    },
+    }
 
-    setValue: function (v) {
-        v = BI.isArray(v) ? v : [v];
+    setValue(v) {
+        v = isArray(v) ? v : [v];
         this.trigger.setValue(v);
         this.popup.setValue(v);
         this._checkError(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.popup.getValue();
     }
-});
-
-BI.SingleTreeCombo.EVENT_CHANGE = "EVENT_CHANGE";
-BI.SingleTreeCombo.EVENT_BEFORE_POPUPVIEW = "EVENT_BEFORE_POPUPVIEW";
-BI.shortcut("bi.single_tree_combo", BI.SingleTreeCombo);
+}

src/widget/singletree/singletree.popup.js

@@ -1,66 +1,74 @@
-/**
- * @class BI.SingleTreePopup
- * @extends BI.Pane
- */
+import {
+    shortcut,
+    extend,
+    i18nText,
+    createWidget,
+    Controller,
+    isArray, VerticalLayout
+} from "@/core";
+import { Pane } from "@/base";
+import { LevelTree } from "@/case";
 
-BI.SingleTreePopup = BI.inherit(BI.Pane, {
+@shortcut()
+export class SingleTreePopup extends Pane {
+    static xtype = "bi.single_level_tree";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.SingleTreePopup.superclass._defaultConfig.apply(this, arguments), {
+    static EVENT_CHANGE = "EVENT_CHANGE";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-single-level-tree",
-            tipText: BI.i18nText("BI-No_Selected_Item"),
+            tipText: i18nText("BI-No_Selected_Item"),
             items: [],
-            value: ""
+            value: "",
         });
-    },
+    }
 
-    _init: function () {
-        BI.SingleTreePopup.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, o = this.options;
-        
-        this.tree = BI.createWidget({
+        const self = this,
+            o = this.options;
+
+        this.tree = createWidget({
             type: "bi.level_tree",
             expander: {
-                isDefaultInit: true
+                isDefaultInit: true,
             },
             items: o.items,
             value: o.value,
-            chooseType: BI.Selection.Single
+            chooseType: Selection.Single,
         });
 
-        BI.createWidget({
-            type: "bi.vertical",
+        createWidget({
+            type: VerticalLayout.xtype,
             element: this,
             vgap: 5,
-            items: [this.tree]
+            items: [this.tree],
         });
 
-        this.tree.on(BI.Controller.EVENT_CHANGE, function () {
-            self.fireEvent(BI.Controller.EVENT_CHANGE, arguments);
+        this.tree.on(Controller.EVENT_CHANGE, function () {
+            self.fireEvent(Controller.EVENT_CHANGE, arguments);
         });
 
-        this.tree.on(BI.LevelTree.EVENT_CHANGE, function () {
-            self.fireEvent(BI.SingleTreePopup.EVENT_CHANGE);
+        this.tree.on(LevelTree.EVENT_CHANGE, () => {
+            self.fireEvent(SingleTreePopup.EVENT_CHANGE);
         });
 
         this.check();
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.tree.getValue();
-    },
+    }
 
-    setValue: function (v) {
-        v = BI.isArray(v) ? v : [v];
+    setValue(v) {
+        v = isArray(v) ? v : [v];
         this.tree.setValue(v);
-    },
+    }
 
-    populate: function (items) {
-        BI.SingleTreePopup.superclass.populate.apply(this, arguments);
+    populate(items) {
+        super.populate(...arguments);
         this.tree.populate(items);
     }
-});
-
-BI.SingleTreePopup.EVENT_CHANGE = "EVENT_CHANGE";
-BI.shortcut("bi.single_level_tree", BI.SingleTreePopup);
+}

src/widget/singletree/singletree.trigger.js

@@ -1,29 +1,41 @@
-/**
- * @class BI.SingleTreeTrigger
- * @extends BI.Trigger
- */
+import {
+    shortcut,
+    extend,
+    emptyFn,
+    createWidget,
+    contains,
+    isArray,
+    some
+} from "@/core";
+import { Trigger } from "@/base";
+import { SelectTextTrigger } from "@/case";
 
-BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
+@shortcut()
+export class SingleTreeTrigger extends Trigger {
+    static xtype = "bi.single_tree_trigger";
 
-    _defaultConfig: function () {
-        return BI.extend(BI.SingleTreeTrigger.superclass._defaultConfig.apply(this, arguments), {
+    static EVENT_CLEAR = "EVENT_CLEAR";
+
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
             baseCls: "bi-single-tree-trigger",
             height: 24,
             text: "",
             items: [],
             value: "",
             allowClear: false,
-            valueFormatter: BI.emptyFn,
+            valueFormatter: emptyFn,
         });
-    },
+    }
 
-    _init: function () {
-        BI.SingleTreeTrigger.superclass._init.apply(this, arguments);
+    _init() {
+        super._init(...arguments);
 
-        var self = this, o = this.options;
+        const self = this,
+            o = this.options;
 
-        this.trigger = BI.createWidget({
-            type: "bi.select_text_trigger",
+        this.trigger = createWidget({
+            type: SelectTextTrigger.xtype,
             element: this,
             text: o.text,
             defaultText: o.defaultText,
@@ -36,50 +48,47 @@ BI.SingleTreeTrigger = BI.inherit(BI.Trigger, {
             valueFormatter: o.valueFormatter,
             listeners: [
                 {
-                    eventName: BI.SelectTextTrigger.EVENT_CLEAR,
-                    action: function () {
-                        self.fireEvent(BI.SingleTreeTrigger.EVENT_CLEAR);
-                    }
+                    eventName: SelectTextTrigger.EVENT_CLEAR,
+                    action() {
+                        self.fireEvent(SingleTreeTrigger.EVENT_CLEAR);
+                    },
                 }
-            ]
+            ],
         });
-    },
+    }
+
+    _checkTitle() {
+        const val = this.getValue();
+        some(this.options.items, (i, item) => {
+            if (contains(val, item.value)) {
+                this.trigger.setTitle(item.text || item.value);
 
-    _checkTitle: function () {
-        var self = this, val = this.getValue();
-        BI.any(this.options.items, function (i, item) {
-            if (BI.contains(val, item.value)) {
-                self.trigger.setTitle(item.text || item.value);
                 return true;
             }
         });
-    },
+    }
 
-    setValue: function (v) {
-        v = BI.isArray(v) ? v : [v];
+    setValue(v) {
+        v = isArray(v) ? v : [v];
         this.options.value = v;
         this.trigger.setValue(v);
         this._checkTitle();
-    },
+    }
 
-    setTipType: function (v) {
+    setTipType(v) {
         this.options.tipType = v;
         this.trigger.setTipType(v);
-    },
+    }
 
-    getValue: function () {
+    getValue() {
         return this.options.value || [];
-    },
+    }
 
-    getTextor: function () {
+    getTextor() {
         return this.trigger.getTextor();
-    },
+    }
 
-    populate: function (items) {
+    populate(items) {
         this.trigger.populate(items);
     }
-
-});
-
-BI.SingleTreeTrigger.EVENT_CLEAR = "EVENT_CLEAR";
-BI.shortcut("bi.single_tree_trigger", BI.SingleTreeTrigger);
+}