ExtJS3.4升级ExtJS4.2的问题汇总

昨天心血来潮，想把自己用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

 最后晒张成果图

评论

6 楼 chen4w 2014-10-25  

小4与小 写道

感觉Ext好难学有木有。。 楼主有木有小demo或者教程之类的，发我看看。。新手真痛苦啊。
[e-mail]，谢谢。

官方的入门教程最值得推荐：
http://docs.sencha.com/extjs/5.0/
extjs的版本缺乏延续性，每个版本不断重构，初学的话建议直接从5.0开始。

5 楼 小4与小 2014-10-14  

感觉Ext好难学有木有。。 楼主有木有小demo或者教程之类的，发我看看。。新手真痛苦啊。
[e-mail]，谢谢。

4 楼 white_crucifix 2014-01-21  

founder 写道

neptune theme：大面积的色块，真心难看！

其实是上图tab UI和最上面4个浅色按钮的设计问题，导致了看起来深浅色块没有章法的杂糅在一起，其实neptune的整套UI已经可以说完爆老的UI了，而且总体上完爆了当今世界上除了bootstrap系之外的UI系列。

3 楼 founder 2014-01-21  

neptune theme：大面积的色块，真心难看！

2 楼 SiKing 2014-01-14  

楼主真是有心人呢。

1 楼 white_crucifix 2013-12-11  

图亮了