1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    Bangalore
    Posts
    113
    Vote Rating
    0
    kramprabhu is on a distinguished road

      0  

    Default Tap panel jump

    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
    393
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Something like this

    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
    kramprabhu is on a distinguished road

      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
    393
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default strange

    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
    kramprabhu is on a distinguished road

      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
    kramprabhu is on a distinguished road

      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
    lkloeppel is on a distinguished road

      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);
                }        
            }
        }
    });

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    393
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Better way...

    Better way...


    Looking at my code again I realise my way is not 'best practice'. Correct me if I'm wrong but I think in the controller there should be a ref to the tabpanel in there too. Perhaps there is a better way of calling it (although it works for me)?

Thread Participants: 2

Tags for this Thread