分类：ExtJS

本指南旨在帮助使用Sencha Cmd的开发商从ExtJS的4.1.1a+迁移到ExtJS的5.0.x中。即使此版本中有一些重要的变化，Sencha Cmd也试图使升级过程尽可能轻松。在使用之前我们的老工程需要符合下面的全部假设：

1.你的应用程序使用了 Ext JS 4.1.1a以上版本
2.你的应用程序使用了Ext JS建议的MVC模式
3.你的工程当前使用的是Sencha Cmd进行开发

由于时间，期限和支持许可的限制并不是所有的客户都使用最新版的Ext JS和Sencha Cmd。时间，期限和支持许可的限制往往决定了企业使用哪个版本的Ext JS。

抽出时间来升级到Ext JS的4.x和Cmd的4.x版的最新版本比直接升级到5.x顺利得多，这样可以确保你修复最近的许多bug和避免显著API的变化。

迁移过程
准备工作
清理
在迁移过程的第一步是确保你的源代码控制系统没有正在修改的版本，不建议变修改变改动。你可以用Sencha Cmd查看你的状态是否存在，确保状态会不会丢失。
安装合并工具（建议）
在升级过程中Sencha Cmd可能需要你手动合并一些文件。
好消息，像版本控制，有一些工具可以帮助解决这些合并冲突。Sencha Cmd的可以使用任何可视化的合并工具，你可以通过命令行（这是几乎所有的人）中运行。这一步是可选的，但强烈建议，因为它将使处理升级简单得多。
下面列出一些合并工具，有些是免费的有些是收费的
p4merge
SourceGear
kdiff3
Syntevo SmartSynchronize 3
TortoiseMerge – (part of TortoiseSVN)
AraxisMerge

接下来你将要配置Sencha Cmd去使用这些工具。

升级Sencha Cmd
接下来你要或者最新版本的Sencha Cmd，如果你已经安装了就版本的在你计算机上你可以使用下面命令来安装：
sencha upgrade –beta
又或者到以下页面去下载安装包
http://cdn.sencha.com/cmd/beta/5.0.0.116/release-notes.html
下载后安装Sencha Cmd，并重启你的控制台。

配置代码合并工具
如果你选择好了代码合并工具你需要配置两个属性到配置文件中：
cmd.merge.tool
cmd.merge.tool.args
配置文件“sencha.cfg”在Sencha Cmd的安装目录下

升级app
如果你已经准备好了上述步骤，你只需要在你的工程的根目录执行以下命令：
sencha app upgrade -ext
几分钟后你将会看到文字提示说你的应用程序升级成功。

加载器(Microloader)
在Sencha Cmd的以前的版本中，Ext JS的应用程序相对于Sencha Touch要遵循一个非常不同的加载过程。这主要是由于Sencha Touch的“ Microloader”。在版本Sencha Cmd4中Microloader从Sencha Touch搬进Sencha Cmd，但在当时的Microloader可能无法在所有支持Ext JS的浏览器上运行。

在Sencha Cmd4和Ext JS5中这一限制不再存在。这意味着Ext JS5应用程序现在可以使用与Sencha Touch相同的过程。

app.json
为了更好的使用这些功能，我们首先要转换app.json文件中的“x-compile”类型的注释到microloader脚本中。通常你需要转移script和css引用。按照以前的Sencha Cmd版本生成的文件应该是这样的：
[code lang=”js”]
<!– <x-compile> –>
<!– <x-bootstrap> –>
<link rel="stylesheet" href="bootstrap.css">
<script src="../ext/ext-dev.js"></script>
<script src="bootstrap.js"></script>
<!– </x-bootstrap> –>
<script src="app.js"></script>
<!– </x-compile> –>
[/code]

上面的标记应改为这样：

[code lang=”js”]
<script id="microloader" type="text/javascript" src="bootstrap.js"></script>
[/code]

bootstrap.js文件s是Sencha Cmd产用于加载microloader。此文件只用在开发模式。上面的脚本标记将用于替换之前的build，就像替换之前的“x-compile”代码块

相当于“app.json”看起来像这样：
[code lang=”js”]
{
"framework": "ext",
"css": [
{
"path": "bootstrap.css",
"bootstrap": true
}
],
"js": [
{
"path": "app.js",
"bundle": true
}
]
}
[/code]

