2011-01-18 60 views
1

我要去與煎茶MVC路線。我有一個視口面板初始化很像Twitter的例子:視窗應用條件與工具欄煎茶觸摸

/** 
* @author Jeff Blake 
*/ 
Ext.regApplication('App', { 
defaultTarget: 'viewport', 
defaultUrl : 'Viewport/index', 
name   : 'App', 
icon   : "mobile/public/resources/images/icon.png", 
phoneStartupScreen : "mobile/public/resources/images/phone_startup.png", 
//useHistory : false, 
//useLoadMask : true, 

launch: function() { 
    Ext.Viewport.init(); 
    Ext.Viewport.onOrientationChange(); 

    this.viewport = new App.Viewport({ 
     application: this 
    }); 

    Ext.dispatch({ 
     controller: 'User', 
     action : 'index' 
    }); 
} 
}); 

/** 
* @class App.Viewport 
* @extends Ext.Panel 
* This is a default generated class which would usually be used to initialize your  application's 
* main viewport. By default this is simply a welcome screen that tells you that the app was 
* generated correctly. 
*/ 
App.Viewport = Ext.extend(Ext.Panel, { 
id  : 'viewport', 
layout : 'card', 
fullscreen: true, 
cardSwitchAnimation: 'slide', 

initComponent: function() { 

    Ext.apply(this, { 

     dockedItems: [ 
      { 
       // Top Bar 
       dock : 'top', 
       xtype : 'toolbar', 
       title : 'Whats Good', 
       items: [ 
        { 
         text: 'About' 
        }, 

       ] 
      } 


     ] 
    }); 


App.Viewport.superclass.initComponent.apply(this, arguments); 
} 

}); 
Ext.reg('App.Viewport', App.Viewport); 

新代碼:

if (!App.viewport.getDockedComponent(homeBar)) { 
     var homeBar = new App.HomeBar(); 
     App.viewport.addDocked(homeBar); 
    } 

我想在此基礎上面板的類型,目前呈現給能夠有條件地適用DockedItems(工具欄)在視口中。 EG:一個用於登錄,主屏幕,細節屏幕等

我使用Ext.apply(App.Viewport,{dockedItems:[App.LoginBar]})嘗試; 但這並不奏效。目前,它的工作方式與工具欄添加到當前呈現的面板,將其設置爲全屏,但不幸的是過渡和東西的行爲古怪的結構是

Panel 
Toolbar 
    Panel 
    Toolbar 
    /end Panel 
/end Panel 

有沒有人有一個建議?

回答

1

爲了讓參考應用程序的視窗,您可以通過「應用程序」的命名空間,它會自動被regApplication配置的名稱屬性創建進來了。

所以,你可以讓你的工具欄按鈕,例如這樣做:

{ 
    text: 'About', 
    handler: function() { 
     App.viewport.getDockedItems()[0].setTitle('Pressed!'); 
    } 
}, 

當你按下按鈕這將使標題變化。

但是現在我更好地理解你正在嘗試做什麼,我建議你不要將一個動態更改的工具欄停靠在外部視口中,而是將單獨的工具欄添加到每個(卡)面板中它。那麼他們也可以很好地滑動;-)

2

以編程方式添加一個停靠的項目,我會建議使用

viewport.addDocked(loginBar); 

方法是這樣遠比試圖更新組件的原始配置更好。

再就是也再次把它關閉一個.removeDocked()方法。

另外,還要確保你正在處理的組件實例,而不是試圖更新他們的階級。

+0

我得到TypeError:Object#沒有方法'addDocked' – JBlake 2011-01-20 06:45:28

+0

我的app.js看起來像這樣: – JBlake 2011-01-20 07:13:44