当前位置: 代码迷 >> JavaScript >> ExtJS3.4升级ExtJS4.2的有关问题汇总
  详细解决方案

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

热度:1093   发布时间:2013-12-21 20:16:01.0
ExtJS3.4升级ExtJS4.2的问题汇总

昨天心血来潮,想把自己用extjs3.4作为UI的一个原型升级到最新的extjs4.2.2。

几年前曾经将原型从2.1升级到3.4,对于extjs的版本不兼容深深伤害过。最近两年就没有跟进。

Extjs4采用前端MVC的结构,使得整个前端代码的规划更加规范,更适合多人协作编写复杂的界面。新版的neptune theme也让看厌了ext外观的人眼前一亮,我就是为了这个外观升级的。

?extjs有风险,跟风需谨慎

?

所以升级的策略是代价最小,并不将原来的逻辑重构为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

?

?

先总结这么多,有新得再增加。ss

?最后晒张成果图

改造效果截图

1 楼 white_crucifix 2013-12-11  
图亮了