0

ボタンのクリック時にタブパネル内に新しいビューを表示する方法は?

これは、ボタンを含む test という名前のビューのコードです。Main.js ビューで説明されているように、このビューはタブ パネルの下にあります。ボタンをクリックすると、新しいリスト ビューが表示されます。しかし、Main.js のタブ パネルの下に表示されません。タブ パネルの下に表示するにはどうすればよいですか? これがテスト ビューです。

Ext.define('tourism.view.test',{
    extend: 'Ext.Panel',
    requires:[
        'Ext.Label',
        'tourism.view.SampleView'
    ],
    xtype: 'test',
    config:{
        layout: {
            type: 'vbox'
        },
        items: [
            {
                xtype: 'container',
                layout: 'hbox',
                flex: 1,
                items:[

                    {
                        xtype: 'container',
                        layout: 'hbox',
                        flex: 1,
                        items:[
                            {
                                xtype:'button',
                                ui: 'plain',
                                centered:true,
                                html:'<img src="resources/images/ArtAndCulture.png" height="100%" width="100%" align="center">',
                                height: 100,
                                width: 200,
                                handler: function(button,event){
                                    var sample = Ext.create('tourism.view.ArtandCulture');
                                    Ext.Viewport.setActiveItem(sample);
                                }

                            }
                        ]
                    },
                    {
                        xtype: 'container',
                        layout: 'hbox',
                        flex: 1,
                        items:[
                            {
                                xtype:'button',
                                ui: 'plain',
                                centered:true,
                                html:'<img src="resources/images/Plantation&Garden.png" height="100%" width="100%" align="center">',
                                height: 100,
                                width: 200,
                                handler:function(){
                                     var sample = Ext.create('tourism.view.PlantationsandGardens');
                                    Ext.Viewport.setActiveItem(sample);
                                }
                            }
                        ]
                    }
                ]
            }
        ]

    }

});

ArtandCulture のビューは次のとおりです。

Ext.define('tourism.view.ArtandCulture',{
    extend:'Ext.List',
    xtype:'artandculturelist',
    config:{
        title:'Arts and Culture',
        itemTpl:[
            '<img src="{image_url}" width="100px" height="100px">',
            '{name}','{category_name}'
        ],
        store:'AttractionMasters',
        onItemDisclosure:true
    }
});

メインビューは次のとおりです。

Ext.define("tourism.view.Main", {
    extend: 'Ext.tab.Panel',
    requires: [
        'Ext.TitleBar',
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [
            {
                title: 'Welcome',
                iconCls: 'home',
                styleHtmlContent: true,
                layout: 'hbox',
                items:[
                    {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'tourism'
                    },
                    {
                        xtype: 'leftpanel',
                        flex: 1
                    },
                    {
                        xtype: 'rightpanel',
                        flex: 4

                    }
              ]
            },
            {
                title: 'About',
                iconCls: 'action',               
                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Menu'
                    },
                    {
                        xtype: 'test'
                    }
                ]
            }          
        ]
    }
});
4

1 に答える 1

0

ビューポートではなく、 TabPanel コンテナー ( ) にビューを追加する必要がありますtourism.view.Main。tabpanel に ID を追加して、ハンドラーからアクセスできるようにします。

handler: function(button,event){
    var sample = Ext.create('tourism.view.ArtandCulture');
    var tab = Ext.getCmp('TabPanelId')
    tab.add(sample);
    tab.setActiveTab(sample);
}
于 2012-10-29T23:09:35.920 に答える