Question

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

我的第一个问题是我想将图像添加到静态顶部基座。以其他形式建议的代码不起作用。

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

此代码不会出现任何错误，但它也不会显示所需的图像。图像为60px×30px

我遇到的第二个问题是我想在底部底座上添加图标，以便当用户点击它们时，页面会更改为显示新页面。我有一个包含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

经过与sencha的摔跤几天之后，我找到了一个几乎拥有我想要的东西的例子，它完全符合我想要的方式。我现在有一个静态顶栏和一个带有页面图标的静态底栏，当我点击页面图标时，主页面滚动并显示新页面。

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

}）;

用于页面更改的Sencha静态顶部和底部栏

1 个答案: