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'
});
//</debug>

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/[e-mail]',
        '144': 'resources/icons/Icon~[e-mail]'
    },

    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:{
  }
 
    
});

 

---------------------------------------------------------------------------------------------------------------------------------------------------------------