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

}）;