forked from fanruan/fineui
Zhenfei.Li
2 years ago
32 changed files with 3098 additions and 2457 deletions
@ -1,113 +1,121 @@ |
|||||||
/** |
import { |
||||||
* |
shortcut, |
||||||
* @class BI.MultiSelectCheckPane |
Widget, |
||||||
* @extends BI.Widget |
extend, |
||||||
*/ |
emptyFn, |
||||||
BI.MultiSelectCheckPane = BI.inherit(BI.Widget, { |
createWidget, |
||||||
|
map, |
||||||
|
i18nText, |
||||||
|
VerticalAdaptLayout, VTapeLayout |
||||||
|
} from "@/core"; |
||||||
|
import { TextButton, Label } from "@/base"; |
||||||
|
import { DisplaySelectedList } from "./multiselect.display"; |
||||||
|
|
||||||
constants: { |
@shortcut() |
||||||
height: 12, |
export class MultiSelectCheckPane extends Widget { |
||||||
lgap: 10, |
static xtype = "bi.multi_select_check_pane"; |
||||||
tgap: 10, |
|
||||||
bgap: 5 |
constants = { height: 12, lgap: 10, tgap: 10, bgap: 5 }; |
||||||
}, |
|
||||||
|
|
||||||
_defaultConfig: function () { |
_defaultConfig() { |
||||||
return BI.extend(BI.MultiSelectCheckPane.superclass._defaultConfig.apply(this, arguments), { |
return extend(super._defaultConfig(...arguments), { |
||||||
baseCls: "bi-multi-select-check-pane bi-background", |
baseCls: "bi-multi-select-check-pane bi-background", |
||||||
items: [], |
items: [], |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
onClickContinueSelect: BI.emptyFn |
onClickContinueSelect: emptyFn, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectCheckPane.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
|
|
||||||
var self = this, opts = this.options; |
const self = this, |
||||||
|
opts = this.options; |
||||||
|
|
||||||
this.storeValue = opts.value || {}; |
this.storeValue = opts.value || {}; |
||||||
this.display = BI.createWidget({ |
this.display = createWidget({ |
||||||
type: "bi.display_selected_list", |
type: DisplaySelectedList.xtype, |
||||||
items: opts.items, |
items: opts.items, |
||||||
itemsCreator: function (op, callback) { |
itemsCreator(op, callback) { |
||||||
op = BI.extend(op || {}, { |
op = extend(op || {}, { |
||||||
selectedValues: self.storeValue.value |
selectedValues: self.storeValue.value, |
||||||
}); |
}); |
||||||
if (self.storeValue.type === BI.Selection.Multi) { |
if (self.storeValue.type === BI.Selection.Multi) { |
||||||
callback({ |
callback({ |
||||||
items: BI.map(self.storeValue.value, function (i, v) { |
items: map(self.storeValue.value, (i, v) => { |
||||||
var txt = opts.valueFormatter(v) || v; |
const txt = opts.valueFormatter(v) || v; |
||||||
|
|
||||||
return { |
return { |
||||||
text: txt, |
text: txt, |
||||||
value: v, |
value: v, |
||||||
title: txt |
title: txt, |
||||||
}; |
}; |
||||||
}) |
}), |
||||||
}); |
}); |
||||||
|
|
||||||
return; |
return; |
||||||
} |
} |
||||||
opts.itemsCreator(op, callback); |
opts.itemsCreator(op, callback); |
||||||
} |
}, |
||||||
}); |
}); |
||||||
|
|
||||||
this.continueSelect = BI.createWidget({ |
this.continueSelect = createWidget({ |
||||||
type: "bi.text_button", |
type: TextButton.xtype, |
||||||
title: BI.i18nText("BI-Continue_Select"), |
title: i18nText("BI-Continue_Select"), |
||||||
text: BI.i18nText("BI-Continue_Select"), |
text: i18nText("BI-Continue_Select"), |
||||||
cls: "multi-select-check-selected bi-high-light" |
cls: "multi-select-check-selected bi-high-light", |
||||||
}); |
}); |
||||||
|
|
||||||
this.continueSelect.on(BI.TextButton.EVENT_CHANGE, function () { |
this.continueSelect.on(TextButton.EVENT_CHANGE, () => { |
||||||
opts.onClickContinueSelect(); |
opts.onClickContinueSelect(); |
||||||
}); |
}); |
||||||
|
|
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.vtape", |
type: VTapeLayout.xtype, |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
height: this.constants.height, |
height: this.constants.height, |
||||||
el: { |
el: { |
||||||
type: "bi.vertical_adapt", |
type: VerticalAdaptLayout.xtype, |
||||||
columnSize: ["auto", "auto"], |
columnSize: ["auto", "auto"], |
||||||
cls: "multi-select-continue-select", |
cls: "multi-select-continue-select", |
||||||
items: [ |
items: [ |
||||||
{ |
{ |
||||||
el: { |
el: { |
||||||
type: "bi.label", |
type: Label.xtype, |
||||||
title: BI.i18nText("BI-Selected_Data"), |
title: i18nText("BI-Selected_Data"), |
||||||
text: BI.i18nText("BI-Selected_Data") |
text: i18nText("BI-Selected_Data"), |
||||||
}, |
}, |
||||||
lgap: this.constants.lgap |
lgap: this.constants.lgap, |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
el: this.continueSelect, |
el: this.continueSelect, |
||||||
hgap: this.constants.lgap |
hgap: this.constants.lgap, |
||||||
}] |
} |
||||||
|
], |
||||||
}, |
}, |
||||||
tgap: this.constants.tgap |
tgap: this.constants.tgap, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
height: "fill", |
height: "fill", |
||||||
el: this.display, |
el: this.display, |
||||||
tgap: this.constants.bgap |
tgap: this.constants.bgap, |
||||||
}] |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.storeValue = v || {}; |
this.storeValue = v || {}; |
||||||
}, |
} |
||||||
|
|
||||||
empty: function () { |
empty() { |
||||||
this.display.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); |
||||||
|
} |
||||||
|
} |
||||||
|
@ -1,106 +1,112 @@ |
|||||||
/** |
import { |
||||||
* |
shortcut, |
||||||
* |
extend, |
||||||
* 查看已选弹出层的展示面板 |
emptyFn, |
||||||
* @class BI.DisplaySelectedList |
createWidget, |
||||||
* @extends BI.Widget |
VerticalLayout, |
||||||
*/ |
createItems |
||||||
BI.DisplaySelectedList = BI.inherit(BI.Pane, { |
} from "@/core"; |
||||||
|
import { Pane, ButtonGroup, Loader, IconTextItem } from "@/base"; |
||||||
|
import { ListPane } from "@/case"; |
||||||
|
|
||||||
constants: { |
@shortcut() |
||||||
height: 24, |
export class DisplaySelectedList extends Pane { |
||||||
lgap: 10 |
static xtype = "bi.display_selected_list"; |
||||||
}, |
|
||||||
|
constants = { height: 24, lgap: 10 }; |
||||||
|
|
||||||
_defaultConfig: function () { |
_defaultConfig() { |
||||||
return BI.extend(BI.DisplaySelectedList.superclass._defaultConfig.apply(this, arguments), { |
return extend(super._defaultConfig(...arguments), { |
||||||
baseCls: "bi-display-list", |
baseCls: "bi-display-list", |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
items: [] |
items: [], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.DisplaySelectedList.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
|
|
||||||
var self = this, opts = this.options; |
const self = this, |
||||||
|
opts = this.options; |
||||||
|
|
||||||
this.hasNext = false; |
this.hasNext = false; |
||||||
var cacheItems = []; |
let cacheItems = []; |
||||||
|
|
||||||
this.button_group = BI.createWidget({ |
this.button_group = createWidget({ |
||||||
type: "bi.list_pane", |
type: ListPane.xtype, |
||||||
element: this, |
element: this, |
||||||
el: { |
el: { |
||||||
type: "bi.loader", |
type: Loader.xtype, |
||||||
isDefaultInit: false, |
isDefaultInit: false, |
||||||
logic: { |
logic: { |
||||||
dynamic: true, |
dynamic: true, |
||||||
scrolly: true |
scrolly: true, |
||||||
}, |
}, |
||||||
items: this._createItems(opts.items), |
items: this._createItems(opts.items), |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||||
layouts: [ |
layouts: [ |
||||||
{ |
{ |
||||||
type: "bi.vertical", |
type: VerticalLayout.xtype, |
||||||
lgap: 10 |
lgap: 10, |
||||||
} |
} |
||||||
] |
], |
||||||
}, |
}, |
||||||
itemsCreator: function (options, callback) { |
itemsCreator (options, callback) { |
||||||
if (options.times === 1) { |
if (options.times === 1) { |
||||||
cacheItems = []; |
cacheItems = []; |
||||||
} |
} |
||||||
|
|
||||||
if (cacheItems.length > 0) { |
if (cacheItems.length > 0) { |
||||||
var renderedItems = cacheItems.slice(0, 100); |
const renderedItems = cacheItems.slice(0, 100); |
||||||
cacheItems = cacheItems.slice(100); |
cacheItems = cacheItems.slice(100); |
||||||
self.hasNext = cacheItems.length > 0; |
self.hasNext = cacheItems.length > 0; |
||||||
callback(self._createItems(renderedItems)); |
callback(self._createItems(renderedItems)); |
||||||
|
|
||||||
return; |
return; |
||||||
} |
} |
||||||
|
|
||||||
opts.itemsCreator(options, function (ob) { |
opts.itemsCreator(options, ob => { |
||||||
self.hasNext = !!ob.hasNext; |
self.hasNext = !!ob.hasNext; |
||||||
var firstItemsCount = 100 + ob.items.length % 100; |
const firstItemsCount = 100 + (ob.items.length % 100); |
||||||
if (ob.items.length > 100) { |
if (ob.items.length > 100) { |
||||||
cacheItems = ob.items.slice(firstItemsCount); |
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; |
return self.hasNext; |
||||||
} |
|
||||||
}); |
|
||||||
}, |
}, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
_createItems: function (items) { |
_createItems(items) { |
||||||
return BI.createItems(items, { |
return createItems(items, { |
||||||
type: "bi.icon_text_item", |
type: IconTextItem.xtype, |
||||||
cls: "cursor-default check-font icon-size-12 display-list-item bi-tips", |
cls: "cursor-default check-font icon-size-12 display-list-item bi-tips", |
||||||
once: true, |
once: true, |
||||||
invalid: true, |
invalid: true, |
||||||
selected: true, |
selected: true, |
||||||
height: this.constants.height, |
height: this.constants.height, |
||||||
logic: { |
logic: { |
||||||
dynamic: true |
dynamic: true, |
||||||
} |
|
||||||
}); |
|
||||||
}, |
}, |
||||||
|
}); |
||||||
|
} |
||||||
|
|
||||||
empty: function () { |
empty() { |
||||||
this.button_group.empty(); |
this.button_group.empty(); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
if (arguments.length === 0) { |
if (arguments.length === 0) { |
||||||
this.button_group.populate(); |
this.button_group.populate(); |
||||||
} else { |
} else { |
||||||
this.button_group.populate(this._createItems(items)); |
this.button_group.populate(this._createItems(items)); |
||||||
} |
} |
||||||
} |
} |
||||||
}); |
} |
||||||
|
|
||||||
BI.shortcut("bi.display_selected_list", BI.DisplaySelectedList); |
|
||||||
|
@ -1,185 +1,242 @@ |
|||||||
/** |
import { |
||||||
* 多选加载数据面板 |
shortcut, |
||||||
* Created by guy on 15/11/2. |
Widget, |
||||||
* @class BI.MultiSelectNoBarLoader |
extend, |
||||||
* @extends Widget |
emptyFn, |
||||||
*/ |
createWidget, |
||||||
BI.MultiSelectNoBarLoader = BI.inherit(BI.Widget, { |
isKey, |
||||||
|
map, |
||||||
_defaultConfig: function () { |
contains, |
||||||
return BI.extend(BI.MultiSelectNoBarLoader.superclass._defaultConfig.apply(this, arguments), { |
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", |
baseCls: "bi-multi-select-loader", |
||||||
logic: { |
logic: { |
||||||
dynamic: true |
dynamic: true, |
||||||
}, |
}, |
||||||
el: { |
el: { |
||||||
height: 400 |
height: 400, |
||||||
}, |
}, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
onLoaded: BI.emptyFn, |
onLoaded: emptyFn, |
||||||
itemFormatter: BI.emptyFn, |
itemFormatter: emptyFn, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectNoBarLoader.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
|
|
||||||
var self = this, opts = this.options; |
const self = this, |
||||||
var hasNext = false; |
opts = this.options; |
||||||
|
let hasNext = false; |
||||||
|
|
||||||
this.storeValue = opts.value || {}; |
this.storeValue = opts.value || {}; |
||||||
this._assertValue(this.storeValue); |
this._assertValue(this.storeValue); |
||||||
|
|
||||||
this.button_group = BI.createWidget(BI.extend({ |
this.button_group = createWidget( |
||||||
type: "bi.list_pane", |
extend( |
||||||
|
{ |
||||||
|
type: ListPane.xtype, |
||||||
onLoaded: opts.onLoaded, |
onLoaded: opts.onLoaded, |
||||||
el: { |
el: { |
||||||
type: "bi.loader", |
type: Loader.xtype, |
||||||
isDefaultInit: false, |
isDefaultInit: false, |
||||||
logic: { |
logic: { |
||||||
dynamic: true, |
dynamic: true, |
||||||
scrolly: true |
scrolly: true, |
||||||
}, |
}, |
||||||
el: { |
el: { |
||||||
chooseType: BI.ButtonGroup.CHOOSE_TYPE_MULTI, |
chooseType: ButtonGroup.CHOOSE_TYPE_MULTI, |
||||||
behaviors: { |
behaviors: { |
||||||
redmark: function () { |
redmark() { |
||||||
return true; |
return true; |
||||||
} |
|
||||||
}, |
}, |
||||||
layouts: [{ |
|
||||||
type: "bi.vertical" |
|
||||||
}] |
|
||||||
} |
|
||||||
}, |
}, |
||||||
itemsCreator: function (op, callback) { |
layouts: [ |
||||||
var startValue = self._startValue; |
{ |
||||||
self.storeValue && (op = BI.extend(op || {}, { |
type: VerticalLayout.xtype, |
||||||
selectedValues: BI.isKey(startValue) && self.storeValue.type === BI.Selection.Multi |
} |
||||||
? self.storeValue.value.concat(startValue) : self.storeValue.value |
], |
||||||
|
}, |
||||||
|
}, |
||||||
|
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; |
hasNext = ob.hasNext; |
||||||
var firstItems = []; |
let firstItems = []; |
||||||
if (op.times === 1 && self.storeValue) { |
if (op.times === 1 && self.storeValue) { |
||||||
var json = BI.map(self.storeValue.value, function (i, v) { |
const json = map( |
||||||
var txt = opts.valueFormatter(v) || v; |
self.storeValue.value, |
||||||
|
(i, v) => { |
||||||
|
const txt = opts.valueFormatter(v) || v; |
||||||
|
|
||||||
return { |
return { |
||||||
text: txt, |
text: txt, |
||||||
value: v, |
value: v, |
||||||
title: txt, |
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({ |
json.unshift({ |
||||||
text: txt, |
text: txt, |
||||||
value: startValue, |
value: startValue, |
||||||
title: txt, |
title: txt, |
||||||
selected: true |
selected: true, |
||||||
}); |
}); |
||||||
} |
} |
||||||
firstItems = self._createItems(json); |
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) { |
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); |
self.setValue(self.storeValue); |
||||||
} |
} |
||||||
(op.times === 1) && self._scrollToTop(); |
op.times === 1 && self._scrollToTop(); |
||||||
}); |
}); |
||||||
}, |
}, |
||||||
hasNext: function () { |
hasNext() { |
||||||
return hasNext; |
return hasNext; |
||||||
}, |
}, |
||||||
value: this.storeValue |
value: this.storeValue, |
||||||
}, opts.el)); |
}, |
||||||
|
opts.el |
||||||
|
) |
||||||
|
); |
||||||
|
|
||||||
BI.createWidget({ |
createWidget({ |
||||||
type: "bi.vertical", |
type: VerticalLayout.xtype, |
||||||
element: this, |
element: this, |
||||||
items: [this.button_group], |
items: [this.button_group], |
||||||
vgap: 5 |
vgap: 5, |
||||||
}); |
}); |
||||||
|
|
||||||
this.button_group.on(BI.Controller.EVENT_CHANGE, function () { |
this.button_group.on(Controller.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
this.button_group.on(BI.SelectList.EVENT_CHANGE, function () { |
this.button_group.on(SelectList.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.MultiSelectNoBarLoader.EVENT_CHANGE, arguments); |
self.fireEvent(MultiSelectNoBarLoader.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_createItems: function (items) { |
_createItems(items) { |
||||||
return BI.map(items, (index, item) => { |
return map(items, (index, item) => { |
||||||
return { |
return { |
||||||
type: "bi.multi_select_item", |
type: MultiSelectItem.xtype, |
||||||
cls: "bi-list-item-active", |
cls: "bi-list-item-active", |
||||||
logic: this.options.logic, |
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, |
iconWrapperWidth: 36, |
||||||
...item, |
...item, |
||||||
...this.options.itemFormatter(item), |
...this.options.itemFormatter(item), |
||||||
}; |
}; |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_scrollToTop: function () { |
_scrollToTop() { |
||||||
var self = this; |
const self = this; |
||||||
BI.delay(function () { |
delay(() => { |
||||||
self.button_group.element.scrollTop(0); |
self.button_group.element.scrollTop(0); |
||||||
}, 30); |
}, 30); |
||||||
}, |
} |
||||||
|
|
||||||
_assertValue: function (val) { |
_assertValue(val) { |
||||||
val || (val = {}); |
val || (val = {}); |
||||||
val.type || (val.type = BI.Selection.Multi); |
val.type || (val.type = Selection.Multi); |
||||||
val.value || (val.value = []); |
val.value || (val.value = []); |
||||||
}, |
} |
||||||
|
|
||||||
setStartValue: function (v) { |
setStartValue(v) { |
||||||
this._startValue = v; |
this._startValue = v; |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.storeValue = v || {}; |
this.storeValue = v || {}; |
||||||
this._assertValue(this.storeValue); |
this._assertValue(this.storeValue); |
||||||
this.button_group.setValue(this.storeValue.value); |
this.button_group.setValue(this.storeValue.value); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return { |
return { |
||||||
type: BI.Selection.Multi, |
type: Selection.Multi, |
||||||
value: this.button_group.getValue() |
value: this.button_group.getValue(), |
||||||
}; |
}; |
||||||
}, |
} |
||||||
|
|
||||||
getAllButtons: function () { |
getAllButtons() { |
||||||
return this.button_group.getAllButtons(); |
return this.button_group.getAllButtons(); |
||||||
}, |
} |
||||||
|
|
||||||
empty: function () { |
empty() { |
||||||
this.button_group.empty(); |
this.button_group.empty(); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
if (BI.isNotNull(items)) { |
if (isNotNull(items)) { |
||||||
arguments[0] = this._createItems(items); |
arguments[0] = this._createItems(items); |
||||||
} |
} |
||||||
this.button_group.populate.apply(this.button_group, arguments); |
this.button_group.populate(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
resetHeight: function (h) { |
|
||||||
this.button_group.element.css({ "max-height": BI.toPix(h) }); |
|
||||||
}, |
|
||||||
|
|
||||||
resetWidth: function () { |
|
||||||
|
|
||||||
|
resetHeight(h) { |
||||||
|
this.button_group.element.css({ "max-height": toPix(h) }); |
||||||
} |
} |
||||||
}); |
|
||||||
|
|
||||||
BI.MultiSelectNoBarLoader.EVENT_CHANGE = "EVENT_CHANGE"; |
resetWidth() { |
||||||
BI.shortcut("bi.multi_select_no_bar_loader", BI.MultiSelectNoBarLoader); |
} |
||||||
|
} |
||||||
|
@ -1,100 +1,113 @@ |
|||||||
/** |
import { |
||||||
* 带加载的多选下拉面板 |
shortcut, |
||||||
* @class BI.MultiSelectPopupView |
Widget, |
||||||
* @extends Widget |
extend, |
||||||
*/ |
emptyFn, |
||||||
BI.MultiSelectPopupView = BI.inherit(BI.Widget, { |
createWidget, |
||||||
|
i18nText |
||||||
_defaultConfig: function () { |
} from "@/core"; |
||||||
return BI.extend(BI.MultiSelectPopupView.superclass._defaultConfig.apply(this, arguments), { |
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", |
baseCls: "bi-multi-select-popup-view", |
||||||
maxWidth: "auto", |
maxWidth: "auto", |
||||||
minWidth: 135, |
minWidth: 135, |
||||||
maxHeight: 400, |
maxHeight: 400, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
onLoaded: BI.emptyFn, |
onLoaded: emptyFn, |
||||||
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectPopupView.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
var self = this, opts = this.options; |
const self = this, |
||||||
|
opts = this.options; |
||||||
|
|
||||||
this.loader = BI.createWidget({ |
this.loader = createWidget({ |
||||||
type: "bi.multi_select_loader", |
type: MultiSelectLoader.xtype, |
||||||
itemsCreator: opts.itemsCreator, |
itemsCreator: opts.itemsCreator, |
||||||
itemHeight: opts.itemHeight, |
itemHeight: opts.itemHeight, |
||||||
valueFormatter: opts.valueFormatter, |
valueFormatter: opts.valueFormatter, |
||||||
itemFormatter: opts.itemFormatter, |
itemFormatter: opts.itemFormatter, |
||||||
onLoaded: opts.onLoaded, |
onLoaded: opts.onLoaded, |
||||||
value: opts.value |
value: opts.value, |
||||||
}); |
}); |
||||||
|
|
||||||
this.popupView = BI.createWidget({ |
this.popupView = createWidget({ |
||||||
type: "bi.multi_popup_view", |
type: MultiPopupView.xtype, |
||||||
stopPropagation: false, |
stopPropagation: false, |
||||||
maxWidth: opts.maxWidth, |
maxWidth: opts.maxWidth, |
||||||
minWidth: opts.minWidth, |
minWidth: opts.minWidth, |
||||||
maxHeight: opts.maxHeight, |
maxHeight: opts.maxHeight, |
||||||
element: this, |
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, |
el: this.loader, |
||||||
value: opts.value |
value: opts.value, |
||||||
}); |
}); |
||||||
|
|
||||||
this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { |
this.popupView.on(MultiPopupView.EVENT_CHANGE, () => { |
||||||
self.fireEvent(BI.MultiSelectPopupView.EVENT_CHANGE); |
self.fireEvent(MultiSelectPopupView.EVENT_CHANGE); |
||||||
}); |
}); |
||||||
this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { |
this.popupView.on( |
||||||
|
MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, |
||||||
|
index => { |
||||||
switch (index) { |
switch (index) { |
||||||
case 0: |
case 0: |
||||||
self.fireEvent(BI.MultiSelectPopupView.EVENT_CLICK_CLEAR); |
self.fireEvent(MultiSelectPopupView.EVENT_CLICK_CLEAR); |
||||||
break; |
break; |
||||||
case 1: |
case 1: |
||||||
self.fireEvent(BI.MultiSelectPopupView.EVENT_CLICK_CONFIRM); |
self.fireEvent( |
||||||
|
MultiSelectPopupView.EVENT_CLICK_CONFIRM |
||||||
|
); |
||||||
|
break; |
||||||
|
default: |
||||||
break; |
break; |
||||||
} |
} |
||||||
}); |
} |
||||||
}, |
); |
||||||
|
} |
||||||
|
|
||||||
isAllSelected: function () { |
isAllSelected() { |
||||||
return this.loader.isAllSelected(); |
return this.loader.isAllSelected(); |
||||||
}, |
} |
||||||
|
|
||||||
setStartValue: function (v) { |
setStartValue(v) { |
||||||
this.loader.setStartValue(v); |
this.loader.setStartValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.popupView.setValue(v); |
this.popupView.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.popupView.getValue(); |
return this.popupView.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.popupView.populate.apply(this.popupView, arguments); |
this.popupView.populate(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
resetHeight: function (h) { |
resetHeight(h) { |
||||||
this.popupView.resetHeight(h); |
this.popupView.resetHeight(h); |
||||||
}, |
} |
||||||
|
|
||||||
resetWidth: function (w) { |
resetWidth(w) { |
||||||
this.popupView.resetWidth(w); |
this.popupView.resetWidth(w); |
||||||
}, |
} |
||||||
|
|
||||||
setDirection: function (direction, position) { |
setDirection(direction, position) { |
||||||
this.popupView.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); |
|
||||||
|
@ -1,96 +1,109 @@ |
|||||||
/** |
import { |
||||||
* 带加载的多选下拉面板 |
shortcut, |
||||||
* @class BI.MultiSelectPopupView |
Widget, |
||||||
* @extends Widget |
extend, |
||||||
*/ |
emptyFn, |
||||||
BI.MultiSelectNoBarPopupView = BI.inherit(BI.Widget, { |
createWidget, |
||||||
|
i18nText |
||||||
|
} from "@/core"; |
||||||
|
import { MultiPopupView } from "@/case"; |
||||||
|
import { MultiSelectNoBarLoader } from "./multiselect.loader.nobar"; |
||||||
|
|
||||||
_defaultConfig: function () { |
@shortcut() |
||||||
return BI.extend(BI.MultiSelectNoBarPopupView.superclass._defaultConfig.apply(this, arguments), { |
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", |
baseCls: "bi-multi-select-popup-view", |
||||||
maxWidth: "auto", |
maxWidth: "auto", |
||||||
minWidth: 135, |
minWidth: 135, |
||||||
maxHeight: 400, |
maxHeight: 400, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
itemHeight: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
onLoaded: BI.emptyFn |
onLoaded: emptyFn, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectNoBarPopupView.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
var self = this, opts = this.options; |
const self = this, |
||||||
|
opts = this.options; |
||||||
|
|
||||||
this.loader = BI.createWidget({ |
this.loader = createWidget({ |
||||||
type: "bi.multi_select_no_bar_loader", |
type: MultiSelectNoBarLoader.xtype, |
||||||
itemsCreator: opts.itemsCreator, |
itemsCreator: opts.itemsCreator, |
||||||
itemHeight: opts.itemHeight, |
itemHeight: opts.itemHeight, |
||||||
valueFormatter: opts.valueFormatter, |
valueFormatter: opts.valueFormatter, |
||||||
itemFormatter: opts.itemFormatter, |
itemFormatter: opts.itemFormatter, |
||||||
onLoaded: opts.onLoaded, |
onLoaded: opts.onLoaded, |
||||||
value: opts.value |
value: opts.value, |
||||||
}); |
}); |
||||||
|
|
||||||
this.popupView = BI.createWidget({ |
this.popupView = createWidget({ |
||||||
type: "bi.multi_popup_view", |
type: MultiPopupView.xtype, |
||||||
stopPropagation: false, |
stopPropagation: false, |
||||||
maxWidth: opts.maxWidth, |
maxWidth: opts.maxWidth, |
||||||
minWidth: opts.minWidth, |
minWidth: opts.minWidth, |
||||||
maxHeight: opts.maxHeight, |
maxHeight: opts.maxHeight, |
||||||
element: this, |
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, |
el: this.loader, |
||||||
value: opts.value |
value: opts.value, |
||||||
}); |
}); |
||||||
|
|
||||||
this.popupView.on(BI.MultiPopupView.EVENT_CHANGE, function () { |
this.popupView.on(MultiPopupView.EVENT_CHANGE, () => { |
||||||
self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CHANGE); |
self.fireEvent(MultiSelectNoBarPopupView.EVENT_CHANGE); |
||||||
}); |
}); |
||||||
this.popupView.on(BI.MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, function (index) { |
this.popupView.on( |
||||||
|
MultiPopupView.EVENT_CLICK_TOOLBAR_BUTTON, |
||||||
|
index => { |
||||||
switch (index) { |
switch (index) { |
||||||
case 0: |
case 0: |
||||||
self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR); |
self.fireEvent( |
||||||
|
MultiSelectNoBarPopupView.EVENT_CLICK_CLEAR |
||||||
|
); |
||||||
break; |
break; |
||||||
case 1: |
case 1: |
||||||
self.fireEvent(BI.MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM); |
self.fireEvent( |
||||||
|
MultiSelectNoBarPopupView.EVENT_CLICK_CONFIRM |
||||||
|
); |
||||||
break; |
break; |
||||||
} |
} |
||||||
}); |
} |
||||||
}, |
); |
||||||
|
} |
||||||
|
|
||||||
setStartValue: function (v) { |
setStartValue(v) { |
||||||
this.loader.setStartValue(v); |
this.loader.setStartValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.popupView.setValue(v); |
this.popupView.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.popupView.getValue(); |
return this.popupView.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
populate: function (items) { |
populate(items) { |
||||||
this.popupView.populate.apply(this.popupView, arguments); |
this.popupView.populate(...arguments); |
||||||
}, |
} |
||||||
|
|
||||||
resetHeight: function (h) { |
resetHeight(h) { |
||||||
this.popupView.resetHeight(h); |
this.popupView.resetHeight(h); |
||||||
}, |
} |
||||||
|
|
||||||
resetWidth: function (w) { |
resetWidth(w) { |
||||||
this.popupView.resetWidth(w); |
this.popupView.resetWidth(w); |
||||||
}, |
} |
||||||
|
|
||||||
setDirection: function (direction, position) { |
setDirection(direction, position) { |
||||||
this.popupView.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); |
|
||||||
|
@ -1,99 +1,109 @@ |
|||||||
/** |
import { |
||||||
* |
shortcut, |
||||||
* 在搜索框中输入文本弹出的面板 |
Widget, |
||||||
* @class BI.MultiSelectSearchInsertPane |
extend, |
||||||
* @extends Widget |
emptyFn, |
||||||
*/ |
createWidget, |
||||||
|
i18nText, |
||||||
BI.MultiSelectSearchInsertPane = BI.inherit(BI.Widget, { |
Controller, VerticalFillLayout |
||||||
|
} from "@/core"; |
||||||
constants: { |
import { Label } from "@/base"; |
||||||
height: 24, |
import { MultiSelectSearchLoader } from "./multiselect.search.loader"; |
||||||
lgap: 10, |
|
||||||
tgap: 5 |
@shortcut() |
||||||
}, |
export class MultiSelectSearchInsertPane extends Widget { |
||||||
|
static xtype = "bi.multi_select_search_insert_pane"; |
||||||
_defaultConfig: function () { |
|
||||||
return BI.extend(BI.MultiSelectSearchInsertPane.superclass._defaultConfig.apply(this, arguments), { |
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", |
baseCls: "bi-multi-select-search-pane bi-card", |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
keywordGetter: BI.emptyFn, |
keywordGetter: emptyFn, |
||||||
itemHeight: 24 |
itemHeight: 24, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectSearchInsertPane.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
var self = this, o = this.options; |
const self = this, |
||||||
|
o = this.options; |
||||||
|
|
||||||
this.addNotMatchTip = BI.createWidget({ |
this.addNotMatchTip = createWidget({ |
||||||
type: "bi.label", |
type: Label.xtype, |
||||||
text: BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", ""), |
text: i18nText("BI-Basic_Press_Enter_To_Add_Text", ""), |
||||||
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
height: BI.SIZE_CONSANTS.LIST_ITEM_HEIGHT, |
||||||
cls: "bi-keyword-red-mark", |
cls: "bi-keyword-red-mark", |
||||||
hgap: 5, |
hgap: 5, |
||||||
}); |
}); |
||||||
|
|
||||||
this.loader = BI.createWidget({ |
this.loader = createWidget({ |
||||||
type: "bi.multi_select_search_loader", |
type: MultiSelectSearchLoader.xtype, |
||||||
keywordGetter: o.keywordGetter, |
keywordGetter: o.keywordGetter, |
||||||
valueFormatter: o.valueFormatter, |
valueFormatter: o.valueFormatter, |
||||||
itemFormatter: o.itemFormatter, |
itemFormatter: o.itemFormatter, |
||||||
itemsCreator: function (op, callback) { |
itemsCreator(op, callback) { |
||||||
o.itemsCreator.apply(self, [op, function (res) { |
o.itemsCreator.apply(self, [ |
||||||
|
op, |
||||||
|
function (res) { |
||||||
callback(res); |
callback(res); |
||||||
self.setKeyword(o.keywordGetter()); |
self.setKeyword(o.keywordGetter()); |
||||||
}]); |
} |
||||||
|
]); |
||||||
}, |
}, |
||||||
itemHeight: o.itemHeight, |
itemHeight: o.itemHeight, |
||||||
value: o.value |
value: o.value, |
||||||
}); |
}); |
||||||
this.loader.on(BI.Controller.EVENT_CHANGE, function () { |
this.loader.on(Controller.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
|
|
||||||
this.resizer = BI.createWidget({ |
this.resizer = createWidget({ |
||||||
type: "bi.vertical_fill", |
type: VerticalFillLayout.xtype, |
||||||
rowSize: ["", "fill"], |
rowSize: ["", "fill"], |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: this.addNotMatchTip, |
el: this.addNotMatchTip, |
||||||
}, { |
}, |
||||||
|
{ |
||||||
el: this.loader, |
el: this.loader, |
||||||
}], |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
setKeyword: function (keyword) { |
setKeyword(keyword) { |
||||||
this.addNotMatchTip.setText(BI.i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword)); |
this.addNotMatchTip.setText( |
||||||
}, |
i18nText("BI-Basic_Press_Enter_To_Add_Text", keyword) |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
isAllSelected: function () { |
isAllSelected() { |
||||||
return this.loader.isAllSelected(); |
return this.loader.isAllSelected(); |
||||||
}, |
} |
||||||
|
|
||||||
hasMatched: function () { |
hasMatched() { |
||||||
return false; |
return false; |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.loader.setValue(v); |
this.loader.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.loader.getValue(); |
return this.loader.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
empty: function () { |
empty() { |
||||||
this.loader.empty(); |
this.loader.empty(); |
||||||
}, |
|
||||||
|
|
||||||
populate: function (items) { |
|
||||||
this.loader.populate.apply(this.loader, arguments); |
|
||||||
} |
} |
||||||
}); |
|
||||||
|
|
||||||
BI.MultiSelectSearchInsertPane.EVENT_CHANGE = "EVENT_CHANGE"; |
populate(items) { |
||||||
|
this.loader.populate(...arguments); |
||||||
BI.shortcut("bi.multi_select_search_insert_pane", BI.MultiSelectSearchInsertPane); |
} |
||||||
|
} |
||||||
|
@ -1,86 +1,92 @@ |
|||||||
/** |
import { |
||||||
* |
shortcut, |
||||||
* 在搜索框中输入文本弹出的面板 |
Widget, |
||||||
* @class BI.MultiSelectSearchPane |
extend, |
||||||
* @extends Widget |
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: { |
constants = { height: 24, lgap: 10, tgap: 5 }; |
||||||
height: 24, |
|
||||||
lgap: 10, |
static EVENT_CHANGE = "EVENT_CHANGE"; |
||||||
tgap: 5 |
|
||||||
}, |
|
||||||
|
|
||||||
_defaultConfig: function () { |
_defaultConfig() { |
||||||
return BI.extend(BI.MultiSelectSearchPane.superclass._defaultConfig.apply(this, arguments), { |
return extend(super._defaultConfig(...arguments), { |
||||||
baseCls: "bi-multi-select-search-pane bi-card", |
baseCls: "bi-multi-select-search-pane bi-card", |
||||||
itemsCreator: BI.emptyFn, |
itemsCreator: emptyFn, |
||||||
valueFormatter: BI.emptyFn, |
valueFormatter: emptyFn, |
||||||
keywordGetter: BI.emptyFn, |
keywordGetter: emptyFn, |
||||||
itemHeight: 24, |
itemHeight: 24, |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
_init: function () { |
_init() { |
||||||
BI.MultiSelectSearchPane.superclass._init.apply(this, arguments); |
super._init(...arguments); |
||||||
var self = this, o = this.options; |
const self = this, |
||||||
|
o = this.options; |
||||||
|
|
||||||
this.loader = BI.createWidget({ |
this.loader = createWidget({ |
||||||
type: "bi.multi_select_search_loader", |
type: MultiSelectSearchLoader.xtype, |
||||||
keywordGetter: o.keywordGetter, |
keywordGetter: o.keywordGetter, |
||||||
valueFormatter: o.valueFormatter, |
valueFormatter: o.valueFormatter, |
||||||
itemFormatter: o.itemFormatter, |
itemFormatter: o.itemFormatter, |
||||||
itemsCreator: function (op, callback) { |
itemsCreator(op, callback) { |
||||||
o.itemsCreator.apply(self, [op, function (res) { |
o.itemsCreator.apply(self, [ |
||||||
|
op, |
||||||
|
function (res) { |
||||||
callback(res); |
callback(res); |
||||||
}]); |
} |
||||||
|
]); |
||||||
}, |
}, |
||||||
itemHeight: o.itemHeight, |
itemHeight: o.itemHeight, |
||||||
value: o.value |
value: o.value, |
||||||
}); |
}); |
||||||
this.loader.on(BI.Controller.EVENT_CHANGE, function () { |
this.loader.on(Controller.EVENT_CHANGE, function () { |
||||||
self.fireEvent(BI.Controller.EVENT_CHANGE, arguments); |
self.fireEvent(Controller.EVENT_CHANGE, arguments); |
||||||
}); |
}); |
||||||
|
|
||||||
this.resizer = BI.createWidget({ |
this.resizer = createWidget({ |
||||||
type: "bi.absolute", |
type: AbsoluteLayout.xtype, |
||||||
element: this, |
element: this, |
||||||
items: [{ |
items: [ |
||||||
|
{ |
||||||
el: this.loader, |
el: this.loader, |
||||||
left: 0, |
left: 0, |
||||||
right: 0, |
right: 0, |
||||||
bottom: 0, |
bottom: 0, |
||||||
top: 0, |
top: 0, |
||||||
}], |
} |
||||||
|
], |
||||||
}); |
}); |
||||||
}, |
} |
||||||
|
|
||||||
isAllSelected: function () { |
isAllSelected() { |
||||||
return this.loader.isAllSelected(); |
return this.loader.isAllSelected(); |
||||||
}, |
} |
||||||
|
|
||||||
hasMatched: function () { |
hasMatched() { |
||||||
}, |
} |
||||||
|
|
||||||
setValue: function (v) { |
setValue(v) { |
||||||
this.loader.setValue(v); |
this.loader.setValue(v); |
||||||
}, |
} |
||||||
|
|
||||||
getValue: function () { |
getValue() { |
||||||
return this.loader.getValue(); |
return this.loader.getValue(); |
||||||
}, |
} |
||||||
|
|
||||||
empty: function () { |
empty() { |
||||||
this.loader.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); |
||||||
|
} |
||||||
|
} |
||||||
|
Loading…
Reference in new issue