Results 1 to 8 of 8

Thread: Tap panel jump

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    Bangalore
    Posts
    113
    Vote Rating
    0
      0  

    Default Tap panel jump

    Hi

    I have a Tap Panel with 5 buttons (tabs) on it.

    Requirement is.. how to jump to 3rd tab directly. ( A user will be clicking a link from home page where from he has to be taking to 3rd tab of my Tap Panel report.

    Regards
    -Ram

  2. #2
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Vote Rating
    22
      0  

    Default Something like this

    You would do something like this in your controller, as long as your tabpanel has the id of 'tabpanel' and your button has the id of 'homebutton'.

    Code:
    Ext.define('MyApp.controller.ButtonController', {
        extend: 'Ext.app.Controller',
    
    
        config: {
            refs: {
                HomeButton: '#homebutton'
            },
    
    
            control: {
                "HomeButton": {
                    tap: 'onButtonTap'
                }
            }
        },
    
    
        onButtonTap: function(button, e, options) {
            console.log('Home Button Tapped');
            Ext.getCmp('tabpanel').setActiveItem(2, {type: 'pop', duration: 1000});
        }
    
    
    });

  3. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    Bangalore
    Posts
    113
    Vote Rating
    0
      0  

    Default

    Ext.define('MyApp.view.mytest1', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.mytest1',


    config: {
    id: 'mytest1',
    itemId: 'mytest1',
    items: [
    {
    xtype: 'panel',
    title: 'A',
    html: 'test a',
    id: 'id_a'
    },
    {
    xtype: 'panel',
    title: 'B',
    html: 'test b',
    id: 'id_b'
    }
    ]
    }


    });
    Above is my tabpanel

    And here is my Controller
    Ext.define('MyApp.controller.MyController', {
    extend: 'Ext.app.Controller',


    config: {
    refs: {
    HomeButton: '#mybutton'
    },


    control: {
    "HomeButton": {
    tap: 'onButtonTap'
    }
    }
    },


    onButtonTap: function(target) {
    Ext.getCmp('mytest1').setActiveItem(1, {type: 'pop', duration: 1000});
    }


    });

    My Still I get the following error.

    "Uncaught TypeError: Cannot call method 'setActiveItem' of undefined "

    -Ram

  4. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    454
    Vote Rating
    22
      0  

    Default strange

    Weird, because the above code is working perfectly for me...

    I think perhaps the problem is you have both itemid and id specified. Try removing the itemid 'mytest1' and just have the id

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Location
    Bangalore
    Posts
    113
    Vote Rating
    0
      0  

    Default

    Can you paste you full code of your tab-panel and controller. Let me try to execute yours.

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Location
    Bangalore
    Posts
    113
    Vote Rating
    0
      0  

    Default

    Currently I am doing like this

    Ext.Viewport.setActiveItem('vos_5point_abcde');
    Ext.getCmp('vos_5point_abcde').setActiveItem(0);

    Which works for me.
    But not sure.. that is a right way to do it.
    -Ram

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Location
    Germany
    Posts
    5
    Vote Rating
    1
      0  

    Default

    Do you want to always activate the 3rd tab when navigating to the tap panel or only the first time?

    In both cases you can try to work with a listener:

    Code:
    Ext.define('MyApp.view.Main', {    extend : 'Ext.tab.Panel',
        alias : 'widget.mytest1',
        
        config : {
            fullscreen : true,
            id : 'mytest1',
            itemId : 'mytest1',
            items : [{
                        xtype : 'panel',
                        title : 'A',
                        html : 'test a',
                        id : 'id_a'
                    }, {
                        xtype : 'panel',
                        title : 'B',
                        html : 'test b',
                        id : 'id_b'
            }],
            listeners : {
                initialize : function(tabpanel, eOpts) {
                    tabpanel.setActiveItem(1);
                }        
            }
        }
    });

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •