函数调用的顺序 Sencha Touch应用程序启动时的函数调用顺序
页面加载完毕后,Ext.application方法中launch配置选项中指定的函数,通常是应用程序启动后立即执行的一些函数,将这些函数放在这里。
在编写MVC模式的应用程序的时候，处理launch函数之外，也可以在应用程序启动后，将所需执行的处理放置在每一个控制器的init函数中。该函数在Ext.application方法中launch函数之前被调用。如果使用设备配置文件的话，可以在每个设备配置文件中定义一个launch函数，这些launch函数，在每一个控制器的init函数之后，Ext.application方法中launch函数之前被调用。
应用程序启动时函数的调用顺序：
1. 每个控制器中的init函数
2. 设备配置文件中的launch函数（不清楚这个设备配置文件指的是什么）
3. 应用程序的launch函数
4. 每个控制器中的launch函数
/*******************************************************************************************************************************/
下面是一个事例,目的是看看各个函数执行的顺序：结果应该是，先执行controller/Main.js中的init()函数，在执行app.js中的launch函数，最后执行controller/Main.js中的launch()函数
/*******************************************************************************************************************************/
app.js
Ext.Loader.setPath({
"Ext": "touch/src",
"Oreilly": "app"
});
//
Ext.application({
name: "Oreilly",
requires: [
"Ext.MessageBox"
],
views: ["Main"],
controllers:["Main"],
icon: {
"57": "resources/icons/Icon.png",
"72": "resources/icons/Icon~ipad.png",
"114":"resources/icons/Icon@2x.png",
"144":"resources/icons/Icon~ipad@2x.png"
},
isIconPrecomposed: true,
startupImage: {
"320x460": "resources/startup/320x460.jpg",
"640x920": "resources/startup/640x920.png",
"768x1004": "resources/startup/768x1004.png",
"748x1024": "resources/startup/748x1024.png",
"1536x2008": "resources/startup/1536x2008.png",
"1496x2048": "resources/startup/1496x2048.png"
},
launch: function() {
// Destroy the #appLoadingIndicator element
//Ext.fly("appLoadingIndicator").destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create("Oreilly.view.Main"));//这里调用了view视图下的Main.js
alert("总程序的launch()方法被调用");
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === "yes") {
window.location.reload();
}
}
);
}
});
------------------------------------------------------------------------------------------------------------------------------------------------------------
当调用Ext.application方法中launch函数之前页面已经加载好了
视图中的Main.js
app/view/Main.js 这里定义了两个按钮,以及单击按钮时弹出的alert
Ext.define("Oreilly.view.Main",{
extend:"Ext.Container",
xtype:"mainview",
config:{
id:"myPanel",
layout:"fit",
fullscreen:true,
items:[{
id:"mytoolbar",
docked:"top",
xtype:"toolbar",
items:[
{
xtype:"button",
id:"myButton1",
text:"测试按钮1",
handler:function(){
alert("测试按钮1");
}
},{
xtype:"button",
id:"myButton2",
text:"测试按钮2",
handler:function(){
alert("测试按钮2");
}
}
]
}]
}
});
------------------------------------------------------------------------------------------------------------------------------------
控制器里的Main.js
app/controller/Main.js
Ext.define("Oreilly.controller.Main",{
extend:"Ext.app.Controller",
xtype:"maincontroller",
init:function(){
alert("Main控制器的init()方法被调用");
},
launch:function(){
alert("Main控制器launch()方法被调用");
},
config:{
}
});
---------------------------------------------------------------------------------------------------------------------------------------------------------------