Ext2.0之Tabpanel AJAX远程加载多标签页面模式开发技巧

时间:2023-03-09 09:22:09
Ext2.0之Tabpanel AJAX远程加载多标签页面模式开发技巧

目前开发的方式是采用远程load页面来实现多页面效果,类似于126邮箱多标签页效果。但是比126邮箱的方式更好,因为页面打开后是load到本地的,126似乎还会重新请求。在近期项目该开发方式已经基本成熟,积累了一些经验,与各位开发者共享和讨论。

该方式的页面布局为:一个bodylayout,左边为导航树,下方为信息框。上部为企业或系统LOGO。center为一个tabpanel,tabpanel远程加载页面(不清楚AJAX远程加载的请查阅EXT API之panel的autoLoad方法)。

由于该方式在页面处理上已经和传统的OPOA(One Page, One Application)有了很大的不同,导致了一些与之相关问题需要解决,以下是问题场景和我的解决方案:

1.如何在关闭子页面的时候,由子页面的代码确定关闭事件?

问题场景:
需要处理该问题的场景太多了,例如若干组页面成级联逻辑关系,关闭一个页面,其它几个页面也要关闭。例如一个PAGE打开一级的级联报表。

问题处理:
此类问题处理的关键是,需要找到标签页里x按钮关闭的那个Ext.panel。经事件可以按此方式获得:

通过DOM树位置寻找到该panel,这是最安全的方式,不需要知道panel的任何参数,你需要在你远程加载的页面的body下级里先定义一个HTML元素,例如:
<body>
<div id="myrenderDiv"></div>
</body>

由于页面通常是需要渲染一个对象元素成EXT组件。那么该元素就是最好的寻找位置,接下来寻找上级Panel按此方式寻找(jquery方式,你也可以按Ext方式来search DOM):
Ext.getCmp($('#myrenderDiv').parents('.x-panel')[0].id)
找到元素了,剩下的问题就很好办了,监听其destory方法就完成了关闭事件的处理
Ext.getCmp($('#myrenderDiv').parents('.x-panel')[0].id).on('destroy', function(){

alert('close myrenderDiv panel);
})

2.如何令子页面元素根据Tabpanel的大小而自适应?

问题场景:
主页面左边是导航条,采用bodylayout方式,那么左边折叠后。Tabpanel所处的center region就变大。需要自适应扩展TAB里面的元素,例如表格宽度,以达充满center region,实现最佳视觉和操作效果。

问题处理:

该方式关键的是去侦听外部元素的resize时间,如问题1的方案一样。找到了上级的容易panel,那么就能够有地方获得宽高来调整需要适应元素的宽高及位置:

Ext.getCmp($('#myrenderDiv').parents('.x-panel')[0].id).on(

'resize',
  function(refObj, adjWidth, adjHeight, rawWidth, rawHeight){
   Ext.getCmp('myrenderPanel').setHeight(rawHeight);
   Ext.getCmp('myrenderPanel').setWidth(rawWidth);
  }
 );

3.Tab页的时间定时器如何处理?

问题场景:

某页面设置了定时器,在关闭后出现JS错误,发现是延迟定时器调用页的元素不存在导致。

问题处理:

既然定时器只与调用页有关,那么该定时器应该在调用页关闭时一并销毁,见问题1,监听如下实现:
var winSyncTimer = window.setInterval("Mypage.syncFunction()", 30000); //every 30 sec to synchronize

Ext.getCmp($('#myrenderDiv').parents('.x-panel')[0].id).on('destroy', function(){

window.clearInterval(winSyncTimer);
})

settimeout也类似此方式处理

4.AJAX异步调用如何保证安全回调?

问题场景:

当一个比较占用时间的AJAX调用后的时间,TAB页被关闭了。但是随后AJAX的callback却执行了,由于页面元素已经不存在,出现了JS错误。

5.采用此方式开关若干页面后发现内存占用很高,看似有严重你内存泄漏,问题原因是什么?

问题场景:
目前在规模化采用tabpanel远程加载方式处理。当有10个以上不同的页面被加载和释放后。即使tabpanel仅留一个tab页,内存还是占用很高。

6.怎样合理的管理各页面的dom id和js命名?

问题场景:
混乱了混乱了。本来项目成员单独的页面都好好的,加载到标签到tabpanel就工作不正常了,应该怎样保证各页面之间最低耦合并不出现冲突?

……………………(未完持续)