combogrid 初步完成

src/Defaults.ts

@@ -4,6 +4,7 @@ export const windows = {
     height: 600,
     maximizable: true,
     constrain: true,
+    // manageHeight: true,
     // draggable: true,
     // scrollable: true,
 }
@@ -67,6 +68,7 @@ export const grid = {
         type: 'checkboxmodel',
         checkOnly: false
     },
+    pagination: true,
     autoLoad: true,
     remoteSort: true,
     remoteFilter: true,

src/controls/grid.js

@@ -122,6 +122,15 @@ export default function () {
         },
 
         /**
+         * 为表格强制设置焦点
+         * @param seq 顺序号
+         */
+        focusRow(seq) {
+            this.setSelection(this.store.getAt(seq))
+            this.getView().focusRow(seq)
+        },
+
+        /**
          * 重新载入数据（重新计算参数）
          */
         reload(reloadParams = {}) {
@@ -193,13 +202,14 @@ export default function () {
 
             this.on({
                 afterrender(sender) {
+                    const me = this
                     const {config} = this
                     const {dataSource} = config
 
                     if (config.autoLoad) {
                         if (config.dataSourceCallbackFn) {
                             me.reload()
-
+                                ``
                         } else if (_.isPlainObject(dataSource) && dataSource.method === 'invoke') {
                             me.reload()
                         }
@@ -208,6 +218,14 @@ export default function () {
                     if (config.contextMenu) {
                         this.contextMenu = this.add(config.contextMenu)
                     }
+
+                    const $dom = $(sender.el.dom)
+                    $dom.on('keydown', (e) => {
+                        me.fireEvent('keydown', me, e,)
+
+                    }).on('keyup', (e) => {
+                        me.fireEvent('keyup', me, e,)
+                    })
                 },
                 itemcontextmenu(view, rec, node, index, e) {
                     if (this.contextMenu) {

src/controls/input/combogrid.js

@@ -1,57 +1,137 @@
+import _ from 'lodash'
+
 export default function () {
 
     Ext.define('Yvan.ComboGrid', {
-        extend: 'Ext.form.field.Picker',
+        // extend: 'Ext.form.field.Picker',
+        extend: 'Yvan.PickerAlignCenter',
         xtype: 'combogrid',
 
         triggerCls: Ext.baseCSSPrefix + 'form-search-trigger',
 
+        triggers: {
+            clear: {
+                weight: 0,
+                cls: Ext.baseCSSPrefix + 'form-clear-trigger',
+                hidden: true,
+                handler: 'onClearClick',
+            },
+        },
+
         config: {
             selectOnTab: true,
-            maxPickerHeight: 1000,
-            minPickerHeight: 450,
-            minPickerWidth: 750,
+            pickerHeight: 300,
+            pickerWidth: 650,
         },
 
         editable: true,
 
+        initComponent() {
+            const that = this
+            const toggle = function (e) {
+                // @ts-ignore
+                const {readOnly, disabled} = that.config
+                if (readOnly || disabled) {
+                    return
+                }
+
+                // 点击后下拉
+                if (that.isExpanded) {
+                    that.collapse()
+
+                } else {
+                    that.expand();
+                }
+            }
+
+            this.on({
+                blur(sender, e) {
+                    this.revertOnblur()
+                },
+                specialkey(sender, e) {
+                    const me = this
+                    if (e.getKey() === e.ENTER) {
+                        toggle();
+                        e.stopEvent()
+                        return
+                    }
+                },
+            })
+
+            this.superclass.initComponent.apply(this, arguments)
+        },
+
         createPicker() {
             const me = this
             const cfg = {
-                ...me.grid,
-                border: false,
+                layout: 'fit',
+                border: 5,
+                style: {
+                    borderColor: 'black',
+                    borderWidth: '5px',
+                    borderStyle: 'solid'
+                },
+                shadow: 'side',
+                shadowOffset: 100,
                 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
-                // }
+                width: me.pickerWidth,
+                height: me.pickerHeight,
+                minWidth: me.pickerWidth,
+                minHeight: me.pickerHeight,
+                maxWidth: me.pickerWidth,
+                maxHeight: me.pickerHeight,
+                items: [
+                    {
+                        xtype: 'yvgrid',
+                        layout: 'fit',
+                        selModel: {
+                            selType: 'rowmodel',
+                            mode: 'SINGLE'
+                        },
+                        ...me.grid,
+                        listeners: {
+                            afterrender(grid) {
+                                me.grid = grid
+                                grid.focus()
+                                grid.on({
+                                    rowdblclick(sender, row) {
+                                        me.selectItem(row)
+                                    },
+                                    dataLoadComplete(sender) {
+                                        _.defer(() => {
+                                            me.setFocus()
+                                        })
+                                    },
+                                    keydown(sender, e) {
+                                        me.processKey(e)
+                                    }
+                                })
+                            },
+                        }
+                    }
+                ]
             }
             // @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
-                });
-            }
+            const picker = new Ext.container.Container(cfg)
             return picker;
         },
 
+        setFocus() {
+            if (this.grid.store.getCount() > 0) {
+                this.grid.focusRow(0)
+            }
+        },
+
+        processKey(e) {
+            if (e.key === 'Enter') {
+                this.selectItem(this.grid.selection)
+            } else if (e.key === 'Escape') {
+                this.collapse()
+            }
+        },
+
         repaintPickerView() {
             const style = this.picker.getView().getEl().dom.style;
             style.display = style.display;
@@ -77,22 +157,15 @@ export default function () {
 
         onExpand() {
             const picker = this.picker;
-            const store = picker.store;
-            const value = this.value;
-            let node;
+            this.setFocus()
+        },
 
-            if (value) {
-                node = store.getNodeById(value);
-            }
+        onCollapse() {
 
-            if (!node) {
-                node = store.getRoot();
-            }
+        },
 
-            picker.ensureVisible(node, {
-                select: true,
-                focus: true
-            });
+        revertOnblur() {
+            this.setRawValue(this.lastValue)
         },
 
         setValue(value) {
@@ -131,26 +204,6 @@ export default function () {
             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/input/combotree.js

@@ -57,6 +57,11 @@ export default function () {
                     manageHeight: false,
                     shadow: false,
                     scrollable: true,
+                    // modal: true,
+                    // constrain: true,
+                    // constrainTo: topScope._handle.el.dom,
+                    // renderTo: topScope._handle.el.dom,
+                    // alignTarget: topScope._handle,
                     listeners: {
                         scope: me,
                         itemclick: me.onItemClick,

src/controls/input/pickerplus.js

@@ -0,0 +1,13 @@
+export default function () {
+    Ext.define('Yvan.PickerAlignCenter', {
+        extend: 'Ext.form.field.Picker',
+
+        /**
+         * Performs the alignment on the picker using the class defaults
+         * @private
+         */
+        doAlign: function () {
+            // 不要挪动就好
+        },
+    })
+}

src/init.ts

@@ -15,6 +15,7 @@ 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 initPickerPlus from './controls/input/pickerplus'
 import initCombogrid from './controls/input/combogrid'
 import initRows from './controls/rows'
 import initCols from './controls/cols'
@@ -125,5 +126,6 @@ export function init() {
     initRadio()
     initRadioGroup()
     initCombotree()
+    initPickerPlus()
     initCombogrid()
 }