你可能会发现这里没有导入”ext-dev.js”文件。这是因为Sencha Cmd 5已经自动的为你添加工作空间。

还有许多其他选项，您可以在“app.json”文件探索。此文件可让您轻松访问包（使用”requires”），并允许您将选项传递到运行时。这是因为你的“app.json”文件的内容将被加载Ext.manifest。
更多有关信息请查看Microloader的文档

Build Properties

在之前版本的Sencha Cmd种，很多属性文件保存在.sencha/app目录下，在Sencha Cmd5中他们都被包含进app.json文件了。app.json内容中使用app.作为属性名的前缀，例如：

[code lang=”js”]
{
"theme": "ext-theme-crisp",
"sass": {
"namespace": "MyApp"
}
}
[/code]

用来替换”.sencha/app/sencha.cfg”:

[code lang=”js”]
app.theme=ext-theme-crisp
app.sass.namespace=MyApp
[/code]

还有很多属性不能在app.json中配置（通常是因为他们不是app.前缀的），但是还是建议如果有可能尽量把配置信息写到app.json文件中。更多的信息可以参考”.sencha/app/defaults.properties”。

查看（Watch）
最后一个步骤是去到你的应用程序根目录查看（Watch）你的app，使用Watch工具你可以实时的预览你的app。
你可以使用自己的webService或者使用自动工具直接http://localhost:1841, 你还可以通过下面属性更改发布信息
build.web.port=1841
build.web.root=${workspace.dir}

如果你想查看日志可以使用
sencha -info app watch
如果你想快速启动可以使用
sencha -quiet app watch

事件驱动编程：为需要处理的事件编写相应的事件处理程序，代码在事件发生时执行。extjs是基于事件（Events）来响应用户操作的，extjs的事件分布在组件和类的生命周期的不同点上，事件让你的代码在程序状态发生改变的时候做出响应。 事件是extjs的一个重要概念。

1.什么是事件

有些时候我们需要在事件触发时做一些事情。例如，当Ext.Component呈现到屏幕上，Ext JS的渲染完成之后触发一个事件。我们可以通过配置侦听事件的一个简单的监听器对象来实现：
[code lang=”js”]
Ext.create(‘Ext.Panel’, {
html: ‘My Panel’,
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
Ext.Msg.alert(‘We have been rendered’);
}
}
});
[/code]
效果图

在这个例子中,一打开网页panel渲染到屏幕，紧接着提示窗口出来了。一个类的所有事件在这个类的api文档中列出来了。例如Ext.panel.Panel就有45个事件。

2.添加事件监听
组件的AfterRender是在某些情况下有用，但是其他事件也是非常有用的。例如，Ext.Button的点击事件：

[code lang=”js”]
Ext.create(‘Ext.Button’, {
text: ‘Click Me’,
renderTo: Ext.getBody(),
listeners: {
click: function() {
Ext.Msg.alert(‘I was clicked!’);
}
}
});
[/code]
运行结果

上面例子中我们实现了一个按钮的点击响应，通常一个组件可以包含多个的事件侦听器。在下面的例子中，在监听到鼠标移进来的事件中我们调用this.hide()来隐藏按钮。然后按钮隐藏一秒钟后我们再一次显示按钮。当this.hide（）被调用时，该按钮被隐藏，隐藏事件触发。隐藏事件触发了隐藏侦听器，它会等待一秒钟，再次显示按钮：

[code lang=”js”]
Ext.create(‘Ext.Panel’, {
html: ‘My Panel’,
renderTo: Ext.getBody(),
listeners: {
afterrender: function() {
Ext.Msg.alert(‘We have been rendered’);
}
}
});
[/code]
运行效果

事件监听器在每一个事件被触发时被调用，这样你就可以随心所欲的隐藏和显示的按钮了。

3.延迟绑定事件监听

前面的例子中我们在创建一个控件的时候绑定了事件的监听器，通常我们还可用使用on函数来延迟添加事件的监听器，例如
[code lang=”js”]
var button = Ext.create(‘Ext.Button’, {
renderTo: Ext.getBody(),
text: ‘My Button’
});

