目前开发的方式是采用远程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就工作不正常了，应该怎样保证各页面之间最低耦合并不出现冲突？

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

Ext2.0之Tabpanel AJAX远程加载多标签页面模式开发技巧的更多相关文章

  1. php+ajax远程加载避免重复提交

    近日在练习签到送积分功能时,发现可以在一瞬间的时候提交好多次 导致可以重复领取多次积分 除了增加请求限制之外 发现ajax提交没有限制重复提交 遂立此贴为警示 首先上表单代码 <form ons ...

  2. Bootstrap Modal 使用remote从远程加载内容

        Bootstrap的Modal这个模态窗组件还是很好用的,但在开发的过程中模态窗中的内容大部分都是从后端加载的.要实现模态窗的内容是从后端加载话,常用的实现方式有2种.它们是:     (1) ...

  3. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  4. 在Unity中创建可远程加载的.unity3d包

    在一个Unity项目中,发布包本身不一定要包括所有的Asset(译为资产或组件),其它的部分可以单独发布为.unity3d,再由程序从本地/远程加载执行,这部分不在本文讨论范围.虽然Unity并没有直 ...

  5. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  6. 使用ajax()方法加载服务器数据

    使用ajax()方法加载服务器数据 使用ajax()方法是最底层.功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下: jQuery.a ...

  7. 关于使用scrapy框架编写爬虫以及Ajax动态加载问题、反爬问题解决方案

    Python爬虫总结 总的来说,Python爬虫所做的事情分为两个部分,1:将网页的内容全部抓取下来,2:对抓取到的内容和进行解析,得到我们需要的信息. 目前公认比较好用的爬虫框架为Scrapy,而且 ...

  8. Python爬虫-05：Ajax加载的动态页面内容

    1. 获取AJAX加载动态页面的内容 1.1. Introduction 如果所爬取的网址是通过Ajax方式加载的,就直接抓包,拿他后面传输数据的文件 有些网页内容使用AJAX加载,只要记得,AJAX ...

  9. Scrapy爬虫框架教程（四）-- 抓取AJAX异步加载网页

    欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...

随机推荐

  1. oc对象的内存管理

    oc没有java的垃圾回收机制,所以对象的内存释放很重要,基本数据类型,我们不用理会,编译器会处理: oc的每个对象内部都由一个计数器,用来记录当前有几个指针在指向该对象:当计数器为0时该对象会从内存 ...

  2. 开启VMware Esxi的SSH远程登录

    1.在服务器的配置页面中开启 按[F2],输入密码,进入配置页面,选择troubleshooting options,选择EnableSSH 即可. 2.在VMware Client中开启 进入:配置 ...

  3. ContextLoaderListener作用详解（转）

    ContextLoaderListener监听器的作用就是启动Web容器时,自动装配ApplicationContext的配置信息.因为它实现了ServletContextListener这个接口,在 ...

  4. JQuery，UIbootstrap风格弹出层

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <met ...

  5. Leetcode#81 Search in Rotated Sorted Array II

    原题地址 如果不存在重复元素,仅通过判断数组的首尾元素即可判断数组是否连续,但是有重复元素的话就不行了,最坏情况下所有元素都一样,此时只能通过线性扫描确定是否连续. 设对于规模为n的问题的工作量为T( ...

  6. 01-03-02-1【Nhibernate (版本3.3.1.4000) 出入江湖】CRUP操作--cascade 级联相关

    要点: 1. <!--双向关联时要用: inverse:由子表来维护关系,cascade:级联的关系 如果没有这个设置, 插入Customer成功(即使现在Order插入Order抛异常,这时产 ...

  7. 如何实现Windows Phone代码与Unity相互通信（事件方式）

    源地址:http://www.cnblogs.com/petto/p/3909063.html 一些废话 昨天写一篇今天写一篇.不是我闲的蛋疼,是今天一天碰到了好几个恼人的问题,浪费一天时间搞定.本文 ...

  8. linux服务器重启服务命令说明文档

    (前提是电脑上面已经安装好了ssh软件~!)输入ip,用户名,端口(默认22) 输入密码,登陆成功之后, 转入到/usr/local/tomcat/bin 目录,输入命令行: [root@yangch ...

  9. 三层架构和MVC

    注:本文章内所有内容都来自互联网,本人主要是起了一个收集的作用 http://www.cnblogs.com/zhhh/archive/2011/06/10/2077519.html 又看到有人在问三 ...

  10. Public, Private and Protect

    public 意味着在其后声明的所有成员对所有的人都可以取. private 意味着除了该类型的创建者和类的内部成员函数之外,任何人都不能存取这些成员. protect 它与private基本相似,只 ...