1

我一直在尝试学习 Sencha Touch，但我被困在一些可能很明显的东西上。我正在尝试使用按钮事件更新 tabPanel。我想点击第一个按钮以在同一面板中加载“maptestPanel”。这是从自己的 js 文件加载的地图。

地图面板本身看起来不错：

 maptestPanel =  new Ext.Panel({
                      layout: 'fit',
                      fullscreen: true,
                      items: [map]
                  });

但我没有看到如何正确地将它放在 tabPanel

代码是：

Ext.setup({
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {

    var navBar = new Ext.Toolbar({
        dock : 'top',
        title: 'Some App Name',
    });

    var topPanel = new Ext.Panel({
        dockedItems: [navBar],
        fullscreen : true,
        //html: 'Test Panel'
    });


    var tapHandler = function(button, event) {
            btnPanel.update(maptestPanel); //I'm sure part of the problem is here   
    }   


    var SomeDate1 = new Ext.Button({
        text:"Some date",
        minWidth:200,
        height: 45,
        cls:"listButtonTop",
        handler:tapHandler                  
        });

    var SomeDate2 = new Ext.Button({
        text:"Another Date",
        minWidth:200,
        height: 45,
        cls:"listButton"
    });

    var SomeDate3 = new Ext.Button({
        text:"And Another Date",
        minWidth:200,
        height: 45,
        cls:"listButtonBottom"
    });


    var btnPanel = new Ext.Panel ({
        id: 'date',
        items: [SomeDate1,SomeDate2,SomeDate3],         
    });

    var tabpanel = new Ext.TabPanel({
        layout: 'card',
        tabBar: {
            dock: 'bottom',
            layout: {
                pack: 'center'
            }
        },
        fullscreen: true,
        ui: 'dark',
        cardSwitchAnimation: {
            type: 'slide',
            cover: true
        },
        defaults: {
            scroll: 'vertical'
        },
        items: [{
            title: 'Maps',
            //html: '<h1>Place holder</h1>',
            iconCls: 'maps',
            cls: 'card1',
            items: [btnPanel]               
        }, {
            title: 'Favs',
            html: '<h1>Place holder</h1>',
            iconCls: 'favorites',
            cls: 'card2',
            badgeText: '4',
            layout: 'fit'
            //items: [SomeList, SomeOtherList, AnotherList]
        }, {
           title: 'Info',
            html: '<h1>Place holder</h1>',
            cls: 'card4',
            iconCls: 'info'
        }]
    });
   }
});

感谢您提供任何建议或指导正确的方向。

4

2 回答 2

0

您需要做几件事来修复该代码：

1）“地图”没有布局。由于它有一个子项，因此 layout: 'fit' 在这里是合适的。

2）只在最外面的项目上使用全屏，你不希望其他项目全屏，因为它们是其他容器的子项目。

3) 要向容器动态添加项目，请在容器上使用 add() 方法。您还需要调用 doLayout() 来触发容器的布局。

btnPanel.add(maptestpanel);
btnPanel.doLayout();

但是，在这种情况下，我不明白您为什么要将地图添加到面板，它不会为您提供任何额外的功能。相反，我会将地图直接添加到 btnPanel。

4) btnPanel 也没有布局，因此您还需要在那里选择合适的布局，可能是 vbox 布局。

于 2011-05-01T14:14:10.450 回答
0

我只知道“经典”煎茶，但这应该以相同的方式工作：所以您可以将 mapPanel（但隐藏）添加到您的 tabPanel，并在按钮处理程序中显示它，同时隐藏按钮面板。

此外，说到布局，我认为你不需要在 tabPanel 中精确 layout:'card' 因为它根据定义使用卡片布局

于 2011-05-01T14:14:14.103 回答