移动端 Scope

src/Scope.ts

@@ -76,12 +76,36 @@ export class Scope {
         return this.id + key
     }
 
+    _onDestroy() {
+        this.onDestroy()
+    }
+
+    _onLoad() {
+        this.onLoad()
+    }
+
     /**
      * 渲染模块到全屏
-     * @param vjsonOption 界面覆盖选项（可以为空）
-     * @param dataOption 数据覆盖选项（可以为空）
-     */
-    render(vjsonOption = {}, dataOption = {}) {
+     * allowBack 是否允许后退(退出)
+     * vjsonOption 界面覆盖选项（可以为空）
+     * dataOption 数据覆盖选项（可以为空）
+     */
+    render(option = {
+        allowBack: true,
+        vjsonOption: {},
+        dataOption: {}
+    }) {
+        _.defaults(option, {
+            allowBack: true,
+            vjsonOption: {},
+            dataOption: {}
+        })
+        const {
+            allowBack,
+            vjsonOption,
+            dataOption
+        } = option
+
         const that = this
         this._vjsonOption = vjsonOption;
         this._dataOption = dataOption;
@@ -92,8 +116,7 @@ export class Scope {
         this.viewModel = new Ext.app.ViewModel(vmodel);
         this.viewModel.yvanScope = this
 
-        const config = _.defaultsDeep({
-                xtype: 'panel',
+        let config = _.defaultsDeep({
                 viewModel: this.viewModel,
                 yvanScope: this,
                 referenceHolder: true,
@@ -103,13 +126,21 @@ export class Scope {
                         // 记录句柄
                         if (rendered) {
                             that._handle = this
+                            window['cp'] = that
 
                             // 调用onLoad回调
                             try {
-                                that.onLoad()
+                                that._onLoad(sender)
                             } catch (e) {
                                 console.error('errorAt onLoad', e)
                             }
+
+                            const $back = $(sender.el.dom)
+                                .find('.navbar>.x-panelheader')
+                                .find('.x-body-el>.fa-angle-left')
+                            $back.on('click', () => {
+                                that._handle.close()
+                            })
                         }
 
                         // 如果vjson中配置了 afterrender ,需要恢复状态
@@ -120,17 +151,39 @@ export class Scope {
                         this.fireEvent('afterrender', sender)
                     },
                 },
-
             },
             vjsonOption,
             that.vjson,
             {
+                xtype: 'panel',
                 showAnimation: 'slide',
                 hideAnimation: 'slideOut',
             }
         )
 
+        if (allowBack) {
+            config = _.defaultsDeep({
+                iconCls: 'x-fa fa-angle-left',
+                cls: 'navbar',
+                tools: [
+                    {iconCls: 'x-fa fa-home'},
+                ],
+            }, config)
+        }
+
         that._handle = Ext.Viewport.add(config)
+        if (allowBack) {
+            that._handle.show();
+        }
+
+        that._handle.on({
+            destroy() {
+                // 卸载
+                window['cp'] = Ext.Viewport.items.getAt(Ext.Viewport.items.items.length - 2).getViewModel().yvanScope
+                that._onDestroy()
+            }
+        })
+
         return that._handle
     }