ExtJS3.4升级ExtJS4.2的问题汇总
2014-06-27 17:31
253 查看
昨天心血来潮,想把自己用extjs3.4作为UI的一个原型升级到最新的extjs4.2.2。
几年前曾经将原型从2.1升级到3.4,对于extjs的版本不兼容深深伤害过。最近两年就没有跟进。
Extjs4采用前端MVC的结构,使得整个前端代码的规划更加规范,更适合多人协作编写复杂的界面。新版的neptune theme也让看厌了ext外观的人眼前一亮,我就是为了这个外观升级的。
所以升级的策略是代价最小,并不将原来的逻辑重构为MVC,而只是修改在extjs4中变化的API和语法形式。经过两天的奋战,还算顺利——到目前位置还没有遇到在新版中无法替代的老版功能实现。
改造过程中,将遇到的问题逐一记录,以供后来者参考。
先总结这么多,有新得再增加。ss
最后晒张成果图
几年前曾经将原型从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 |
最后晒张成果图
相关文章推荐
- ExtJS3.4升级ExtJS4.2的问题汇总
- ExtJS3.4升级ExtJS4.2的问题汇总
- ExtJS3.4升级ExtJS4.2的问题汇总(转)
- nginx从6升级到8后的问题汇总
- FireFox升级到14.0.1以后Extjs 访问问题
- 升级到Xcode 5.1和iOS 7遇到的各种问题及解决办法汇总:
- Extjs3.4 Store中pruneModifiedRecords配置和getModifiedRecords方法搭配问题
- VC使用: vs2003的工程升级到vs2010的问题汇总
- 升级到Xcode 5.1和iOS 7遇到的各种问题及解决办法汇总:
- struts2.0升级到struts2.1.6遇到的问题汇总
- sshd升级过程中报错问题解决汇总.txt
- 由于升级iOS版本导致证书丢失等一系列问题汇总
- Testlink 安装、升级 问题解决汇总
- 瑞星2005升级问题汇总
- 升级到Xcode 5.1和iOS 7遇到的各种问题及解决办法汇总:
- 升级 ExtJS 至 4.0.7 时遇到的几个小问题
- Extjs 问题汇总
- 已知问题汇总 (2013-11-30) - QQ空间, EXTJS
- centos 6.5 升级python到python 2.7.6出现的问题及解决方法汇总[经常更新]
- 【开发过程问题汇总系列】【ExtJS 界面开发问题】新增和修改界面控件的id命名一样导致界面显示错乱的问题