button.on(‘click’, function() {
Ext.Msg.alert(‘Event listener attached by .on’);
});
[/code]
同样你也可以使用on函数来添加多个事件的监听器，例如前面例子你可以这样实现：
[code lang=”js”]
var button = Ext.create(‘Ext.Button’, {
renderTo: Ext.getBody(),
text: ‘My Button’
});

button.on({
mouseover: function() {
this.hide();
},
hide: function() {
Ext.defer(function() {
this.show();
}, 1000, this);
}
});
[/code]
效果是一样的。

4.移除监听器

就像我们可以在任何时候添加监听器，我们也可以将其删除。这次我们要使用功能是删除一个监听器，要删除一个监听器我们需要得到引用它的控件。在前面的例子中，我们实现了一个按钮的点击事件监听。这一次，我们实现了之前的功能，并将其保存到一个名为doSomething的变量，它包含了我们的自定义函数。最初我们在创建控件的时候绑定doSomething到click事件中，随后我们通过defer方法延迟3秒后将doSomething移除。效果是刚才开始我们点击按钮会弹出一个提示框，三秒后点击就什么反应都没了。
[code lang=”js”]
var doSomething = function() {
Ext.Msg.alert(‘listener called’);
};

var button = Ext.create(‘Ext.Button’, {
renderTo: Ext.getBody(),
text: ‘My Button’,
listeners: {
click: doSomething,
}
});

Ext.defer(function() {
button.un(‘click’, doSomething);
}, 3000);
[/code]

5.配置监听器的作用域（Scope）

Scope是事件处理函数的一个内置属性，默认情况下Scope的值是当前控件。但是有些时候我们要实现某些特别的功能需要修改他的Scope，比如我们稍微改动一下前面的例子，我们将按钮的Scope设置为我们创建的panel，然后在点击的时候显示出当前的xtype。
[code lang=”js”]
var panel = Ext.create(‘Ext.Panel’, {
html: ‘Panel HTML’
});

var button = Ext.create(‘Ext.Button’, {
renderTo: Ext.getBody(),
text: ‘Click Me’
});

button.on({
click: {
scope: panel,
fn: function() {
Ext.Msg.alert(this.getXType());
}
}
});
[/code]
运行效果：

从运行效果我们看看到打印处理的xtype是panel，这说明了事件的作用域已经被改变。

6.只响应一次事件

有些时候我们对一个事件的响应只需要响应一次，但是这个事件有可能会被多次触发，下面的代码可以实现我们的需求：
[code lang=”js”]
var button = Ext.create(‘Ext.Button’, {
renderTo: Ext.getBody(),
text: ‘Click Me’,
listeners: {
click: {
single: true,
fn: function() {
Ext.Msg.alert(‘I will say this only once’);
}
}
}
});
[/code]

7.配置缓冲器(消抖)

有些事件在短时间内被触发多次，我们可以通过配置一个缓冲器的缓冲次数。在这种情况下我们的按钮的click侦听器两秒内只调用一次，不管你有多少次点击它，代码如下
[code lang=”js”]
var button = Ext.create(‘Ext.Button’, {
renderTo: Ext.getBody(),
text: ‘Click Me’,
listeners: {
click: {
buffer: 200,
fn: function() {
Ext.Msg.alert(‘I say this only once every 2 seconds’);
}
}
}
});
[/code]

8.制定自定义事件

自定义事件可以通过事件名字作为参数调用fireEvent函数来触发，例如下面的例子实现了一个名字为myEvent两个参数的事件，一个参数是按钮本身，一个参数是1到100的随机数：
[code lang=”js”]
var button = Ext.create(‘Ext.Button’, {
renderTo: Ext.getBody(),
text: "Just wait 2 seconds",
listeners: {
myEvent: function(button, points) {
Ext.Msg.alert(‘myEvent fired! You score ‘ + points + ‘ points’);
}
}
});

Ext.defer(function() {
var number = Math.ceil(Math.random() * 100);

button.fireEvent(‘myEvent’, button, number);
}, 2000);
[/code]

我们通过Ext.defer函数延时两秒触发了这个事件。

9.监听dom事件

