Sencha Touch:TabPanel内部的工具栏

时间:2011-10-05 14:25:37

标签: javascript extjs sencha-touch toolbar tabpanel

我是Sencha Touch的新手,只是试图将工具栏放在TabPanel中。 我这样做是因为TabPanel将是我的主导航,工具栏将提供一些与内容相关的操作,例如创建新的家庭作业或类似的那样。

这是我的“解决方案”,crtly不起作用。 TabPanel出现,“Hello World”也是这样,但是没有任何工具栏。

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

var HomeScreen = new Ext.Panel({
fullscreen: true,
dockedItems: [
    {
        xtype: "toolbar",
        title: "buttons",
        ui: "light",
        dock: "bottom",
        items: [
            {ui: "action", text: "Add"}
        ],
        defaults: {
            handler: tapHandler
        }
    }
],
html: "Hello World"
});

new Ext.Application({
name: "Hello World",

launch: function() {
    var tabPanel = new Ext.TabPanel({
        fullscreen: true,
        ui: 'dark',
        sortable: true,
        items: [
            {
                title: "Home",
                html: "Loading..."
            }
        ]
    });
    tabPanel.items.get(0).update(HomeScreen, true);
}
});

你有解决方案吗?

问候, 马丁

1 个答案:

答案 0 :(得分:1)

我认为这里的问题可能是update()方法需要一个HTML字符串而HomeScreen是一个Ext.Panel。

如果是我,我会通过使用如下变量将HomeScreen添加到tabPanel中的items集合中:

    items: [
         HomePanel                              
    ]

或者通过在items数组中将其定义为对象:

items: [{
    xtype: "panel",
    html: "Hello world",
    dockedItems: [{
        // You toolbar definition
    }]
}]

或者使用TabPanel.add()方法:

tabPanel.add(HomePanel);