`

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

 

 

用途

动态修改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

 最后晒张成果图

改造效果截图

  • 大小: 26.2 KB
  • 大小: 172.5 KB
2
0
分享到:
评论
6 楼 chen4w 2014-10-25  
小4与小 写道
感觉Ext好难学有木有。。 楼主有木有小demo或者教程之类的,发我看看。。新手真痛苦啊。
james_xa@qq.com,谢谢。


官方的入门教程最值得推荐:
http://docs.sencha.com/extjs/5.0/
extjs的版本缺乏延续性,每个版本不断重构,初学的话建议直接从5.0开始。
5 楼 小4与小 2014-10-14  
感觉Ext好难学有木有。。 楼主有木有小demo或者教程之类的,发我看看。。新手真痛苦啊。
james_xa@qq.com,谢谢。
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  
图亮了

相关推荐

    extjs 3.4 开发前准备

    对于EXTJS 3.4和4.1版本的共存问题,可以将它们分别打包成WAR文件,部署到Tomcat或JBoss服务器中,以避免内存溢出。访问EXTJS的API和示例,可以通过配置服务器的URL来实现。 3. EXTJS 开发环境配置 - 浏览器:推荐...

    spket1.6和extjs3.4

    描述中的"spket1.6.18和extjs3.4"稍有不同,它提到了Spket的更具体版本1.6.18,这意味着可能在下载或讨论中涉及到的是Spket的一个更新版本,但仍然与ExtJS 3.4配合使用。这通常意味着用户可能在寻找或使用这两个工具...

    Extjs3.4+Ext-core.pdf+轻松搞定Extjs.pdf

    本资源包包含了与ExtJS 3.4相关的学习资料,包括`Ext-core.pdf`、`轻松搞定Extjs.pdf`以及`Extjs学习笔记.docx`,旨在帮助初学者或有经验的开发者更好地理解和掌握ExtJS 3.4。 `Ext-core.pdf` 是关于Ext Core的文档...

    ExtJS 3.4 源码包

    通过研究ExtJS 3.4的源码,开发者不仅可以学习到JavaScript的高级用法,还能掌握前端开发的最佳实践,为构建高性能、交互性强的Web应用打下坚实基础。同时,这个源码包对于想要深入了解JavaScript框架工作原理的人来...

    ExtJs3.4 api

    extjs3.4api,很实用,方便大家学习extjs,欢迎大家下载 extjs3.4中文api,很实用,方便大家学习extjs,欢迎大家下载

    extjsapi/extjs3.4

    extjsapi,extjs文档,api手岫

    extjs 3.4 full package

    extjs 3.4 full package extjs 3.4 ajax 实例

    extjs_3.4官方离线API

    extjs_3.4官方离线API,方便查询所有组件属性

    ExtJS 3.4关于TreePanel的一些实例

    学习TreePanel时根据网上的资料自己实现的实例,结构如下: 1. 创建一棵树 2. 使用TreeLoader加载数据生成树 3. 读取本地Json数据生成树 4. 使用Servlet提供数据 5. 树的事件 6. 右键菜单 7. 修改节点的默认图标 ...

    ExtJS3.4和VS2010上传文件的进度条

    标题中的“ExtJS3.4和VS2010上传文件的进度条”涉及的是一个使用ExtJS3.4版本的JavaScript库与Microsoft Visual Studio 2010(VS2010)进行文件上传,并在上传过程中显示进度条的功能。这个功能在Web应用程序中非常...

    extjs4.2官方文档

    Extjs官方文档 帮助你更好的学习Extjs,同事这里面的代码是最完整,最规范的。

    extJS4升级至extJS6.6所遇问题及解决方案

    项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议

    Extjs4.2 Grid filter Demo 表格过滤实验

    这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹,其余文件过大并且与主题无关,因此未包含。具体方法,请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》

    ExtJs3.4 扩展的Tags控件

    在本主题中,我们关注的是ExtJs3.4版本中的一个扩展——Tags控件。这个控件允许用户在界面上以标签的形式输入和展示数据,常见于关键词选择或者多值输入的场景。 `Tags控件`是基于`DataView`组件进行扩展的。`...

    extjs3.4如何创建对象

    在EXTJS 3.4版本中,创建对象是框架中非常基础且重要的操作,它涉及到类的实例化、配置项的使用以及对象间的交互。EXTJS是一个基于JavaScript的富客户端应用开发框架,提供了丰富的组件库和强大的数据管理能力。下面...

    spring mvc mybatis extjs 3.4 权限管理

    ### Spring MVC MyBatis ExtJS 3.4 权限管理系统关键知识点解析 #### 一、项目背景与架构概述 本系统采用Spring MVC框架作为控制层,MyBatis作为持久层框架,ExtJS 3.4作为前端界面展示工具,实现了权限管理功能,...

    extjs 4.2 jsb2

    extjs 4.2 jsb2 4.2没有自带jsb2文件

    extjs3.4+swfupload上传

    在IT行业中,Web开发经常会遇到文件上传的需求,而"extjs3.4+swfupload上传"就是一个典型的前端文件上传解决方案。EXT JS 3.4是一款强大的JavaScript框架,用于构建富客户端应用程序,提供了丰富的组件库和强大的...

    spring mvc3 mybatis3 extjs 3.4权限管理系统

    本人初步采用spring mvc3 mybatis3 extjs 3.4开发进销存软件,有很好的参考价值,其中数据库采用oracle,分页采用调用oracle的存储过程,有很好的学习价值,若是想开发简单的CRM和进销存系统是极品参考的系统。...

    extjs3.4API tomcat启动查看

    此api为tomcat运行api 即需要双击文件夹bin中的startup启动api项目 ...访问ext的各控件项路径为http://localhost:8888/extjs3/docs/index.html 访问ext的样例路径为 http://localhost:8888/extjs3/examples/index.html

Global site tag (gtag.js) - Google Analytics