1

私は Sencha Touch を学ぼうとしてきましたが、おそらくかなり明白なことに行き詰まっています。ボタンイベントで tabPanel を更新しようとしています。最初のボタンをタップして、同じパネルに「maptestPanel」をロードしたいと思います。これは、独自の js ファイルからロードされたマップです。

マップ パネル自体は問題ないように見えます。

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

しかし、タブパネルに適切に配置する方法がわかりません

コードは次のとおりです。

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）「マップ」にはレイアウトがありません。子アイテムが1つあるため、ここではレイアウト：'fit'が適切です。

2）最も外側のアイテムでのみフルスクリーンを使用します。他のアイテムは他のコンテナの子アイテムであるため、フルスクリーンにしたくありません。

3）コンテナにアイテムを動的に追加するには、コンテナでadd（）メソッドを使用します。また、doLayout（）を呼び出して、コンテナーのレイアウトをトリガーする必要があります。

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

ただし、この場合、マップをパネルに追加する理由がわかりません。追加の機能は提供されません。代わりに、マップをbtnPanelに直接追加します。

4）btnPanelにもレイアウトがないため、適切なレイアウト、場合によってはvboxレイアウトも選択する必要があります。

于 2011-05-01T14:14:10.450 に答える
0

私は「古典的な」煎茶しか知りませんが、これは同じように機能するはずです。つまり、mapPanel（ただし非表示）をtabPanelに追加し、ボタンハンドラーでボタンパネルを非表示にして表示することができます。

その上、レイアウトについて言えば、正確なレイアウトは必要ないと思います。定義上、カードレイアウトを使用しているため、tabPanelの「card」

于 2011-05-01T14:14:14.103 に答える