并不是每一个ExtJS的组件都能引发每个事件，例如容器的元素就没有click事件。我们可以将许多原生事件添加给组件就可以监听了。在这个例子中，我们的目标Ext.Container，容器没有一个click事件，让我们给它实现一个

[code lang=”js”]
var container = Ext.create(‘Ext.Container’, {
renderTo: Ext.getBody(),
html: ‘Click Me!’,
listeners: {
click: function(){
Ext.Msg.alert(‘I have been clicked!’) // This won’t fire without the code below
}
}
});

container.getEl().on(‘click’, function(){
this.fireEvent(‘click’, container);
}, container);
[/code]

如果没有第二块代码，容器的点击监听器将不会触发。我们为容器元素添加了点击监听器，我们增强了容器的事件的能力。

10.事件的统一化

事件统一化是让Ext JS的5应用程序在触摸屏设备上运行的关键。这种统一化发生在幕后，是从标准的鼠标事件的简单翻译为等效的触摸和指针事件。标准的W3C指针事件是一组在屏幕上的坐标，不管输入设备（鼠标，触摸，手写笔等）

当你的代码需要监听鼠标事件，只需要在控件附加一个类似的触摸或指针事件。例如，如果应用程序监听一个鼠标按下监听器：
myElement.on(‘mousedown’, someFunction);
触摸开始：
myElement.on(‘touchstart’, someFunction);
指针按下：
myElement.on(‘pointerdown’, someFunction);

这个翻译很到位，让你可以实现平板电脑和触摸屏的支持，而无需任何额外的编码。
在大多数情况下，该框架可以通过鼠标，触摸和指针输入之间的无缝转换。然而，也有一些鼠标交互（如鼠标悬停），不容易转化为触摸交互。这些事件将需要一个单独的基础上处理，并在下面的章节中讨论。

11.手势

除了标准的DOM事件，元素也实现了“手势”事件。基于Sencha Touch触摸事件系统构成的基础，在Ext JS的5新的事件系统中Sencha Touch用户可能已经熟悉了这个概念。
从浏览器的角度来看，鼠标、触摸、指针也有三个主要的事件包括start, move, 和 end:

通过处理这些事件的顺序和时间，该框架可以合成更复杂的事件，如拖动，轻扫，长按，捏，旋转和点击。 Ext JS的应用程序可以监听手势事件就像其他任何事件，例如长按：
Ext.get(‘myElement’).on(‘longpress’, handlerFunction);

原来Sencha Touch手势系统主要考虑触摸事件来设计。通过增加对指针和鼠标事件的手势系统的全面支持使得Ext JS5可以对任何类型的输入作出响应。这不仅意味着所有的手势可以使用触摸事件触发，而且所有单点手势（点击，拖拉等）可以使用鼠标事件触发。这导致一个手势系统，无缝跨越各种输入不同输入系统的设备。

该Ext.Widget类，或者只是“小部件”，类似于组件的一个轻量级类，但仅由一个Ext.dom.Element和相关的监听器构成。由于Ext.Widget类不是从Ext.Component派生使得widget跟其他普通的组件(component)不同。组件提供了强大的生命周期管理器，它增加了巨大数额的功能。然而这些功能带来一些开销。

Ext JS 5提供几个股票小部件，包括：

Progress Bar (Ext.ProgressBarWidget or “progressbarwidget”)
Slider (Ext.slider.Widget or “sliderwidget”)
Sparklines (Ext.sparkline.*)
Line (“sparklineline”)
Bar (“sparklinebar”)
Discrete (“sparklinediscrete”)
Bullet (“sparklinebullet”)
Pie (“sparklinepie”)
Box (“sparklinebox”)
TriState (“sparklinetristate”)

在本节中，我们将介绍如何使用和创建小部件。我们还将探索我们的最新创作，小工具栏。

1.使用Widgets
跟普通组件一样，widgets可以添加到容器的items中，下面的例子中，我们把sparkline（走势图）添加到toolbar中

[code lang=”js”]
var panel = Ext.create({
xtype: ‘panel’,
title: ‘Title’,
frame: true,
renderTo: Ext.getBody(),
width: 250, height: 150,
html: ‘Some text’,
tbar: [{
text: ‘Button’
}, ‘->’, {
xtype: ‘sparklineline’,
fillColor: ‘#ddf’,
width: 100,
height: 20,
values: [2, 3, 0, 4, -1]
}]
});

