博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[Ext JS 4] contentEL,renderTo, applyTo 释义与区别
阅读量:4516 次
发布时间:2019-06-08

本文共 2246 字,大约阅读时间需要 7 分钟。

前言

若干年前,使用Ext JS 3 开发了一个系统。

随着Ext JS 4的出现,总是会看到或听到关于Ext 比较多的言论是 :

Ext JS 4 较Ext JS 3 有较大的改变。

Ext JS 4不向下兼容。

Ext JS 4 开始收费了。

基于这些,对Ext JS 4一直就望而却步。也曾转向使用dojo.

但是对Ext JS 4 的新的平板风格和一些性能上的考量之后,还是决定使用Ext js 4.

在升级结束之际,总结一些主要的改变和应对之策。

创建组件方法 new Ext.XXX ==> Ext.create("",{})

在Ext JS 4之前,创建一个组件的方法是:

 

var win = new Ext.Window({              //some options      });

 

在Ext JS 4中, 创建一个组件的方法改变了。 使用Ext.create 的方式。

 

var win = Ext.create("Ext.window.Window",{              //some options      });

 

这中改变,其实是Ext JS 4 改进的一个亮点, 就是支持动态加载了。

在使用旧的方式的时候,相应组件定义的js 文件必须被先include 进来(旧的版本全部包在ext-all.js中), 在新版中可以只导入一些核心的类,其他需要的类使用require 的方式动态导入, 好处就是提高了性能。

当然,在新版中也是支持旧的创建方式的。所以对于升级这件事来说,如果不考虑或者这种类型不考虑动态加载的话, 可以不做更改。

数据模型改变(Ext.data.Record ==> Ext.data.Model)

这个已经完全替换了, 就的方式已经不能work了,必须更改

直接看两个例子就清楚了:

Ext JS 3 的方式:

 

Insert title here

Ext JS 4的写法

 

 

Insert title here

注意,为了更清楚的比较,这里只仅仅是让模型和store 的写法不一致(Grid 的定义也要使用Ext.create的方式)。

 

这里还可以看到一个区别就是Ext JS 4不需要额外导入 ext-base.js

新类型定义(Ext.reg ==> Ext.define)

从Ext.reg 转到Ext.define来创建组件类, 一个好处也是可以实现动态加载JS 类。

而且新的方式会自动完成命名空间的创建(namespace).

旧的方式:

 

Ext.ns("Foo.bar");            Foo.bar = Ext.extend(Ext.util.Observable,{              //your code here      });      Ext.reg("foobar",Foo.bar);

新的方式:

 

 

Ext.define("Foo.bar",{              extend : "xxxxxx",              alias : "widget.foobar"              //your code here      });

不难理解,为什么可以实现动态记载。一个创建需要的是一个js 对象,而另外一个只是一个string.

 

 

Store定义的变化(跨域参数传递)

 

旧的方式:

 

    var store = new Ext.data.Store({        proxy: new Ext.data.ScriptTagProxy({            url: 'http://extjs.com/forum/topics-remote.php'        }),        ......        baseParams: {limit:20, forumId: 4}    });

新的方式:

 

 

var store = Ext.create('Ext.data.Store', {    model: 'User',    proxy: {        type: 'jsonp',        url : 'http://extjs.com/forum/topics-remote.php',        extraParams: {limit:20, forumId: 4}    }});

上面介绍的 ”数据模型改变(Ext.data.Record ==> Ext.data.Model) “也是store reader 的定义的变化。

 

除此之外,上面的例子还有三个不一样的地方:

1. new Ext.XXX ==> Ext.create, 这个上面也介绍到了

2. 跨域取数据的store 定义 (不兼容,需要更新)

旧的方式使用new Ext.data.ScriptTagProxy,新的方式只需要指定proxy的type 为 jsonp 就可以了

3. 参数传递(不兼容,需要更新)

旧的方式是在store 下配置baseParams, 新的方式需要到proxy 下配置extraParams.

 

applyTo/renderTo 的改变

参考:

 

 

 

 

转载于:https://www.cnblogs.com/jiangu66/p/3215115.html

你可能感兴趣的文章
Linux Kernel 多个本地安全绕过漏洞
查看>>
PHP+MYSQL 出现乱码的解决方法
查看>>
Oracle数据库——触发器的创建与应用
查看>>
[日常训练]training
查看>>
2018-04-26java实习面试记录
查看>>
-webkit-line-clamp超过两行就出现省略号
查看>>
logback日志框架的简单使用
查看>>
Android ViewPager+TabHost实现首页导航
查看>>
VS2017开发.net core 时默认发布路径文件夹多个BPC
查看>>
html5shiv.min.js
查看>>
iOS 中的视图函数 init initwithnib viewDidLoad viewWillAppear的总结
查看>>
WEB免费打印控件推荐
查看>>
vue基础
查看>>
django之vue跨域请求
查看>>
Windows环境安装tesseract-ocr 4.00并配置环境变量
查看>>
科聊——即时通信软件原型设计
查看>>
Iterator迭代器
查看>>
UIViewContentMode 的各种效果
查看>>
vim 使用、设置笔记
查看>>
hdu 3784 继续xxx定律
查看>>