sencha 中的 Ext.setup 与 Ext.application

sencha touch 2.0的Ext.setup和Ext.application目录结构分析

针对sencha touch 2.0.0中Ext.setup和Ext.application的区别,网上找了一圈只有一个说法,也是官方发布的就是application内部加载mvc模式.至于如何加载,如下做了测试分析.
1)Ext.setup
//index.html
<script type="text/javascript" src="./lib/sencha-touch-all.js"></script>
<script type="text/javascript" src="./js/app.js"></script>

//js/app.js
Ext.setup({
name:"NotesApp",
onReady:function(){
var noteslist = Ext.create("NotesApp.view.NotesList");
Ext.Viewport.add(NotesList);
}
});

目录结构为
index.html
js/app.js
lib/sencha-touch-all.js
NotesApp/view/NotesList.js

它会在创建的时候在index.html所在目录查找相应的js文件.也就是NotesApp/view/NotesList.js.否则会提示404错误.

下面再看下Ext.application
2)Ext.application
//index.html
<script type="text/javascript" src="./lib/sencha-touch-all.js"></script>
<script type="text/javascript" src="./js/app.js"></script>

//js/app.js
Ext.application({
name:"NotesApp",
views:["NotesList"],
controllers:["NotesListController"],
launch:function(){
var noteslist = Ext.create("NotesApp.view.NotesList");
Ext.Viewport.add(NotesList);
}
})
目录结构为
index.html
js/app.js
lib/sencha-touch-all.js
app/view/NotesList.js
app/controller/NotesListController.js

如果我们用application来作为程序入口.则我们只需要注意index.html所在目录下的app目录下相应js即可.比如
views:["NotesList"]对应的即是index.html下app/view/NotesList.js它会在程序启动的时候自动加载.如果没有则会报404错误.

这两个都可以独立完成一个app,但是application方式对代码的组织,视图和控制是分离的.可以分为独立的js来做视图和控制.这样好比android的java文件和main.xml文件.可以在main.xml中做事件声明在java中做实现.

本人对此还需要深入的学习.往后会逐步增加sencha的说明.