Sencha靜態頂部和底部酒吧換頁

Question

過去兩週我一直在學習sencha touch 2.0，我偶然發現了兩個問題。我想要做的是在我的頁面上有一個靜態的頂部欄和底部欄，並讓動態內容由位於底部碼頭的按鈕來控制。我花了4個小時試圖按照我想要的方式工作，我幾乎在那裏，但我需要一點指導。

我的第一個問題是我想將圖像添加到靜態頂端碼頭。以另一種形式建議的代碼不起作用。

var topBar = new Ext.BoxComponent(
      { 
       xtype: 'box', 
       autoEl: {tag: 'img', src:'/resources/icons/icon.png'} 
      } 
    ) 

此代碼不提供任何錯誤，但它也不顯示所需的圖像。圖像是60px30px

我遇到的第二個問題是，我想將圖標添加到我的底部停靠欄，以便當用戶單擊它們時，頁面將更改爲顯示一個新頁面。我有一個帶有3個字段的表單，我想鏈接到底部碼頭上的一個圖標，所以當圖標被點擊時，表單會顯示。以下是完整的代碼：

Ext.setup({ 
phoneStartupScreen : 'resources/images/icon.png', 
icon : 'resources/images/Homescreen.png', 
glossOnIcon : false, 

onReady : function() { 

    var topBar = new Ext.BoxComponent(
      { 
       xtype: 'box', 
       autoEl: {tag: 'img', src:'/resources/icons/icon.png'} 
      } 
    ) 

    var tapHandler = function (btn, evt) { 
     alert("Button '" + btn.text + "' tapped."); 
    } 

    var form = new Ext.form.FormPanel({ 

     items: 
     [ 
      { 
       xtype: "textfield", 
       name: "name", 
       label: "Name", 
       placeHolder: "your name here" 
      }, 
      { 
       xtype: "emailfield", 
       name: "email", 
       label: "Email", 
       placeHolder: "you@example.com" 
      }, 
      { 
       xtype: "urlfield", 
       name: "url", 
       label: "Url", 
       placeHolder: "http://www.example.com" 
      } 
     ] 
    })  

    var searchPageContent ={ 
     html:'This is a test for search page' 
    } 
    var userPageContent ={ 
     html:'This is a test for user page' 
    } 

    var dockedItems = [ 
     { 
      xtype : 'toolbar', 
      dock : 'top', 
      items : topBar 

     }, 
     { 
      xtype: "toolbar", 
      dock: "bottom", 
      items: [ 
       { 
        xtype: 'spacer' 
       }, 
       { 
        iconMask: true, 
        iconCls: "favorites", 
        items: form 
       }, 
       { 
        xtype: 'spacer' 
       }, 
       { 
        iconMask: true, 
        iconCls: "search", 
        items: searchPageContent 
       }, 
       { 
        xtype: 'spacer' 
       }, 
       { 
        iconMask: true, 
        iconCls: "user", 
        items: userPageContent 
       }, 
       { 
        xtype: 'spacer' 
       }, 
      ] 
     } 
    ] 

    new Ext.Panel({ 
     id : 'buttonsPanel', 
     fullscreen : true, 
     dockedItems : dockedItems 
    }); 
} 

}）;

如前所述，我已經能夠創建靜態的頂部和底部酒吧，但我的圖像不工作在我的頂部欄，這是我的第一個問題，當我點擊3個按鈕之一，沒有任何反應;我希望我的表單在我點擊我的收藏夾按鈕時顯示，但沒有任何反應。我哪裏出錯了？

謝謝

Answer 1

後與煎茶摔跤的幾天裏，我發現了一個例子，幾乎有我想要的所以修改了它和它的工作正是我想要的方式。我現在有一個靜態頂部欄和帶頁面圖標的靜態底部欄，這樣當我單擊頁面圖標時，主要內容將滾動並顯示新頁面。

Ext.setup({ 
onReady: function() { 

    var topBar = new Ext.BoxComponent({ 
     layout: 'hbox', 

     html: 
       '<img src="resources/icons/icon.png" height="30", width="48"/>', 
     flex: 1, 
     style:{ 
      textAlign: 'center' 
     } 
    }) 
    var dockedItems = [ 
     { 
      //this creates the top bar, places it at the top of the page and gives it a background image 
      xtype : 'toolbar', 
      dock : 'top', 
      style: 'background-image:url("resources/images/backgroundSmall.png"); background-repeat: repeat-x;', 
      items : topBar 

     } 
    ] 
    // Sub-page sections 


    // Main portion of the page, which includes top toolbar and content 
    var welcome = new Ext.Panel({ 
     items: [{ 
      html: 'this is the welcome screen' 
     }], 
     title: "Welcome", 
     iconCls: "welcome", 
    }); 
    var search = new Ext.Panel({ 
     items: [{ 
      html: 'this is the search screen' 
     }], 
     title: "Search", 
     iconCls: "search", 
    }); 


    // This is the outer panel with the bottom toolbar 
    var wrapper = new Ext.TabPanel({ 
     fullscreen: true, 
     tabBar: { 
      dock: 'bottom', 
      style: 'background:#8a9cB2;', 
      layout: { 
       pack: 'center' 
      } 
     }, 
     items: [ 
      welcome, 
      search, 
      { 
       iconMask: true, 
       iconCls: "search" 
      }, 
      { 
       iconMask: true, 
       iconCls: "user" 
      } 
     ], 
     dockedItems: dockedItems 
    }); 
} 

}）;