searchbox

src/Defaults.ts

@@ -31,6 +31,11 @@ export const grid = {
     },
 }
 
+export const search = {
+    labelAlign: 'right',
+    labelWidth: 70,
+}
+
 export const text = {
     labelAlign: 'right',
     labelWidth: 70,
@@ -42,7 +47,7 @@ export const tbfill = {}
 
 export const tbseparator = {}
 
-export const button ={}
+export const button = {}
 
 export const splitter = {}
 

src/controls/combo.js

@@ -1,7 +1,7 @@
 import _ from 'lodash'
-import {combo} from '../Defaults'
-import {baseConfig} from "./base";
-import {dataSourceReload} from "../DataSourceHelper";
+import {combo} from '../../Defaults'
+import {baseConfig} from "../base";
+import {dataSourceReload} from "../../DataSourceHelper";
 
 export default function () {
     const cc = Ext.form.field.ComboBox.prototype.constructor

src/controls/input/search.js

@@ -0,0 +1,241 @@
+import _ from 'lodash'
+import {baseConfig} from "../base";
+import {search} from "../../Defaults";
+import {invokeMethod} from "../../utils";
+
+export default function () {
+
+    Ext.define('Yvan.Search', {
+        extend: 'Ext.form.field.Text',
+        alias: 'widget.searchfield',
+        xtype: 'searchfield',
+
+        constructor(config) {
+            const self = this
+            const newConfig = _.defaultsDeep({
+                // 强制性属性
+                triggers: {
+                    clear: {
+                        weight: 0,
+                        cls: Ext.baseCSSPrefix + 'form-clear-trigger',
+                        hidden: true,
+                        handler: 'onClearClick',
+                    },
+                    search: {
+                        weight: 1,
+                        cls: Ext.baseCSSPrefix + 'form-search-trigger',
+                        handler: 'onSearchClick'
+                    },
+                },
+
+                listeners: {
+                    blur(sender, e) {
+                        this.revertOnblur()
+                    },
+                    specialkey(sender, e) {
+                        const me = this
+                        if (e.getKey() === e.ENTER) {
+                            me.onSearchClick(sender, {}, e);
+                            return
+                        }
+                        invokeMethod(config.listeners?.afterrender, sender, e)
+                    },
+                    afterrender(sender, e) {
+                        this.replaceRawInputEvent()
+                        invokeMethod(config.listeners?.afterrender, sender, e)
+                    }
+                },
+
+            }, baseConfig(config, 'col-item'), config, search)
+
+            this.superclass.constructor.call(self, newConfig)
+        },
+
+        revertOnblur() {
+            this.setRawValue(this.lastValue)
+        },
+
+        onSearchClick(sender, vv, e) {
+            const me = this
+            const {config} = me
+            const {widget, vjson, lookup} = config
+
+            if (e) {
+                e.preventDefault()
+                e.stopPropagation()
+            }
+
+            this.fireEvent('search', sender, e)
+            if (!widget) {
+                return
+            }
+
+            // @ts-ignore
+            require([widget], (widgetScope) => {
+                const WidgetScopeClass = widgetScope.default
+                widgetScope = new WidgetScopeClass()
+
+                widgetScope.searchWidgetSuccess = (data) => {
+                    if (typeof lookup === 'string') {
+                        // lookup 是字符串的情况下，就是取某个列作为 value 值
+                        me.setValue(data[lookup])
+                        return
+                    }
+
+                    /**
+                     * lookup: {
+                     *   // 自己本身的值做更改
+                     *   "value": 'PRODNAME',
+
+                     *   // 扩展到 viewModel 的值做更改
+                     *   "query.PRODID": "PRODID",
+                     *   "query.PRODNAME": "PRODNAME",
+                     * }
+                     */
+                    if (_.isPlainObject(lookup)) {
+                        const parentScope = sender.lookupViewModel().yvanScope
+
+                        _.forOwn(lookup, (value, key) => {
+                            if (!key || key === 'value') {
+                                me.setValue(data[value])
+                            } else {
+                                parentScope.viewModel.set(key, data[value])
+                            }
+                        })
+                    }
+
+                    return true
+                }
+                widgetScope.showDialog(sender)
+            })
+        },
+
+        replaceRawInputEvent() {
+            const me = this
+            const $dom = $(me.inputEl.dom)
+            $dom.on('input', e => {
+                e.preventDefault()
+                e.stopPropagation()
+                // console.log('has input', e)
+            })
+            $dom.on('keyup', e => {
+                if (e.key === "Enter") {
+                    me.onSearchClick(me, {}, e)
+                    return
+                }
+                e.preventDefault()
+                e.stopPropagation()
+                // console.log('has keyup', e)
+            })
+            $dom.on('change', e => {
+                e.preventDefault()
+                e.stopPropagation()
+                // console.log('has change', e)
+            })
+        },
+
+        onChange: function (newVal, oldVal) {
+            const me = this
+            const value = newVal
+
+            if (value) {
+                me.getTrigger('clear').show();
+                me.updateLayout();
+            } else {
+                me.getTrigger('clear').hide();
+                me.updateLayout();
+            }
+
+            console.log('onChange', newVal, oldVal)
+        },
+
+        /**
+         * 清空所有值
+         */
+        onClearClick(sender, e) {
+            const me = this
+            const {config} = me
+            const {lookup} = config
+
+            if (_.isPlainObject(lookup)) {
+                const parentScope = sender.lookupViewModel().yvanScope
+
+                _.forOwn(lookup, (value, key) => {
+                    if (!key || key === 'value') {
+                        me.setValue('')
+                    } else {
+                        parentScope.viewModel.set(key, '')
+                    }
+                })
+            }
+        }
+
+        // getRawValue() {
+        //     var me = this,
+        //         v = (me.inputEl ? me.inputEl.getValue() : Ext.valueFrom(me.rawValue, ''));
+        //
+        //     me.rawValue = v;
+        //     return v;
+        // },
+        //
+        // setRawValue(value) {
+        //     console.log('setRawValue', value, rawValue)
+        //     var me = this,
+        //         rawValue = me.rawValue;
+        //
+        //     return
+        //     if (me.inputEl) {
+        //         me.inputEl.dom.value = value;
+        //     }
+        //
+        //     //
+        //     //
+        //     // if (!me.transformRawValue.$nullFn) {
+        //     //     value = me.transformRawValue(value);
+        //     // }
+        //     //
+        //     // value = Ext.valueFrom(value, '');
+        //     //
+        //     // if (rawValue === undefined || rawValue !== value) {
+        //     //     me.rawValue = value;
+        //     //
+        //     //     // Some Field subclasses may not render an inputEl
+        //     //     if (me.inputEl) {
+        //     //         me.bindChangeEvents(false);
+        //     //         me.inputEl.dom.value = value;
+        //     //         me.bindChangeEvents(true);
+        //     //     }
+        //     // }
+        //     //
+        //     // if (me.rendered && me.reference) {
+        //     //     me.publishState('rawValue', value);
+        //     // }
+        //
+        //     return value;
+        // },
+        //
+        // // onChange(newVal, oldVal, e1, e2, e3) {
+        // //     this._tmpVal = newVal
+        // //     console.log('onChange', this, newVal, oldVal, e1, e2, e3)
+        // // },
+        //
+        // // processRawValue(value, e1, e2, e3) {
+        // //     console.log('processRawValue', this, value, e1, e2, e3)
+        // //     return value + 'a'
+        // // },
+        //
+        // getValue: function () {
+        //     var me = this,
+        //         val = me.rawToValue(me.processRawValue(me.getRawValue()));
+        //     me.value = val;
+        //     return val;
+        // },
+        //
+        // setValue: function (value) {
+        //     var me = this;
+        //     me.setRawValue(me.valueToRaw(value));
+        //     return me.mixins.field.setValue.call(me, value);
+        // },
+        //
+    });
+}

src/controls/textfield.js

@@ -1,6 +1,6 @@
 import _ from 'lodash'
-import {baseConfig} from "./base";
-import {text} from "../Defaults";
+import {baseConfig} from "../base";
+import {text} from "../../Defaults";
 
 export default function () {
 

src/init.ts

@@ -1,10 +1,11 @@
 import _ from 'lodash'
 import initMainTab from './controls/MainTab'
 import initGrid from './controls/grid'
-import initTextfield from './controls/textfield'
+import initTextfield from './controls/input/textfield'
 import initToolbar from './controls/toolbar/toolbar'
 import initSplitter from './controls/splitter'
-import initCombo from './controls/combo'
+import initCombo from './controls/input/combo'
+import initSearch from './controls/input/search'
 import initRows from './controls/rows'
 import initCols from './controls/cols'
 import initButton from './controls/button'
@@ -82,4 +83,5 @@ export function init() {
     initSplitter()
     initButton()
     initStores()
+    initSearch()
 }