昨天心血来潮,想把自己用extjs3.4作为UI的一个原型升级到最新的extjs4.2.2。
几年前曾经将原型从2.1升级到3.4,对于extjs的版本不兼容深深伤害过。最近两年就没有跟进。
Extjs4采用前端MVC的结构,使得整个前端代码的规划更加规范,更适合多人协作编写复杂的界面。新版的neptune theme也让看厌了ext外观的人眼前一亮,我就是为了这个外观升级的。
所以升级的策略是代价最小,并不将原来的逻辑重构为MVC,而只是修改在extjs4中变化的API和语法形式。经过两天的奋战,还算顺利——到目前位置还没有遇到在新版中无法替代的老版功能实现。
改造过程中,将遇到的问题逐一记录,以供后来者参考。
用途 |
强制editorGrid结束编辑状态 |
Extjs3.4 |
stopEditing( [cancel] ) |
链接 |
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.EditorGridPanel-method-stopEditing |
Extjs4.2.2 |
无 |
链接 |
我的理解是extjs智能处理了,不劳编程者费心了 |
用途 |
根据给定位置获取子元素 |
Extjs3.4 |
itemAt( index ) : Object |
链接 |
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.util.MixedCollection-method-itemAt |
Extjs4.2.2 |
取消了,如果是数组,直接通过下标应用 |
链接 |
|
用途 |
获得grid状态栏工具条 |
Extjs3.4 |
grid.getBottomToolbar(); |
链接 |
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.Panel-method-getBottomToolbar |
Extjs4.2.2 |
grid.getDockedItems('toolbar[dock=bottom]'); |
链接 |
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.container.DockingContainer-method-getDockedItems |
用途 |
获得grid当前选中条目,把’s’去了,(大神们真是闲得蛋疼!) |
Extjs3.4 |
grid.getSelectionModel().getSelections(); |
链接 |
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.RowSelectionModel-method-getSelections |
Extjs4.2.2 |
grid.getSelectionModel().getSelection(); |
链接 |
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.selection.Model-method-getSelection |
用途 |
定义派生类 |
Extjs3.4 |
Bat.Grid = Ext.extend(Ext.grid.EditorGridPanel, { constructor:function(config){ … Ext.reg('bat_grid', Bat.Grid); |
链接 |
|
Extjs4.2.2 |
Ext.define('Bat.Grid', { extend : 'Ext.grid.Panel', alias : 'bat_grid', xtype: 'bat_grid',
constructor:function(config){
|
链接 |
|
用途 |
隐藏对话框 |
Extjs3.4 |
Ext.MessageBox.hide(); |
链接 |
3.4可以无视当前是否有对话框,直接hide不会出问题 |
Extjs4.2.2 |
if(Ext.MessageBox.isVisible()) Ext.MessageBox.hide(); |
链接 |
4.2.2如果当前没有对话框,直接hide会抛出异常 |
用途 |
展开树的所有子节点 |
Extjs3.4 |
node.expandChildNodes(true); |
链接 |
http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.tree.TreeNode-method-expandChildNodes |
Extjs4.2.2 |
node.expandChildren(true); |
链接 |
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.NodeInterface-method-expandChildren |
用途 |
隐藏tab项 |
Extjs3.4 |
tab1.hide(); tabPanel.unhideTabStripItem(tab1); |
链接 |
需要两个动作才能隐藏某tab项 |
Extjs4.2.2 |
tab1.tab.hide(); |
链接 |
此调用会隐藏相应的顶部标签,document里居然没有公开此调用, 在论坛找到的:http://forums.ext.net/showthread.php?19706-CLOSED-TabPanel-hideTabStripItem-unhideTabStripItem |
用途 |
动态修改ComboBox的store loadData |
Extjs3.4 |
mode:'local' |
链接 |
http://www.sencha.com/forum/showthread.php?137631-ComboBox-does-not-work-on-loadData-method |
Extjs4.2.2 |
queryMode: 'local', |
链接 |
此调用会隐藏相应的顶部标签,document里居然没有公开此调用, 在论坛找到的:http://forums.ext.net/showthread.php?19706-CLOSED-TabPanel-hideTabStripItem-unhideTabStripItem |
先总结这么多,有新得再增加。ss
最后晒张成果图
相关推荐
extjs相关联的技术也是比较熟悉的, 所以特决定: 把extjs3.4的开发前的准备这篇文章写好以后, 好好研究下4.1版本, 后续会写很多观看的感受和例子实现的文章, 详见后续动作 ; 下面就开始我的ExtJS学习之路吧……
ExtJS3.4(稳定版)源码包,包含所有源码、官方实例及API说明文档。
spket1.6.18和extjs3.4
extjs3.4api,很实用,方便大家学习extjs,欢迎大家下载 extjs3.4中文api,很实用,方便大家学习extjs,欢迎大家下载
extjsapi,extjs文档,api手岫
extjs 3.4 full package extjs 3.4 ajax 实例
1.提供了extjs-3.2及extjs-3.4的离线包 2.提供了spket的eclipse插件包,plugins和features放入eclipse对应的目录中,启动eclipse即可 3.离线包中包含了ext.jsb2文件,可在eclipse的spket中进行相应的配置,方便开发...
extjs_3.4官方离线API,方便查询所有组件属性
Extjs3.4 Ext-core.pdf 轻松搞定Extjs.pdf Extjs学习笔记 里面有3.4的开发包,附属:Ext-core.pdf 轻松搞定Extjs.pdf Extjs学习笔记
extjs3.4+swfupload整合的上传功能,支持多文件上传
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
spring mvc mybatis extjs 3.4 权限管理 ,调用oracle存储过程作为分页,是进销存产品开发的最好的参考案例
本人初步采用spring mvc3 mybatis3 extjs 3.4开发进销存软件,有很好的参考价值,其中数据库采用oracle,分页采用调用oracle的存储过程,有很好的学习价值,若是想开发简单的CRM和进销存系统是极品参考的系统。...
此api为tomcat运行api 即需要双击文件夹bin中的startup启动api项目 ...访问ext的各控件项路径为http://localhost:8888/extjs3/docs/index.html 访问ext的样例路径为 http://localhost:8888/extjs3/examples/index.html
4.2自带的itemselector,有问题,只有fromstore没有tostore,作了一些修改,可以使用,附件中有效果图
前端开发技术ExtJs 4.2 中文API,网页形式描述,使用者可以输入关键字查找描述信息,传入参数信息等。
里面有demo以及API说明,可以当工具书以及学习使用
extjs 4.2 参考书 开发
ExtJS 3.4.0 官方原始版本、目前官方上可能无法进行下载了!