BEGINNER: Function that activates another panel on pressing a list item

[dzinyo00]

This seems like it will be a no-brainer for an expert, but after too many hours, some help is greatly appreciated.

My app.JS calls this upon launch which works well:

PerksApp.views.Viewport = Ext.extend(Ext.TabPanel, {
	fullscreen: 'true', 
	layout: 'card', 
	id: 'perkycards',
	
	tabBar:{
		dock:'bottom',
		layout: {
			pack:'center'
		}
	},
	items: [
		{
			xtype: 'perksCategories'
		},						
		{
			xtype: 'perklistingview'


		}
	],


});

perksCategories creates a list as shown immediately below with problem in all caps:

PerksApp.views.PerksCategoryView = new Ext.extend(Ext.Panel, {
	//use Ext.emptyFn to clear out any lingering data store instances
	
	perksCategoriesStore: Ext.emptyFn,
	
	layout: 'fit',
	title: 'Home',
	iconCls: 'home',
	styleHtmlContent: true,
	
	initComponent: function(){
		var ctrlAction = '';
		this.dockedItems=[{
			xtype: 'toolbar',
			dock: 'top',
			title: Community_Name
			
		}],
		
		this.perksCategoryList = new Ext.List({
			store: PerksApp.stores.perksCategoriesStore,
			id: 'perkcatlist',
			itemTpl:'<div class="perks_cat">' + '<tpl for=".">' +
                '<img style="vertical-align: middle" src={path}{thumb}/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{thumb}'+
            '</tpl>'+
            '</div>',
            listeners:{
            	itemtap:function(list,index){
            		///THIS IS THE PROBLEM AREA- DON'T KNOW WHAT FUNCTION TO USE TO ACTIVATE second item (xtype: 'perklistingview') FROM THE TAB PANEL VIEW ABOVE
            	}
            }			
		});
		
    	})
		this.items = [this.perksCategoryList];
	
		PerksApp.views.PerksCategoryView.superclass.initComponent.call(this);
		
	}
	 
});
Ext.reg('perksCategories', PerksApp.views.PerksCategoryView);

Thanks for your help!

[rdougan]

How do you want to show that new panel? Do you want to add it to the TabPanel?

I think what you want is, the 'list' view changes into the new panel (so the active tab is the same). If this is the case, wrap the list in a container, with a card layout. Then you can call container.setActiveItem({html:'my new panel I want to show'});

[dzinyo00]

Spent sometime following your recomendations @rdougan and ended up setting the tabpanel layout to card and viewing a nested list within a new panel. Your recommendation worked, just took a while for a novice. Many thanks!