combogrid

src/controls/input/combogrid.js

@@ -0,0 +1,157 @@
+export default function () {
+
+    Ext.define('Yvan.ComboGrid', {
+        extend: 'Ext.form.field.Picker',
+        xtype: 'combogrid',
+
+        triggerCls: Ext.baseCSSPrefix + 'form-search-trigger',
+
+        config: {
+            selectOnTab: true,
+            maxPickerHeight: 1000,
+            minPickerHeight: 450,
+            minPickerWidth: 750,
+        },
+
+        editable: true,
+
+        createPicker() {
+            const me = this
+            const cfg = {
+                ...me.grid,
+                border: false,
+                baseCls: Ext.baseCSSPrefix + 'boundlist',
+                shrinkWrapDock: 2,
+                store: me.store,
+                floating: true,
+                minHeight: me.minPickerHeight,
+                maxHeight: me.maxPickerHeight,
+                minWidth: me.minPickerWidth,
+                manageHeight: false,
+                shadow: false,
+                scrollable: true,
+                // listeners: {
+                //     scope: me,
+                //     itemclick: me.onItemClick,
+                //     itemkeydown: me.onPickerKeyDown
+                // }
+            }
+            // @ts-ignore
+            const picker = new Yvan.Grid(cfg)
+            const 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;
+        },
+
+        onItemClick(view, record, node, rowIndex, e) {
+            this.selectItem(record);
+        },
+
+        onPickerKeyDown(treeView, record, item, index, e) {
+            const key = e.getKey();
+            if (key === e.ENTER || (key === e.TAB && this.selectOnTab)) {
+                this.selectItem(record);
+            }
+        },
+
+        selectItem(record) {
+            var me = this;
+            me.setValue(record.getId());
+            me.fireEvent('select', me, record);
+            me.collapse();
+        },
+
+        onExpand() {
+            const picker = this.picker;
+            const store = picker.store;
+            const value = this.value;
+            let node;
+
+            if (value) {
+                node = store.getNodeById(value);
+            }
+
+            if (!node) {
+                node = store.getRoot();
+            }
+
+            picker.ensureVisible(node, {
+                select: true,
+                focus: true
+            });
+        },
+
+        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;
+            }
+
+            let record = value ? me.store.getNodeById(value) : me.store.getRoot();
+            if (value === undefined) {
+                record = me.store.getRoot();
+                console.log('setValue', record.getId())
+                me.value = record.getId();
+                return me.mixins.field.setValue.call(me, value);
+
+            } else {
+                record = me.store.getNodeById(value);
+            }
+
+            // set the raw value to the record's display field if a record was found
+            me.setRawValue(record ? record.get(me.displayField) : '');
+
+            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/controls/combotree.js

@@ -1,6 +1,6 @@
 export default function () {
 
-    Ext.define('Yvan.TreePicker', {
+    Ext.define('Yvan.ComboTree', {
         extend: 'Ext.form.field.Picker',
         xtype: 'combotree',
 
@@ -19,17 +19,6 @@ export default function () {
 
         editable: false,
 
-        // initComponent: function () {
-        //     const me = this;
-        //     debugger
-        //     this.superclass.initComponent(arguments);
-        //     // me.mon(me.store, {
-        //     //     scope: me,
-        //     //     load: me.onLoad,
-        //     //     update: me.onUpdate
-        //     // });
-        // },
-
         setStore(store) {
             this.store = store
             const me = this;

src/init.ts

@@ -14,11 +14,12 @@ import initCheckbox from './controls/input/checkbox'
 import initCheckboxGroup from './controls/input/checkboxgroup'
 import initRadio from './controls/input/radio'
 import initRadioGroup from './controls/input/radiogroup'
+import initCombotree from './controls/input/combotree'
+import initCombogrid from './controls/input/combogrid'
 import initRows from './controls/rows'
 import initCols from './controls/cols'
 import initButton from './controls/button'
 import initStores from './controls/stores'
-import initCombotree from './controls/combotree'
 import {lookupFn, lookupScope} from "./lib/lib"
 import * as SystemLib from './lib/systemLib'
 import './lib/fix'
@@ -124,4 +125,5 @@ export function init() {
     initRadio()
     initRadioGroup()
     initCombotree()
+    initCombogrid()
 }

src/lib/fix.js

@@ -16,7 +16,15 @@ class FixClass {
         // 这里有个 bug
         // 但凡是调用了 this.lookupViewModel() 就会出现绑定不了的情况
         // const scope = config.$initParent.lookupReferenceHolder().yvanScope //lookupScope(me)
-        const scope = config.$initParent.lookupReferenceHolder().yvanScope //lookupScope(me)
+        let scope
+        if (config.$initParent) {
+            // 在面板上的组件
+            scope = config.$initParent.lookupReferenceHolder().yvanScope //lookupScope(me)
+        } else if (config.column) {
+            // 在列上的组件
+            scope = config.column.lookupReferenceHolder().yvanScope //lookupScope(me)
+        }
+
         if (_.isArray(fix)) {
             _.each(fix, (f) => {
                 const fn = lookupFn(scope, f)