昨天心血来潮，想把自己用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
最后晒张成果图
