combogridmulti 组件

src/Defaults.ts

@@ -45,6 +45,25 @@ export const comboGridPicker = {
     },
 }
 
+export const comboGridMulti = {
+    selectOnTab: true,
+    pickerHeight: 500,
+    pickerWidth: 850,
+    editEnable: null,
+    splitChar: ',',
+    displayField: 'text',
+    valueField: 'id',
+    autoLoad: true,
+}
+
+export const comboGridMultiPicker = {
+    selType: 'checkboxmodel',
+    selModel: {
+        type: 'checkboxmodel',
+        checkOnly: false
+    },
+}
+
 export const numberfield = {
     labelAlign: 'right',
     labelWidth,

src/controls/input/combogridmulti.js

@@ -0,0 +1,228 @@
+import _ from 'lodash'
+import {comboGridMulti, comboGridMultiPicker} from '../../Defaults'
+import {msg} from "../../message";
+import {dataSourceReload} from "../../DataSourceHelper";
+
+export default function () {
+
+    Ext.define('Yvan.LocalComboGrid', {
+        extend: 'Ext.form.field.Picker',
+        // extend: 'Yvan.PickerAlignCenter',
+        xtype: 'combogridmulti',
+
+        triggerCls: Ext.baseCSSPrefix + 'form-arrow-trigger',
+
+        config: {
+            ...comboGridMulti,
+            store: null,
+            displayField: null,
+            columns: null,
+            selectOnTab: true,
+            maxPickerHeight: 300,
+            minPickerHeight: 100,
+            minPickerWidth: 350,
+            rootVisible: true,
+        },
+
+        editable: false,
+
+        initComponent() {
+            this.on({
+                afterrender() {
+                    const {config} = this
+
+                    if (config.dataSource && config.autoLoad) {
+                        dataSourceReload(this)
+                    }
+                },
+            })
+
+            this.superclass.initComponent.apply(this, arguments)
+        },
+
+        setStore(store) {
+            this.store = store
+            const me = this;
+            if (me.store) {
+                if (me.picker) {
+                    me.picker.setStore(store)
+                    if (me.isExpanded) {
+                        me.collapse()
+                        delete me.picker
+                        me.expand()
+                    }
+                }
+                this.onLoad()
+                me.mon(me.store, {
+                    scope: me,
+                    load: me.onLoad,
+                    update: me.onUpdate
+                });
+            }
+        },
+
+        reload() {
+            dataSourceReload(this)
+        },
+
+        setData(value) {
+            const me = this
+            const {config} = me
+            if (!value) {
+                return
+            }
+
+            if (!this.store) {
+                this.store = new Ext.data.Store({
+                    fields: [config.valueField, config.displayField],
+                    data: value
+                })
+            } else {
+                this.store.getProxy().setData(value)
+                this.store.load()
+            }
+
+            this.onLoad()
+        },
+
+        createPicker() {
+            const me = this
+            const picker = new Ext.grid.Panel({
+                    ...comboGridMultiPicker,
+                    border: false,
+                    baseCls: Ext.baseCSSPrefix + 'boundlist',
+                    shrinkWrapDock: 2,
+                    store: me.store,
+                    floating: true,
+                    displayField: me.displayField,
+                    columns: me.columns,
+                    minHeight: me.minPickerHeight,
+                    maxHeight: me.maxPickerHeight,
+                    minWidth: me.minPickerWidth,
+                    manageHeight: false,
+                    shadow: false,
+                    scrollable: true,
+                    listeners: {
+                        scope: me,
+                        selectionchange: me.onSelectionChange,
+                        itemkeydown: me.onPickerKeyDown
+                    }
+                }),
+                view = picker.getView();
+
+            if (Ext.isIE9 && Ext.isStrict) {
+                view.on({
+                    scope: me,
+                    highlightitem: me.repaintPickerView,
+                    unhighlightitem: me.repaintPickerView,
+                    afteritemexpand: me.repaintPickerView,
+                    afteritemcollapse: me.repaintPickerView
+                });
+            }
+            return picker;
+        },
+
+        repaintPickerView() {
+            const style = this.picker.getView().getEl().dom.style;
+            style.display = style.display;
+        },
+
+        onSelectionChange(view, record, node, rowIndex, e) {
+            this.selectItem(view, record);
+        },
+
+        onPickerKeyDown(treeView, record, item, index, e) {
+            const key = e.getKey();
+            if (key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
+                this.selectItem(treeView, record);
+            }
+        },
+
+        selectItem(sender, record) {
+            const me = this;
+            const ids = []
+            _.forEach(me.picker.getSelection(), record => {
+                ids.push(record.get(me.valueField))
+            })
+            me.fireEvent('select', me, record);
+            me.setValue(ids.join(me.splitChar));
+            // me.collapse();
+        },
+
+        onExpand() {
+            const me = this
+            const picker = this.picker;
+            const value = this.value;
+
+            if (!me.store) {
+                msg('正在初始化数据，请稍后')
+                me.collapse()
+                return
+            }
+
+            const vs = _.split(value, me.splitChar)
+            const records = me.store.queryRecordsBy((r) => _.findIndex(vs, (i) => r.get(me.valueField) === i) >= 0)
+            picker.setSelection(records)
+        },
+
+        setValue(value) {
+            const me = this;
+            console.log('setValue', value)
+            me.value = value;
+
+            if (!me.store || me.store.loading) {
+                // Called while the Store is loading. Ensure it is processed by the onLoad method.
+                return me.mixins.field.setValue.call(me, value);
+                // return me;
+            }
+
+            const vs = _.split(value, me.splitChar)
+
+            const displayValues = []
+            _.forEach(vs, v => {
+                const record = me.store.queryRecordsBy((r) => r.get(me.valueField) === v)
+                const dv = record[0]?.get(me.displayField)
+                if (dv) {
+                    displayValues.push(dv)
+                } else {
+                    displayValues.push(v)
+                }
+            })
+
+            // set the raw value to the record's display field if a record was found
+            me.setRawValue(displayValues.join(me.splitChar));
+
+            return me.mixins.field.setValue.call(me, value);
+        },
+
+        getSubmitValue() {
+            return this.value;
+        },
+
+        getValue() {
+            return this.value;
+        },
+
+        onLoad() {
+            const value = this.value;
+
+            if (value) {
+                this.setValue(value);
+            }
+        },
+
+        onUpdate(store, rec, type, modifiedFieldNames) {
+            const display = this.displayField;
+            const me = this
+
+            if (type === 'edit' && modifiedFieldNames &&
+                Ext.Array.contains(modifiedFieldNames, display) &&
+                this.value === rec.getId()) {
+
+                me.mixins.field.setValue.call(me, this.value);
+                this.setRawValue(rec.get(display));
+            }
+        }
+    });
+
+}

src/init.ts

@@ -9,6 +9,7 @@ import initTextfield from './controls/input/textfield'
 import initToolbar from './controls/toolbar/toolbar'
 import initSplitter from './controls/splitter'
 import initCombo from './controls/input/combo'
+import initComboGridMulti from './controls/input/combogridmulti'
 import initSearch from './controls/input/search'
 import initDate from './controls/input/datefield'
 import initNumber from './controls/input/numberfield'
@@ -179,4 +180,5 @@ export function init() {
     initCombotree()
     initPickerPlus()
     initCombogrid()
+    initComboGridMulti()
 }