解决根元素的事件冲突问题

src/Scope.ts

@@ -113,24 +113,8 @@ export class Scope {
         const config = _.defaultsDeep({
             animateTarget: sender,
             viewModel: this.viewModel,
-            listeners: {
-                show(sender) {
-                    // 记录句柄
-                    if (sender && !that._handle) {
-                        that._handle = sender
-                    }
-
-                    // 调用onLoad回调
-                    try {
-                        that.onLoad()
-                    } catch (e) {
-                        console.error('errorAt onLoad', e)
-                    }
-
-                    // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(that.vjson.listeners?.show, that, arguments)
-                }
-            },
+            yvanScope: this,
+            referenceHolder: true,
 
         }, vjsonOption, that.vjson, windows)
 
@@ -146,6 +130,22 @@ export class Scope {
         if (holder) {
             holder.add(win)
         }
+
+        win.addListener('show', function (sender) {
+            // 记录句柄
+            if (sender && !that._handle) {
+                that._handle = sender
+            }
+
+            // 调用onLoad回调
+            try {
+                that.onLoad()
+            } catch (e) {
+                console.error('errorAt onLoad', e)
+            }
+        })
+        win.addListener('destroy', this._destroy.bind(this))
+
         win.show();
     }
 
@@ -154,7 +154,7 @@ export class Scope {
      * @param vjsonOption 界面覆盖选项（可以为空）
      * @param dataOption 数据覆盖选项（可以为空）
      */
-    showPage(vjsonOption, dataOption, reload = false) {
+    showPage(vjsonOption, dataOption) {
         const that = this
         this._vjsonOption = vjsonOption;
         this._dataOption = dataOption;
@@ -168,31 +168,30 @@ export class Scope {
 
         const config = _.defaultsDeep({
             viewModel: this.viewModel,
-            listeners: {
-                added(sender) {
-                    // 记录句柄
-                    if (sender && !that._handle) {
-                        that._handle = sender
-                    }
-
-                    // 调用onLoad回调
-                    try {
-                        that.onLoad()
-                    } catch (e) {
-                        console.error('errorAt onLoad', e)
-                    }
-
-                    // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(that.vjson.listeners?.added, that, arguments)
-                }
-            },
+            yvanScope: this,
+            referenceHolder: true,
 
         }, vjsonOption, that.vjson)
 
         const tt = Ext.getCmp('TT')
-        tt.addScope(this, config, reload)
+        const handle = tt.addScope(this, config, (handle) => {
+            handle.addListener('added', function (sender) {
+                // 记录句柄
+                if (sender && !that._handle) {
+                    that._handle = sender
+                }
 
-        return config
+                // 调用onLoad回调
+                try {
+                    that.onLoad()
+                } catch (e) {
+                    console.error('errorAt onLoad', e)
+                }
+            })
+            handle.addListener('destroy', this._destroy.bind(this))
+        })
+
+        return handle
     }
 
     /**
@@ -215,7 +214,10 @@ export class Scope {
 
         const config = _.defaultsDeep({
             viewModel: this.viewModel,
+            yvanScope: this,
+            referenceHolder: true,
             renderTo: element,
+
             listeners: {
                 afterrender(sender) {
                     // 记录句柄
@@ -232,7 +234,8 @@ export class Scope {
 
                     // 如果vjson中配置了 afterrender ,需要恢复状态
                     invokeMethod(that.vjson.listeners?.afterrender, that, arguments)
-                }
+                },
+
             },
 
         }, vjsonOption, that.vjson)
@@ -240,11 +243,6 @@ export class Scope {
         new Ext.container.Viewport(config);
     }
 
-    reRender() {
-        this.vjson = this.buildVjson()
-        this.showPage(this._vjsonOption, this._dataOption, true)
-    }
-
     /**
      * 关闭对话框（或标签页）
      */
@@ -283,78 +281,19 @@ export class Scope {
         return this._handle.getReferences()
     }
 
-    constructor({model, vjson}) {
+    _destroy() {
         const that = this
-        this.model = model
-        this.originalVjson = _.cloneDeep(vjson)
-        this.vjson = this.buildVjson()
+
+        that.onDestroy()
+        delete that._watchList
+        delete that._handle
     }
 
-    buildVjson() {
+    constructor({model, vjson}) {
         const that = this
-        return _.defaultsDeep({
-            closable: true,
-            listeners: {
-                afterrender(sender) {
-                    // 记录句柄
-                    if (sender && !that._handle) {
-                        that._handle = sender
-                    }
-
-                    // 调用 onRender 回调
-                    that.onRender()
-
-                    // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(that.originalVjson.listeners?.afterrender, that, arguments)
-                },
-                activate(sender) {
-                    // 调用 onActivate 回调
-                    that.onActivate()
-
-                    const vm = sender.lookupViewModel()
-                    if (vm) {
-                        window['currentScope'] = sender.lookupViewModel().yvanScope
-                    }
-                    // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(that.originalVjson.listeners?.activate, that, arguments)
-                },
-                deactivate(sender) {
-                    // 调用 onActivate 回调
-                    that.onDeactivate()
-                    // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(that.originalVjson.listeners?.deactivate, that, arguments)
-                },
-                beforedestroy(sender) {
-                    // 调用 onBeforeDestroy 回调
-                    that.onBeforeDestroy()
-                    // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(that.originalVjson.listeners?.beforedestroy, that, arguments)
-                },
-                beforeclose(sender) {
-                    // 调用 onActivate 回调
-                    that.onBeforeClose()
-                    // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(that.originalVjson.listeners?.beforeclose, that, arguments)
-                },
-                destroy(sender) {
-                    // 调用 onActivate 回调
-                    that.onDestroy()
-
-                    // 销毁 viewModel
-                    // that.viewModel.destroy()
-                    // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(that.originalVjson.listeners?.destroy, that, arguments)
-                    // delete that.viewModel
-                    // delete that.vjson
-                    // delete that.originalVjson
-                    delete that._watchList
-                    delete that._handle
-                },
-            },
-            yvanScope: this,
-            referenceHolder: true,
-
-        }, this.originalVjson)
+        this.model = model
+        this.originalVjson = _.cloneDeep(vjson)
+        this.vjson = this.originalVjson // this.buildVjson()
     }
 
     /**
@@ -364,36 +303,6 @@ export class Scope {
     }
 
     /**
-     * 渲染完成之后的回调
-     */
-    onRender() {
-    }
-
-    /**
-     * 被激活时的回调（可能执行多次）
-     */
-    onActivate() {
-    }
-
-    /**
-     * 进入未激活状态之前回调的函数
-     */
-    onDeactivate() {
-    }
-
-    /**
-     * 关闭之前的回调(只有 tab 选项卡有这个选项)
-     */
-    onBeforeClose() {
-    }
-
-    /**
-     * 组件被卸载之前的回调
-     */
-    onBeforeDestroy() {
-    }
-
-    /**
      * 组件卸载之后的回调
      */
     onDestroy() {

src/controls/MainTab.js

@@ -71,39 +71,41 @@ export default function () {
          * 添加一个业务模块实例到选项卡
          * @param scopeInstance 业务对象实例
          * @param config ExtJS配置对象
+         * @param panelInitCallback panel初始化之后会调用函数进行构造前的加工
          */
-        addScope(scopeInstance, config, reload) {
+        addScope(scopeInstance, config, panelInitCallback) {
             const me = this
             if (config.path) {
                 for (let i = 0; i < this.items.items.length; i++) {
                     // 找到当前 tabs 里有没有已经打开过
                     const tab = this.items.items[i]
                     if (_.isEqual(tab.path, config.path)) {
-                        if (reload) {
-                            this.remove(tab)
-                            break
-                        } else {
-                            // 激活
-                            this.setActiveTab(tab);
-                            return
-                        }
+                        // 激活
+                        this.setActiveTab(tab);
+                        return tab
                     }
                 }
             }
 
-            // 添加业务模块
-            const newTab = this.add({
+            const newPanel = new Ext.panel.Panel({
                 closable: true,
-                ...config,
+                ...config
             })
+            if (typeof panelInitCallback === 'function') {
+                panelInitCallback(newPanel)
+            }
 
-            this.setActiveTab(scopeInstance._handle);
+            // 添加业务模块
+            const newTab = this.add(newPanel)
+            this.setActiveTab(newTab);
             newTab.on({
                 destroy(sender) {
                     me.changeHash('')
                     delete window['cp']
                 }
             })
+
+            return newTab
         }
     });