1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Chicago, IL
    Posts
    10
    Vote Rating
    0
    dzinyo00 is on a distinguished road

      0  

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

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


    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:
    Code:
    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:
    Code:
    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!

  2. 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'});

  3. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Answers
    93
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    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'});
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Chicago, IL
    Posts
    10
    Vote Rating
    0
    dzinyo00 is on a distinguished road

      0  

    Default


    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!

Thread Participants: 1

Tags for this Thread