2

在过去的两周里，我一直在学习 sencha touch 2.0，我偶然发现了两个问题。我想做的是在我的页面上有一个静态的顶部栏和底部栏，并让动态内容由放置在底部停靠栏的按钮控制。我花了 4 个小时试图让它按照我想要的方式工作，我快到了，但我需要一些指导。

我的第一个问题是我想将图像添加到静态顶部坞站。以另一种形式建议的代码不起作用。

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

此代码没有给出任何错误，但也没有显示所需的图像。图像为 60 像素 x 30 像素

我遇到的第二个问题是我想将图标添加到我的底部停靠栏，以便当用户单击它们时，页面会更改为显示新页面。我有一个包含 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 个按钮中的一个时，没有任何反应；当我单击我的收藏夹按钮时，我希望显示我的表单，但没有任何反应。我哪里出错了？

谢谢

4

1 回答 1

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

});

于 2012-05-10T12:59:25.707 回答