在移動網絡應用程序中加載多個選項卡和/或其視圖的問題

Question

我正在使用sencha touch製作移動應用程序。當用戶登錄後，此應用會執行什麼操作，然後他/她看到主視圖。在這個home view有兩個按鈕。這兩個按鈕將用戶帶到各自的視圖，即Appointments和Messages。這兩個視圖在底部有三個選項卡按鈕，即Home, Appointments, Messages。主頁按鈕將用戶帶回由兩個按鈕組成的home view。 Appointments和Messages按鈕可以讓他發表自己的看法。

這裏是我的home view

正如你可以看到有此視圖中沒有標籤。以下是對這一觀點

config: { 
    layout: { 
     type: 'vbox' 
    }, 
    items: [ 
     { 
      xtype: 'titlebar', 
      title: 'Home', 
      docked: 'top' 
     }, 
     { 
      xtype: 'button', 
      cls: 'messagesBtn', 
      itemId: 'msg' 
     }, 
     { 
      xtype: 'button', 
      cls: 'appointmentsBtn', 
      itemId: 'appoint' 
     } 
    ], 

    listeners: [ 
     { 
      delegate: '#appoint', 
      event: 'tap', 
      fn: 'launchAppointmentView' 
     } 
    ] 
}, 
launchAppointmentView: function() { 
    this.fireEvent('launchAppointments'); 
} 

代碼。一旦用戶點擊可以說Button 2該帶他去Appointments View。然後下面是視圖顯示他

和代碼這種觀點之下

config: { 
    tabBarPosition: 'bottom', 

    items: [ 
     { 
      title: 'Appointments', 
      iconCls: 'home', 

      styleHtmlContent: true, 
      scrollable: true, 

      items: { 
       docked: 'top', 
       xtype: 'titlebar', 
       title: 'Appointments' 
      }, 

      html: ["Appointments View"].join("") 
     } 
    ] 
} 

一旦這一觀點被加載那麼我可以看到的是隻有一個約會標籤。我希望爲這三個視圖看到三個標籤。 如何讓其他選項卡可見？

以下是我的郵件查看

這裏是它的代碼

config: { 
    tabBarPosition: 'bottom', 

    items: [ 
     { 
      title: 'Messages', 
      iconCls: 'home', 

      styleHtmlContent: true, 
      scrollable: true, 

      items: { 
       docked: 'top', 
       xtype: 'titlebar', 
       title: 'Messages' 
      }, 

      html: ["Messages View"].join("") 
     } 
    ] 
} 

我看不到這個看法，因爲我沒有不能得到這個觀點在所有消息按鈕在選項卡上。 再次如何添加這些視圖的所有選項卡按鈕，並且當我單擊其中的每個選項時，這會使我看到它的視圖？

Answer 1

這裏是一個選項卡面板的一個例子：

Ext.create('Ext.TabPanel', { 
    fullscreen: true, 
    tabBarPosition: 'bottom', 

    defaults: { 
     styleHtmlContent: true 
    }, 

    items: [ 
     { 
      title: 'Home', 
      iconCls: 'home', 
      html: 'Home Screen' 
     }, 
     { 
      title: 'Contact', 
      iconCls: 'user', 
      html: 'Contact Screen' 
     } 
    ] 
}); 

的問題是，你還沒有添加另外的項目到您的項目列表 - 他們要的標籤，主頁和聯繫方式。每個屏幕需要3個選項卡，因此每個文件需要3個選項。

對於事件，我喜歡創建一個控制器，爲每個需要監聽事件的項目提供參考，併爲每個項目設置控件。讓我知道你是否希望通過如何做到這一點來進行工作。下面我將舉一個簡單的例子來幫助你開始：

Ext.define('Analytics.controller.events.InstType', { 
    extend: 'Ext.app.Controller', 

    config: { 
     refs: { 
      instType: { 
      selector: '#instType' 
     } 
    } 
}, 

init: function() { 
    // Start listening for toggle events on the 3 segmented button panels 
    this.control({ 
     'instType': { 'toggle': function(container, button, pressed) { 
       this.onGraphType(container, button, pressed); 
      } 
     } 
    }); 
}, 

// note: these functions are called on both the buttons selected and the one that became unselected 
// the 'pressed' param inidicates whether this is the selected button or not. 
onGraphType: function (container, button, pressed) { 
    if (pressed) { ..do stuff.. } 
});