参考文章
http://www.sencha.com/learn/upgrading-from-sencha-touch-1x-to-2x/
http://www.sencha.com/learn/upgrading-to-sencha-touch-2-pr2/
http://docs.sencha.com/touch/2-0/#!/video/migrating-from-1-to-2
类系统（Class System）
在ST1.×里面，有两种定义类的方式：
1、使用Ext.extend
2、使用MVC提供的方法：regModel 和 regController
在ST2.×中，全部定义类的方式都只有 Ext.define
下面，举个从1.×升级到2.×定义类方式的例子：
Geo.views.BillSummary = Ext.extend(Ext.Panel, {
scroll:
'vertical'
,
html:
"Loading..."
,
styleHtmlContent:
true
,
initComponent:
function
() {
this
.tpl = Ext.XTemplate.from(
'billsummary'
);
Geo.views.BillSummary.superclass.initComponent.call(
this
);
},
/**
* Get the billSummary and update the contents of the panel.
*/
getBill:
function
(bill) {
Geo.CongressService.getBillSummary({
bill: bill
},
this
.onBillSummaryResponse,
this
);
},
// private
onBillSummaryResponse:
function
(billSummary) {
if
(Ext.isArray(billSummary.Paragraph)) {
this
.update(billSummary);
}
else
{
this
.update(
'No Bill Summary Available'
);
}
}
});
|
在2.×中，我们要把上面的代码修改为：
Ext.define(
'Geo.view.BillSummary'
, {
extend:
'Ext.Panel'
,
config: {
scroll:
'vertical'
,
html:
'Loading...'
,
styleHtmlContent:
true
},
initialize:
function
() {
this
.callParent(arguments);
this
.tpl = Ext.Template.from(
'billsummary'
);
},
/**
* Get the billSummary and update the contents of the panel.
*/
getBill:
function
(bill) {
Geo.CongressService.getBillSummary({
bill: bill
},
this
.onBillSummaryResponse,
this
);
},
// private
onBillSummaryResponse:
function
(billSummary) {
if
(Ext.isArray(billSummary.Paragraph)) {
this
.setHtml(billSummary);
}
else
{
this
.setHtml(
'No Bill Summary Available'
);
}
}
});
|
总结一下修改的地方：
1、使用Ext.define 代替了 Ext.extend
2、把所有的类配置信息都放到了一个叫config的对象字面量中。
3、使用initialize方法替换了initComponent
在1.×中，只有Component类有initComponent方法，而在2.×中，所有的类都有initialize方法，在类实例化之前执行这个方法。
这里还要注意的是，我们再也不需要显式地调用Geo.views.BillSummary.superclass.initComponent.call(this);，执行父类构造函数用 this.callParent(arguments)
MVC
ST2.×的MVC架构基本上跟1.×是一样的，只是在一些语法上有细微差别，使到我们写出来的代码可读性和可测试性更强。
Models
Model类与ST2.×的其他类一样，config信息需要移到一个叫config的字面量中；Ext.regModel不再使用，而是用Ext.define去定义Models类。
例子：
Ext.regModel(
'MyApp.model.User'
, {
fields: [
{name:
'name'
, type:
'string'
},
{name:
'age'
, type:
'int'
},
{name:
'alive'
, type:
'boolean'
, defaultValue:
true
}
],
validations: [
{type:
'presence'
, field:
'age'
},
{type:
'length'
, field:
'name'
, min: 2}
],
sayName:
function
() {
alert(
this
.get(
'name'
));
}
});
|
修改为：
Ext.define(
'MyApp.model.User'
, {
extend:
'Ext.data.Model'
,
config: {
fields: [
{name:
'name'
, type:
'string'
},
{name:
'age'
, type:
'int'
},
{name:
'alive'
, type:
'boolean'
, defaultValue:
true
}
],
validations: [
{type:
'presence'
, field:
'age'
},
{type:
'length'
, field:
'name'
, min: 2}
]
},
sayName:
function
() {
alert(
this
.get(
'name'
));
}
});
|
总结一下升级步骤：
- 使用 Ext.define 替换 Ext.regModel
- 继承 Ext.data.Model
- 把配置移动到 config 块中
- 把定制函数留在config块以外 (例如上面的 sayName )
VIEWS
views没什么需要迁移的地方，只需要注意：类名尽量采用这样的命名方式：MyApp.view.SomeViewName
Application
你可以保留大部分定义 Ext.application的方式，例如：
Ext.application({
name:
'MyApp'
,
icon:
'resources/images/logo.png'
,
launch:
function
() {
Ext.create(
'MyApp.view.Main'
);
}
});
|
这里，唯一新的用法是使用 Ext.create 去初始化应用。
这样的改变意义是：在1.×中，一般的做法实在Ext.application中定义全部的controller，和部分的model、view、model，其余的依赖分散在系统的各个地方，这样使到我们很难直观地了解到整个系统的结构。
在2.×中，官方建议把所有的东西都定义在Ext.application，例如这样：
Ext.application({
name:
'MyApp'
,
icon:
'resources/images/logo.png'
,
models: [
'User'
,
'Group'
],
controllers: [
'Users'
,
'Login'
],
views: [
'Main'
,
'Users'
],
stores: [
'Users'
],
launch:
function
() {
Ext.create(
'MyApp.view.Main'
);
}
});
|
Controllers
正如models和其他类一样，需要使用Ext.define替代Ext.regController 去定义Controller类。
例如：
Ext.regController(
"searches"
, {
showSomething:
function
() {
alert(
'something'
);
}
});
|
在2.×，变成：
Ext.define(
'MyApp.controller.Searches'
, {
extend:
'Ext.app.Controller'
,
showSomething:
function
() {
alert(
'something'
);
}
});
|
在Applications中提到，如果Controller中有其他依赖的model, view 或者 store ，则要放到Application中定义。
Routes
在Sencha Touch 1.x中，一个Controller只是一堆可导向的方法的集合，但是在2.×中，Controller变得更主动，它可以定义自己的routes:
Ext.define(
'MyApp.controller.Searches'
, {
config: {
routes: {
'search/:query'
:
'doSearch'
}
},
doSearch:
function
(query) {
alert(
'searching for '
+ query);
}
});
|
还有问题吗？
请到这里去看看有没有同样的问题吧，如果没有，发帖请教。
http://www.sencha.com/forum/forumdisplay.php?89-Sencha-Touch-2.x-Forums