1. #1
    Sencha User
    Join Date
    Oct 2012
    Posts
    12
    Vote Rating
    0
    Viswa317 is on a distinguished road

      0  

    Default Unanswered: How do i control sencha tabpanel navigation

    Unanswered: How do i control sencha tabpanel navigation


    I have a tabpanel with four tabs, After the application finished launching, I am showing tabpanel (first tab will be active item) and When the user trying to tap any other 3 tabs, I need to check the user logged in already or not.

    If the user didn't logged in then i need to show login layout panel and i need to set first tab as active item.

    If the user logged in then i need to 2/3/4th tab, what ever your clicked.

    I can show login overlay panel if the user didn't logged in, but changing the active item back to first tab is the problem.

    I wrote the following code at tabpanel view


    Code:
     listeners : {
        activeitemchange : function() {
            var token = localStorage.token; // user already logged in there will be a token at localStorage.
            if (token == undefined || token == '') {
                this.setActiveItem(0);
                this.getAt(0).setActiveItem('firstTab');
            }
        }
    }

    It showing error like this but, Its woking (i don't want below error, even though its working)

    Code:
    Uncaught Error: [ERROR][Ext.Container#factoryItem] Invalid config, must be a valid config object sencha-touch-all-debug.js:26029
    Ext.define.doWrite sencha-touch-all-debug.js:26029
    Ext.define.write sencha-touch-all-debug.js:18416
    Ext.define.log sencha-touch-all-debug.js:18298
    (anonymous function) sencha-touch-all-debug.js:18316
    Ext.apply.factory sencha-touch-all-debug.js:9221
    Ext.define.factoryItem sencha-touch-all-debug.js:64065
    Ext.define.applyActiveItem sencha-touch-all-debug.js:64664
    (anonymous function) sencha-touch-all-debug.js:27233
    Ext.define.config.listeners.activeitemchange /myapp/app/view/myTab.js?_dc=1365571204916:39
    Ext.define.doFire sencha-touch-all-debug.js:17322
    Ext.define.fire sencha-touch-all-debug.js:17249
    Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
    Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
    Ext.define.doFireEvent sencha-touch-all-debug.js:26577
    Ext.define.fireAction sencha-touch-all-debug.js:26566
    (anonymous function) sencha-touch-all-debug.js:27246
    Ext.define.config.listeners.activeitemchange /myapp/app/view/myTab.js?_dc=1365571204916:38
    Ext.define.doFire sencha-touch-all-debug.js:17322
    Ext.define.fire sencha-touch-all-debug.js:17249
    Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
    Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
    Ext.define.doFireEvent sencha-touch-all-debug.js:26577
    Ext.define.fireAction sencha-touch-all-debug.js:26566
    (anonymous function) sencha-touch-all-debug.js:27246
    Ext.define.doTabChange sencha-touch-all-debug.js:76619
    Ext.define.doFire sencha-touch-all-debug.js:17322
    Ext.define.fire sencha-touch-all-debug.js:17249
    Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
    Ext.define.dispatch sencha-touch-all-debug.js:58971
    Ext.define.publish sencha-touch-all-debug.js:59031
    Ext.define.doFire sencha-touch-all-debug.js:17322
    Ext.define.fire sencha-touch-all-debug.js:17249
    Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
    Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
    Ext.define.doFireEvent sencha-touch-all-debug.js:26577
    Ext.define.fireAction sencha-touch-all-debug.js:26566
    (anonymous function) sencha-touch-all-debug.js:27246
    Ext.define.onTabTap sencha-touch-all-debug.js:76344
    Ext.define.doFire sencha-touch-all-debug.js:17322
    Ext.define.fire sencha-touch-all-debug.js:17249
    Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
    Ext.define.dispatch sencha-touch-all-debug.js:58971
    Ext.define.publish sencha-touch-all-debug.js:59031
    Ext.define.doFire sencha-touch-all-debug.js:17322
    Ext.define.fire sencha-touch-all-debug.js:17249
    Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
    Ext.define.dispatchEvent sencha-touch-all-debug.js:22330
    Ext.define.doFireEvent sencha-touch-all-debug.js:26577
    Ext.define.fireAction sencha-touch-all-debug.js:26566
    Ext.define.onTap sencha-touch-all-debug.js:56146
    Ext.define.doFire sencha-touch-all-debug.js:17322
    Ext.define.fire sencha-touch-all-debug.js:17249
    Ext.define.doDispatchEvent sencha-touch-all-debug.js:22349
    Ext.define.dispatch sencha-touch-all-debug.js:17687
    Base.implement.callParent sencha-touch-all-debug.js:4516
    Ext.define.dispatch sencha-touch-all-debug.js:23074
    Ext.define.doPublish sencha-touch-all-debug.js:23116
    Ext.define.publish sencha-touch-all-debug.js:23081
    Base.implement.callParent sencha-touch-all-debug.js:4516
    Ext.define.publish sencha-touch-all-debug.js:23473
    Ext.define.onRecognized sencha-touch-all-debug.js:23457
    Ext.define.fire sencha-touch-all-debug.js:17748
    Ext.define.onTouchEnd sencha-touch-all-debug.js:24429
    Ext.define.invokeRecognizers sencha-touch-all-debug.js:23523
    Ext.define.onTouchEnd sencha-touch-all-debug.js:23672
    override.processEvent sencha-touch-all-debug.js:23744
    Ext.define.onEvent sencha-touch-all-debug.js:23350
    Base.implement.callParent sencha-touch-all-debug.js:4516
    override.onEvent sencha-touch-all-debug.js:23740
    (anonymous function) sencha-touch-all-debug.js:3128
    This is my tab panel

    Code:
      Ext.define('myapp.view.myTab', {
        extend : 'Ext.TabPanel',
        xtype : 'mytab',
        requires : [ 'myapp.view.FirstTab', 'myapp.view.SecondTab',
                'myapp.view.ThirdTab', 'myapp.view.FourthTab' ],
        id : 'mytab',
        config : {
            fullscreen : true,
            tabBarPosition : 'bottom',
            ui: 'myUI',
            items : [ {
                xtype : 'firsttab',
                iconCls : 'broadcast',
                title : 'first tab'
            }, {
                xtype : 'secondtab',
                iconCls : 'user_fave',
                title : 'second tab'
            },{
                xtype : 'thirdtab',
                iconCls : 'user3',
                title : 'third tab'
            },{
                xtype : 'fourthtab',
                iconCls : 'address_book',
                title : 'Contacts',
                id : 'Fourth Tab'
            } ],
            listeners : {
                activeitemchange : function() {
                    var token = localStorage.token;
                    if (token == undefined || token == '') {
                        this.setActiveItem(0);
                        // this.getAt(0).setActiveItem('firsttab');
                    }
                }
            }
        }
    });

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What is the first item of the firsttab xtype?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Posts
    12
    Vote Rating
    0
    Viswa317 is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    What is the first item of the firsttab xtype?
    Yes, xtype

  4. #4
    Sencha User
    Join Date
    Oct 2012
    Posts
    12
    Vote Rating
    0
    Viswa317 is on a distinguished road

      0  

    Default


    No help yet ?

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm waiting for an answer to my question
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Oct 2012
    Posts
    12
    Vote Rating
    0
    Viswa317 is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    What is the first item of the firsttab xtype?
    Code for firsttab view

    Code:
    Ext.define('myapp.view.FirstTap', {
        extend : 'Ext.Panel',
        itemId : 'firsttab',
        xtype : 'firsttab',
        models : ['Arounds'],
        config : {
            layout : {
                type : 'vbox',
            },
            listeners : {
                activate : function() {
                    this.fireEvent('refreshMe', this);
                }
            }
        },
    
    
        initialize : function() {
            this.callParent(arguments);
            var topToolbar = {
                xtype : 'toolbar',
                docked : 'top',
                id : 'FirstTapTool',
                title : 'FirstTap',
                items : [{
                    xtype : 'spacer'
                }]
            };
            var firstTapList = {
                    xtype : 'panel',
                    flex : 1,
                    layout : 'fit',
                    id : 'firsttapList'
                };
    
    
            this.add(topToolbar);
            this.add(firstTapList);
    
    
        },
        onRepliesListDisclose : function(list, record) {
            this.fireEvent('messageClicked', this, record);
        }
    });

  7. #7
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Ok, just from this code there shouldn't be any issue. Although I'm not sure why you are adding items in initialize and not setting them in the items config in the config object.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #8
    Sencha User
    Join Date
    Oct 2012
    Posts
    12
    Vote Rating
    0
    Viswa317 is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    Ok, just from this code there shouldn't be any issue. Although I'm not sure why you are adding items in initialize and not setting them in the items config in the config object.
    Is there a big difference between adding in config and adding in initialize ?

  9. #9
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,633
    Answers
    3452
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Unneeded performance hit
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.