Sencha Touch - 裝置配置檔案

在當今的技術世界中，我們擁有多種裝置，例如手機、平板電腦、桌上型電腦和筆記型電腦，它們具有不同的螢幕尺寸。因此，需要開發可在所有裝置上訪問且具有良好外觀和感覺的應用程式。但是，為不同的裝置開發不同的程式碼非常耗時且成本高昂。

Sencha Touch 在這方面透過提供裝置配置檔案功能來幫助我們。根據活動的配置檔案，將執行不同的依賴項並應用。

我們在編寫應用程式程式碼時可以宣告裝置配置檔案。我們可以有多個裝置，例如：

Ext.application({
   name: 'MyApp',
   profiles: ['Phone', 'Tablet']
});

完成後，配置檔案將載入為：

• MyApp.profiles.Phone.js
• MyApp.profiles.Tablet.js

編寫簡單的手機配置檔案

Ext.define('Mail.profile.Phone', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Phone',
      views: ['phoneView']
   },

   isActive: function() {
      return Ext.os.is('Phone');
   }
});

編寫簡單的平板電腦配置檔案

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet',
      views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
});

正如我們在配置檔案中看到的，我們有一個 isActive 函式，它確定特定裝置是否處於活動狀態。如果裝置處於活動狀態，則將載入並例項化相應的依賴項。

如上述示例中所述，如果我們使用的是手機裝置，則手機配置檔案的 isActive 函式將返回 true，並將載入與手機裝置相關的依賴項；這裡將載入 phoneView。如果裝置是平板電腦，則手機配置檔案的 isActive 函式將返回 false，而平板電腦配置檔案的 isActive 函式將返回 true，並將載入依賴項 tabletView。

啟動流程

這裡需要注意的另一點是，當我們在應用程式中擁有配置檔案時，應用程式程式碼的載入和例項化將按以下順序進行：

• 首先例項化控制器，並將載入每個控制器的 init 函式。
• 將呼叫配置檔案的 launch 函式。
• 將呼叫應用程式的 launch 函式。

配置檔案和應用程式的 launch 函式都是可選的，因此如果我們沒有定義其中任何一個，它們將不會被呼叫。

檢視以下程式碼以檢查可以在何處以及如何定義不同的 launch 和 init 函式。

控制器的 init 函式

Ext.define('MyApp.controller.Main', {
   extend: 'Ext.app.Controller',
   
   init : function (){
      Ext.Msg.alert('Controller's init method');
   },
   
   config: {
      refs: {
         tab: '#divId
     }
   }
});

配置檔案的 launch 函式

Ext.define('Mail.profile.Tablet', {
   extend: 'Ext.app.Profile',

   config: {
      name: 'Tablet', views: ['tableView']
   },

   isActive: function() {
      return Ext.os.is('Tablet');
   }
   launch : function() {
      Ext.Msg.alert('profile's launch function');
   }
});

應用程式的 launch 函式

Ext.application({
   name: 'Sencha', launch: function() {
      Ext.Msg.alert(Application's launch function);
   }
});