showPage / showDialog / renderTo

src/Scope.ts

@@ -19,6 +19,11 @@ export class Scope {
     vjson
 
     /**
+     * 原始 vjsonModel 对象
+     */
+    model
+
+    /**
      * 双向绑定的模型对象
      */
     viewModel
@@ -50,13 +55,23 @@ export class Scope {
     /**
      * 以对话框模式打开当前模块
      * @param sender 发送者(按钮或Scope对象)
-     * @param option 覆盖选项（可以为空）
+     * @param vjsonOption 界面覆盖选项（可以为空）
+     * @param dataOption 数据覆盖选项（可以为空）
      */
-    showDialog(sender, option) {
+    showDialog(sender, vjsonOption, dataOption) {
         const that = this
 
+        const vmodel = _.defaultsDeep({
+            data: {}
+        }, dataOption, that.model)
+
+        this.viewModel = new Ext.app.ViewModel(vmodel);
+        this.viewModel.yvanScope = this
+        this._applyWatchList()
+
         const config = _.defaultsDeep({
             animateTarget: sender,
+            viewModel: this.viewModel,
             listeners: {
                 show(sender) {
                     // 记录句柄
@@ -72,7 +87,7 @@ export class Scope {
                 }
             },
 
-        }, option, that.vjson)
+        }, vjsonOption, that.vjson)
 
         const win = new Ext.Window(config);
         win.show();
@@ -80,12 +95,22 @@ export class Scope {
 
     /**
      * 以标签模式打开当前模块
-     * @param option 覆盖选项（可以为空）
+     * @param vjsonOption 界面覆盖选项（可以为空）
+     * @param dataOption 数据覆盖选项（可以为空）
      */
-    showPage(option) {
+    showPage(vjsonOption, dataOption) {
         const that = this
 
+        const vmodel = _.defaultsDeep({
+            data: {}
+        }, dataOption, that.model)
+
+        this.viewModel = new Ext.app.ViewModel(vmodel);
+        this.viewModel.yvanScope = this
+        this._applyWatchList()
+
         const config = _.defaultsDeep({
+            viewModel: this.viewModel,
             listeners: {
                 added(sender) {
                     // 记录句柄
@@ -97,11 +122,11 @@ export class Scope {
                     that.onLoad()
 
                     // 如果vjson中配置了 afterrender ,需要恢复状态
-                    invokeMethod(that.vjson.listeners?.show, that, arguments)
+                    invokeMethod(that.vjson.listeners?.added, that, arguments)
                 }
             },
 
-        }, option, that.vjson)
+        }, vjsonOption, that.vjson)
 
         const tt = Ext.getCmp('TT')
         tt.addScope(this, config)
@@ -110,6 +135,46 @@ export class Scope {
     }
 
     /**
+     * 直接渲染到元素
+     * @param element 渲染目标
+     * @param vjsonOption 界面覆盖选项（可以为空）
+     * @param dataOption 数据覆盖选项（可以为空）
+     */
+    renderTo(element, vjsonOption, dataOption) {
+        const that = this
+
+        const vmodel = _.defaultsDeep({
+            data: {}
+        }, dataOption, that.model)
+
+        this.viewModel = new Ext.app.ViewModel(vmodel);
+        this.viewModel.yvanScope = this
+        this._applyWatchList()
+
+        const config = _.defaultsDeep({
+            viewModel: this.viewModel,
+            renderTo: element,
+            listeners: {
+                afterrender(sender) {
+                    // 记录句柄
+                    if (sender && !that._handle) {
+                        that._handle = sender
+                    }
+
+                    // 调用onLoad回调
+                    that.onLoad()
+
+                    // 如果vjson中配置了 afterrender ,需要恢复状态
+                    invokeMethod(that.vjson.listeners?.afterrender, that, arguments)
+                }
+            },
+
+        }, vjsonOption, that.vjson)
+
+        new Ext.container.Viewport(config);
+    }
+
+    /**
      * 关闭对话框（或标签页）
      */
     close() {
@@ -117,11 +182,8 @@ export class Scope {
     }
 
     constructor({model, vjson}) {
-        this.viewModel = new Ext.app.ViewModel(model);
-        this.viewModel.yvanScope = this
-        this._applyWatchList()
-
         const that = this
+        this.model = model
         this.vjson = _.defaultsDeep({
             closable: true,
             listeners: {
@@ -182,7 +244,6 @@ export class Scope {
                 },
             },
             yvanScope: this,
-            viewModel: this.viewModel,
             referenceHolder: true,
 
         }, vjson)