scope

src/Scope.ts

@@ -1,10 +1,61 @@
+import _ from 'lodash'
+import {invokeMethod} from "./utils";
+
 export class Scope {
 
+    /**
+     * 业务模块的唯一编号
+     */
+    id = _.uniqueId('scope_')
+
+    /**
+     * 一个 ExtJS 能接受的配置对象
+     */
+    config
+
+    /**
+     * 双向绑定的模型对象
+     */
     viewModel
+
+    /**
+     * 构建完成之后的 Ext控件句柄
+     */
     _handle
 
-    constructor({model}) {
+    constructor({model, vjson}) {
         this.viewModel = new Ext.app.ViewModel(model);
         this.viewModel.yvanScope = this
+
+        const that = this
+        this.config = _.defaultsDeep({
+            closable: true,
+            listeners: {
+                afterrender(sender) {
+                    // 记录句柄
+                    that._handle = sender
+                    // 调用onLoad回调
+                    that.onLoad()
+                    // 如果vjson中配置了 afterrender ,需要恢复状态
+                    invokeMethod(vjson.listeners?.afterrender, that, arguments)
+                }
+            },
+            yvanScope: this,
+            viewModel: this.viewModel,
+        }, vjson)
+    }
+
+    /**
+     * 模块载入完成之后的回调
+     */
+    onLoad() {
+    }
+
+    /**
+     * 产生一个当前模块有效的唯一id
+     * @param key 唯一编号
+     */
+    uid(key) {
+        return this.id + key
     }
 }

src/controls/MainTab.js

@@ -26,8 +26,18 @@ export default function () {
             this.superclass.constructor.call(self, newConfig)
         },
 
-        addScope() {
+        /**
+         * 添加一个业务模块到选项卡
+         * @param scopeInstance 业务对象实例
+         */
+        addScope(scopeInstance) {
+            const handle = this.add({
+                ...scopeInstance.config,
+                closable: true,
+            })
+            scopeInstance._invokeLoad(handle)
 
+            this.setActiveTab(handle);
         }
     });
 

src/utils.ts

@@ -0,0 +1,8 @@
+/**
+ * 调用方法
+ */
+export function invokeMethod(fn: any, sender: any, args: any) {
+    if (typeof fn === 'function') {
+        fn.apply(sender, ...args)
+    }
+}