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就工作不正常了,应该怎样保证各页面之间最低耦合并不出现冲突?

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

时间: 2024-10-01 23:21:48

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

ajax连接数据库加载+三级联动

ajax连接数据库加载 ajax是指一种创建交互式网页应用的网页开发技术. AJAX = 异步JS和XML(标准通用标记语言的子集). AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个网页页面. 优点:是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容. 不需要任何浏览器插件,但需要

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

一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2在js中用keyup事件来进行操作 3创建ajax格式和内容:格式: $.ajax({ url:"哪一个服务端处理器", data:{"自己起名",所需要传给处理器的数据}, type:"post", dataType:"json"

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

使用ajax()方法加载服务器数据 使用ajax()方法是最底层.功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下: jQuery.ajax([settings])或$.ajax([settings]) 其中参数settings为发送ajax请求时的配置对象,在该对象中,url表示服务器请求的路径,data为请求时传递的数据,dataType为服务器返回的数据类型,success为请求成功的执行的回调函数,type为发送数据请求的

Ajax动态加载数据

前言: 1.这个随笔实现了一个Ajax动态加载的例子. 2.使用.net 的MVC框架实现. 3.这个例子重点在前后台交互,其它略写. 开始: 1.控制器ActionResult代码(用于显示页面) /// <summary> /// 电话查询页面 /// </summary> /// <returns></returns> public ActionResult PhoneSearch(string sql) { phoneList=从数据库查询数据: V

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

如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区非常的活跃,许多朋友都在不同地方分享了很多优秀的插件.我在相关的网站上找过想实现类似功能的插件,但是没有找到.于是乎,自己动手丰衣足食.自己来搭建智能搜索框下拉列表.当然,如果有类似功能并且常维护Bug的插件,望留言交流. 源码地址: 淘宝购物车页面--PC端和移动端项目实战 首先需要先给大家打一根

Ajax滚动加载页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title>  <m

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

在一个Unity项目中,发布包本身不一定要包括所有的Asset(译为资产或组件),其它的部分可以单独发布为.unity3d,再由程序从本地/远程加载执行,这部分不在本文讨论范围.虽然Unity并没有直接提供.unity3d的导出功能,但可以通过其手册了解到一些,并打开菜单项. 翻看Unity关于AssetBundle的手册,有相关的链接: BuildPipeline.BuildAssetBundle Building AssetBundles [注意]导出.unity3d格式需要pro版本,非p

Ajax异步加载数据及Redis缓存

针对网页分类条目的动态加载,图为页面的Head部分. //categoryListServlet准备分类数据 ProductService service = new ProductService(); List<Category> categoryList = service.findAllCategoryList(); response.setContentType("text/html; charset=utf-8"); Gson gson = new Gson();

Python爬虫-05:Ajax加载的动态页面内容

1. 获取AJAX加载动态页面的内容 1.1. Introduction 如果所爬取的网址是通过Ajax方式加载的,就直接抓包,拿他后面传输数据的文件 有些网页内容使用AJAX加载,只要记得,AJAX一般返回的是JSON,直接对AJAX地址进行post或get,就返回JSON数据了. 拿到JSAON,就是拿到了网页的数据 例子:http://www.kfc.com.cn/kfccda/storelist/index.aspx 这里有很多页数据,每一页的数据都是ajax加载的.如果你直接用pyth