
1.1 减少要加载的东西
不要动不动就ext-all.js,extjs是可以定制的,如果你用不到tree,就不要包含这个组件了。ExtJs的官网上有详细的定制方法和工具。
1.2 给出合适的用户提示
把Js后置,然后前面做一个加载的提示。如果像Gmail那样给出进度条,或者像很多网游那样来点图片或者Tips啥的就更好了,说不定用户还会觉得怎么加载这么快,我还没看清楚呢,呵呵。
1.3 用的时候再加载
动态加载,参考使用ExtJs开发MIS系统(2):Js的动态加载。
1.4 只加载一次
别用iframe了,如果你的静态内容过期做的不好,浏览器会经常再不厌其烦的从服务器下载同样的东西。
1.5 对你的Js添加过期标记
ext-base.js、ext-all.js都可以设置很长的过期时间,甚至永不过期(如果你不换extjs的版本)。这点对所有静态内容都很有用,如何设置过期标记请垂询Google。
2,渲染慢
2.1 少加载少解析、晚加载晚解析
1.1,1.3,1.4都对改善渲染慢的情况有效——加载的少了自然渲染的快了。
2.2 别用iframe
iframe不仅仅可能会使浏览器加载两遍,还一定会使浏览器解析两遍,放弃它吧,真的。
2.3 精心设计你的Js代码
例如缓存getElementByID()的结果、编译查询表达式之类的东西,这个纯看Js功力。
2.4 可能的话,让用户换个浏览器吧
Chrome比IE的Js渲染快是数量级上的差异!构造一个40列,50行的复杂GridPanel试试,你就会深有体会了……对于企业内部的MIS系统,换浏览器还是具有可能性的。
3,内存泄露
Ext性能调优方案
1. 将JS进行合并压缩。
使用yahoo的yui-compress.jar进行压缩JS,去掉过多的空格和注释,并合并,减少IO的支出。
2. 将前后台传输的数据进行GZIP压缩。
大数据量的数据传输,通过GZIP的压缩方案,可以减少到25%,有些数据可能会更多。
3. 对大量的JS分析依赖关系,进行动态加载。
这个是关键,通过分析所有的JS中的依赖关系,减少了JS加载的数量。从很大程度上提高了性能。
4. 另外对部分页面进行缓存,而非真正的关闭。
还有一个外部的因素,由于系统使用的客户机环境上的复杂,我们在多个浏览器上进行了测试,只有IE是最慢的,尤其是IE6,后来发现不是IE6要比IE7慢,是因为发现MS发布了脚本引擎cscript 5.7, 而大部分的ie6系统都装的是5.6, 这个版本上的升级,不仅仅是修改了BUG,在JS的执行速度上也有了较大的提升,于是我们在环境因素上又加上了一条,要求客户安装cscript5.7,也大大的提升了页面的打开时间。
没太明白,保存后有没有提交到数据库?好像是有对吧,而你是希望不提交。其实extjs自身就有这么一个功能,先在grid中单击或者双击修改,然后保存在缓存里,关闭界面则丢失。
最后自己写按钮提交到数据库。
1、先要给能修改的字段增加规则,比如:
Ext.form.VTypes['integerVal']=/^\d+$/Ext.form.VTypes['integerText']='只能填写正整数或0'//这个是填写非法的提示
Ext.form.VTypes['integer']=function(v){return Ext.form.VTypes['integerVal'].test(v) }
var acptQtyEdit=new Ext.form.TextField({vtype:"numbers",allowBlank:false})
2、定义哪些字段可以修改
var model=createSelectionModel(acptQtyEdit)//参数可以写很多个
3、在grid中定义clicktoEdit属性,比如:
clicktoEdit:1//这里的数字表示单击或者双击,具体情况请查询api,不记得了
4、如何提交到服务器,通过如下方法:
var store=grid.getStore() var modified=store.modified.slice(0)//获得所有修改过的数据
var jsonArray = []//将修改后的数据转换成json结构的存放容器
Ext.each(modified,function(m){ jsonArray.push(m.data) })
//这里你需要重新加载一下store,好让grid刷新,这里我省略了
Ext.Ajax.request({
method:"post",url:"modifyOrderListExt", success:function(response,config){ Ext.Msg.alert("提交成功","提交成功") },
params:{modifyData:Ext.util.JSON.encode(jsonArray)}})}
1、使用store的sync命令。2、如果有后台服务端接受数据,那么接受的是json数据,要进行转换变成bean,再调用数据层进行保存。
3、如果没有后台,那么直接在extjs-grid的事件响应里,做处理。
手头没有demo,你可以关键字搜索一下,extjs,grid,sync,cell编辑
欢迎分享,转载请注明来源:内存溢出
微信扫一扫
支付宝扫一扫
评论列表(0条)