- 浏览: 1212727 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
lankk:
lankk 写道事实上,在运行String s1=new St ...
理解String 及 String.intern() 在实际中的应用 -
lankk:
事实上,在运行String s1=new String(&qu ...
理解String 及 String.intern() 在实际中的应用 -
lankk:
同意1楼的说法http://docs.oracle.com/j ...
理解String 及 String.intern() 在实际中的应用 -
raoyutao:
...
jdk 线程池 ThreadPoolExecutor -
hongdanning:
理解了。之前困惑的一些明白了。谢谢分享。
理解String 及 String.intern() 在实际中的应用
使用Extjs进行开发系统时,客户端功能相当丰富。大部门工作都是直接从服务器获取数据再送给widgets进行显示出来。Ext.Ajax是继承Ext.data.Connection而来,而Ext.data.Store在进行加载数据时都需要用到Ext.data.Connection。
Ext.data.Connection提供以下三个事件:
1、beforerequest 请求服务器之前
2、requestcomplete 和服务通信成功后
3、requestexception 请求失败
而这三个事件分别在执行request、doFormUpload、handleResponse、handleFailure触发,所以,重写这四个函数就可以实现在请求服务过程中进行相关操作。
在这里,大家可以先看一下以下几个Function http://www.extjs.com/deploy/dev/docs/?class=Function
解决办法:
首先,在HTML文件中加入如下代码:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />--><div id="load-ing">
加载数据中
</div>
其loading-ing的CSS样式如下:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->#load-ing{position:absolute;right:5px;top:25px;background:rgb(221, 68, 119) url(../images/loading16.gif) no-repeat 4px 2px ;z-index: 200001;
height:20px;line-height:20px;width:150px;font-size:12px;padding-left:30px;color:#FFF; }
通过Extjs实现提示等待功能可以有以下两种解决办法:
一、可以监听beforerequest 、requestcomplete 、requestexception 事件,在每次用到Ext.Ajax或Ext.data.Connection时都写监听函数。
此方向可以解决问题,但是,每次使用Ext.Ajax或Ext.data.Connection都需要写监听函数,这样,重复工作较多。不可行
二、重写Ext.data.Connection
重写Ext.data.Connection的request、doFormUpload、handleResponse、handleFailure几个函数,在执行这几个函数之前选执行你的动作。代码如下:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->Ext.override(Ext.data.Connection,{
request : Ext.data.Connection.prototype.request.createSequence(function(){
Ext.get('load-ing').show();
}),
handleResponse : Ext.data.Connection.prototype.handleResponse.createSequence(function(){
Ext.get('load-ing').hide();
}),
doFormUpload : Ext.data.Connection.prototype.doFormUpload.createSequence(function(){
Ext.get('load-ing').hide();
}),
handleFailure : Ext.data.Connection.prototype.handleFailure.createSequence(function(){
Ext.DomHelper.overwrite(Ext.get('load-ing'),'加载出错,建议 <a onclick="window.location.reload();" href="#"><b>刷新本页</b></a> !')
this.serail=this.serail-100;
})
})
问题:
在一个页面中同时执行几个request函数时,当第一个request执行完成后,“载数据中”将会被隐藏,而这时可能页面还在和服务器通信。所以这种办法并不能根据解决问题。于是想到了加入标志的方法。
当执行一次Ext.get('load-ing').show();时,标志加一,当执行一次Ext.get('load-ing').hide();时,标志减一。代码如下:
<!--<br /><br />Code highlighting produced by Actipro CodeHighlighter (freeware)<br />http://www.CodeHighlighter.com/<br /><br />-->Ext.override(Ext.data.Connection,{
serail : 0,
request : Ext.data.Connection.prototype.request.createSequence(function(){
this.serail++;
Ext.get('load-ing').show();
}),
handleResponse : Ext.data.Connection.prototype.handleResponse.createSequence(function(){
if(this.serail==1)
Ext.get('load-ing').hide();
this.serail--;
}),
doFormUpload : Ext.data.Connection.prototype.doFormUpload.createSequence(function(){
if(this.serail==1)
Ext.get('load-ing').hide();
this.serail--;
}),
handleFailure : Ext.data.Connection.prototype.handleFailure.createSequence(function(){
Ext.DomHelper.overwrite(Ext.get('load-ing'),'加载出错,建议 <a onclick="window.location.reload();" href="#"><b>刷新本页</b></a> !')
this.serail=this.serail-100;
})
})
发表评论
-
Ext Button tooltip 位置
2010-01-15 11:43 3342上面的按钮的tooltip实现在按钮的右下,出于某种 ... -
ext fly get 区别 get、getDom、getCmp、getBody、getDoc
2010-01-08 13:27 3587Ext.get()与Ext.fly()之区别 从一开始接 ... -
ext checkboxgroup 取值
2010-01-05 14:08 4213DoctorWorkStation_CommonDoctorA ... -
动态加载 js
2009-12-14 09:41 1511function onClickTreeNode(node) ... -
ext src 笔记 json string数据转换
2009-12-09 11:21 3700Ext.extend(Ext.data.JsonReader, ... -
ext tooltip
2009-12-08 14:38 1508new Ext.ToolTip({ ta ... -
ext readonly
2009-11-04 10:44 991Ext.getCmp("account") ... -
ext 组件间访问
2009-10-20 15:15 1105userGrid.items.get(1).store.rel ... -
AsyncTreeNode的reload方法无法判断失败的请求
2009-10-17 13:41 1436selNode.reload(function(node) { ... -
关于extjs开发的方式
2009-10-13 09:42 4673用ext做开发也有2,3个月了,都是公司的人自己摸索的,现在我 ... -
ext tree 动态 右键菜单
2009-10-13 09:22 1629uniInfoPanel.on('contextmenu', ... -
ext 验证 用户名 异步
2009-09-29 16:22 3986{ id : 'account', x ... -
ExtJS 验证
2009-09-29 13:46 2230var registerForm = new Ex ... -
grid 相关 自动行号 单选checkbox
2009-09-28 16:11 1641var moduleCM = new Ext.grid.Col ... -
ext combo 提示 回车确定
2009-09-28 15:39 1694{ xtype : 'combo', ... -
combo 二级联动
2009-09-24 18:56 1313{ xtype : 'combo', ... -
在node上添加自己定义的属性 及访问
2009-09-22 17:05 1193Map map=new HashMap(); ... -
ext chart bug
2009-09-09 14:03 1564今天在关闭一个panel的时候发生了错误 错误提示在4968 ... -
Extjs 控制 grid 行 列 的显示内容
2009-08-31 14:47 1872{ header : '发送时间', ... -
Ext.Ajax.request failure options
2009-08-26 14:17 2568failure : function(response, op ...
相关推荐
Ext.Msg.alert('info', response.responseText); }, failure: function() { Ext.Msg.alert('warn', 'failure'); } }); var ds = Ext.data.JsonStore({ url: 'xxx.jsp', root: 'root', fields: ['id','name','descn...
EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT...
asdext extext extext extext extext extext extext extext extext extext extext extext extext extext ext
ext资料 ext资料 ext资料 ext资料 ext资料
ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ex
ext3.0ext3.0ext3.0ext3.0ext3.0ext3.0
ext中文处理
ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...
ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试
Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1
ext校验日期统一处理方法,可以使用此方式一次性处理好时间段校验问题
分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT
ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0
ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询...
Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-详细教程Ext入门-...
EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1
Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery
Ext插件安装Ext插件安装Ext插件安装Ext插件安装Ext插件安装Ext插件安装Ext插件安装Ext插件安装
ext中文教程 ext API ext中文教程 ext API
最新的ext4.0,最新的ext4.0,最新的ext4.0。