[/code]

效果图：

就sparklines而言，你必须提供一个尺寸（包括宽度和高度）或者使用一个Ext JS layout来使用它。 这是因为widgets需要一个确定的尺寸来绘制图形。

2.使用Widgets Column
为了更方便使用Ext JS很容易的将组件添加到gird中。下面我们一起跟Widget Column 说 hello。
Widget Column让你很轻松添加component或者widget到grid的cell中，之前是不可以的。仅仅是将你的column的xtype属性设置为widgetcolumn并指定它的 widget配置. widget配置包含xtype去创建每个cell。关于xtype可以参考任何Ext.Widget 或者 Ext.Component 类.

使用widget column来添加sparkline widgets到grid中你可以实现下图效果

对于上图效果，更完整的例子请访问Kitchen Sink. (http://dev.sencha.com/deploy/touch/examples/production/kitchensink)

废话少说, 接下来让我们用事实证明。接下来的例子我们创建一个小的记录集（store）来填充一个使用了widget column的grid。这个widget column中每一行都拥有一个progress控件。
[code lang=”js”]
var store = Ext.create(‘Ext.data.Store’, {
fields: [‘name’,’progress’],
data: [
{ name: ‘Test 1’, progress: 0.10 },
{ name: ‘Test 2’, progress: 0.23 },
{ name: ‘Test 3’, progress: 0.86 },
{ name: ‘Test 4’, progress: 0.31 }
]
});

Ext.create({
xtype: ‘grid’,
title: ‘Widget Column Demo’,
store: store,

columns: [{
text: ‘Test Number’,
dataIndex: ‘name’,
width: 100
}, {
xtype: ‘widgetcolumn’,
text: ‘Progress’,
width: 120,
dataIndex: ‘progress’,
widget: {
xtype: ‘progressbarwidget’,
textTpl: ‘{value:percent}’
}
}],

width: 220,
height: 250,
renderTo: Ext.getBody()
});

[/code]

效果如下

3.理解“widget”配置
一个widget的配置是widget column用于创建小部件实例。基于包含在该插件的配置的xtype，widget column创建一个无论是从Ext.Widget或从Ext.Component派生的对象，这个配置都不能是一个实例因为widget column需要为cell提供一个实例。

然而widget配置用于创建所需的组件或部件的多个实例时，每个实例必须与网格中的特定记录和行连接，在cell的生命周期中一个行创建的widget将被“回收”，并且连接到不同的记录和行。

4.使用缓冲渲染
widgets中权重组件和进度条或滑块构件可以使您的网格响应能力更强，如果您的网格是可能包含更多的行，少数时要使用的”bufferedrenderer”插件。Bufferedrenderer 创建固定的数量的组件或窗口小部件。这些项目是从未呈现行回收然后添加到新创建的行

5.自定义Widgets
虽然 Ext JS 5 沿用”widget-ized”版本的滑块和进度条，以及新的sparklines，但是很有可能你需要自己创建一个自定义Widgets。

通过继承Ext.Widget和定义一些元素模板以及相应的监听来创建一个自定义widget
[code lang=”js”]
Ext.define(‘MyWidget’, {
extend: ‘Ext.Widget’,

// The element template – passed to Ext.Element.create()
element: {
reference: ‘element’,
listeners: {
click: ‘onClick’
},
children: [{
reference: ‘innerElement’,
listeners: {
click: ‘onInnerClick’
}
}]
},

constructor: function(config) {
// Initializes our element from the template, and calls initConfig().
this.callParent([config]);

// After calling the superclass constructor, the Element is available and
// can safely be manipulated. Reference Elements are instances of
// Ext.Element, and are cached on each Widget instance by reference name.
},

onClick: function() {
// Listeners use this Widget instance as their scope
console.log(‘element clicked’, this);
},

onInnerClick: function() {
// Access the innerElement reference by name
console.log(‘inner element clicked’, this.innerElement);
}
});
[/code]

这看起来像Sencha Touch组件。这是因为 Ext.Widget 是Sencha Touch的Ext.AbstractComponent 增强的版。将监听器添加到元素模板的能力是一种增强功能，但有极少数的改变。请参阅在 Ext.Widget 上的更多详细信息的文档。

1、下载 sdk

官方下载地址：http://www.sencha.com/products/extjs/download/ （下载时要填写 e-mail)

2、目录说明

 

• bootstrap.js 根据不同的使用环境以决定是应用ext开发调试包还是ext运行包
• ext-all.js ext运行包，包含ext标准版所有的压缩代码
• ext-all-debug.js ext开发调试包，包含ext标准版所有的未压缩代码
• ext-all-debug-w-comments.js ext带注释的开发调试包,包含ext标准版所有的未压缩代码，并且带有注释
• ext.js ext核心包，仅包含ext核心应用的压缩代码
• ext-debug.js ext核心调试包，仅包含ext核心应用的未压缩代码

 

 

3、引入lib 文件并编写代码

 

[code lang=”js”]<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>
学习extjs
</title>
<link href="http://localhost/ext5.0.0/build/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all-debug.css" type="text/css" rel="stylesheet">
<script src="http://localhost/ext5.0.0/build/ext-all.js" type="text/javascript">

</script>
</head>

<body>
<script>
Ext.require([‘Ext.window.Window’]);

Ext.onReady(function() {
var win = Ext.create(‘Ext.window.Window’, {
autoShow: true,
title: ‘提示’,
width: 500,
height: 300,
minWidth: 300,
minHeight: 200,
layout: ‘fit’,
plain: true,
html:’你好！ext5.0′,
buttons: [{
text: ‘确定’
}]
});
});
</script>
</body>

</html>[/code]

运行效果如下图

上面代码大概分析下，首先引入ext-theme-crisp-all-debug.css和ext-all.js两个库文件，然后Ext.require([‘Ext.window.Window’]);这句导入我们需要用到的控件。在Ext.onReady事件被调用的时候创建一个窗口，然后显示窗口。

–每天一点点

之前一直在使用ExtJS4，并在csdn写过一些入门的文章。ExtJS是一个非常不错的前端框架，特别适合做一些web版的后台管理界面。全面并强大控件基本覆盖了所以常见功能，还有可视化的开发工具无不显示出ExtJS的强大实力。凭心而论此款框架真心好用

近日Sencha团队发布了ExtJS 5的beta版本，正式版即将发布。下面来看看这个全新的版本中包含了哪些重要的特性。

1. 不再支持IE6和IE7

作为一个古董级浏览器，IE6和IE7相当不招人待见，各大网站为了UI美观和用户体验做了大量的工作，但在这些老浏览器面前，犹如一下子回到了解放前。

新版ExtJS 5不再支持IE6和IE7以及老版本的现代浏览器。ExtJS 5现在支持的浏览器包括：

IE8+（只支持标准模式）
Firefox 12+（PC & Mac）
Safari 6+
Chrome 18+
Opera 12+（PC & Mac）
2. 顺应HTML5大潮

添加了DOCTYPE文档类型标签，且不支持省略该标签。

3. MVC和MVVM

ExtJS 4引入了对MVC架构的支持，在ExtJS 5中，又新增对MVVM（模型 – 视图 – 视图 – 模型）的支持，MVVM模式其中一个大的特点是数据绑定，将模型层和视图层链接起来，修改其中一个，另一个也会随之变化。

4. 整合进Sencha Cmd包

ExtJS 5现在包含在Sencha Cmd包中，名为ext，当你使用Sencha Cmd生成、构建、更新你的应用程序时（添加-ext参数），即可自动下载最新版的ExtJS。

5. 配置系统和组件

ExtJS 5扩展了配置系统，使之更加向后兼容。

6. 新的主题和图表

在ExtJS 5中，默认的经典主题被Neptune主题替代，新生成的应用程序将默认使用Neptune主题。ExtJS 5中还包含一个增强版的图表包，带来了大量新功能，并且在平板电脑上拥有很好的性能。

此外，ExtJS 5中的API也有一些变化，比如Ext JS 5默认情况下会移除Ext.dom.Query，详细信息：What’s New in Ext JS 5

下载地址：Ext JS 5 beta zip

升级指南：Ext JS 5 Upgrade Guide

–每天一点点