Question

我一直在努力学习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'
        }]
    });
   }
});

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

Answer 1

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

1）'地图'没有布局。由于它有一个子项，布局：'fit'在这里是合适的。

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

3）要将项动态添加到容器，请在容器上使用add（）方法。您还需要调用doLayout（）来触发容器的布局。

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

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

4）btnPanel也没有布局，所以你需要在那里选择合适的布局，可能是vbox布局。

Answer 2

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

此外，谈到布局，我认为你不需要精确布局：tabPanel中的'card'，因为它按照定义使用卡片布局

Sencha Touch更新带有按钮的tabPanel的内容

2 个答案: