Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1386 in a recent build.
  1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Vote Rating
    1
    jwjiwon is on a distinguished road

      0  

    Default [ST2 PR3] + [Android] Navigation View Issue

    [ST2 PR3] + [Android] Navigation View Issue


    REQUIRED INFORMATION


    Ext version tested:
    • Sencha Touch 2
    Browser versions tested against:
    • Android 2.2 simulator
    Description:
    • I made a navigation view with tab bar docked bottom.
      whenever tab bar tab changed, event controller will push new panel into the navigation view. It works great in google chrome or others (even blackberry simulator works) but the new panel that is pushed into the navigation view doesn't show up in Android simulator.


    The result that was expected:
    • the Normal Panel show up when active tap is changed.
    The result that occurs instead:
    • it doesn't in Android
    Test Case:


    This is control part
    Code:
     Ext.define('JOY.controller.Joy',{
        extend: 'Ext.app.Controller',
        views: [
            'Main',
            'Home',
            'NormalPanel'
        ],
        
       
        refs: [
        {
            ref: 'main',
            selector: 'mainview',
            xtype: 'mainview',
            autoCreate: true
        },
        {
            ref: 'home',
            selector: 'home',
            xtype: 'home',
            autoCreate: true
        }
        {
            ref: 'normalPanel',
            selector: 'normalpanel',
            xtype: 'normalpanel',
            autoCreate: true
        }
        ],
        
        init: function(){
            
            this.getMain().push(this.getHome());
            
    
            this.control({
                'bottomtab' :{
                    tabchange: this.bottomTabChanged
                }
            }); 
        },
        
        bottomTabChanged: function( bottomTab, newTab ){
            
            var main = this.getMain();
            //var main = Ext.ComponentQuery.query('mainview')[0];
            
            var newCard = new JOY.view.NormalPanel();
            main.push(newCard);
        
        }
    });





    HELPFUL INFORMATION



    Possible fix:
    • when I push a new normal panel into the navigation view putting all the views and controllers in a single file,
      it works fine in Chrome and Android both.
      and then I changed it into mvc version, it works fine in Chrome but sadly not in Android.
      so I thought it is about the refs ( the automated getSomething() in the controller ).
      I changed the way to get object using Ext.ComponentQuery but it doesn't seem to be related.
    • when the blue highlighted code above was just this.getMain(); it worked fine.
    • So I'm thinking it can be possibly related to mvc-navigation-android.
    chrome :
    chrome.jpg

    android:
    android.jpg

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    850
    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


    We will look into it.
    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 - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Have you tested this on a device? I cannot reproduce this.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  4. #4
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Vote Rating
    1
    jwjiwon is on a distinguished road

      0  

    Default well, new week starts. :)

    well, new week starts. :)


    Hello, again
    Nope, the server is proxy server, so I've tested just android simulator.
    I used platform 2.2.

    the above code was controller.
    this view code would make it easier for you to get an idea.

    Main.js
    Code:
    Ext.define('JOY.view.Main', {
        extend: 'Ext.NavigationView',
        xtype: 'mainview',
        requires : [
            'JOY.view.BottomTab'
        ], 
        config: {
            fullscreen: true,
               layout: {
                type: 'card',
                animation: {
                    type: 'slide',
                    direction: 'left',
                    duration: 250
                }
            },
            //useTitleForBackButtonText: true,
            navigationBar:{
                title: 'Joy.org'
            },
            items:[
                {
                    xtype : 'bottomtab'
                }
            ]
        }
        
    });
    BottomTab.js
    Code:
    Ext.define('JOY.view.BottomTab',{
        extend : 'Ext.tab.Bar',
        xtype: 'bottomtab', 
        config: {    
                    activeTab: 0,
                    layout: {
                        pack: 'center',
                        align: 'center'
                    },
                    docked: 'bottom',
                    scrollable: {
                        direction: 'horizontal',
                        indicators: false 
                    },
                    items: [{    
                                title: 'Home',
                                iconCls: 'home',
                                itemId: 'home'
                            },
                            {
                                title: 'News',
                                iconCls: 'bookmarks',
                                itemId: 'newsList'
                            },
    
    
                            {
                                title: 'Country',
                                iconCls: 'search',
                                itemId: 'country'
                            },
                            {
                                title: 'Topic',
                                iconCls: 'favorites',
                                itemId: 'topic'
                    }
                    ]
                    
                }
    });
    Home.js
    Code:
    Ext.define('JOY.view.Home', {
        extend: 'Ext.Panel',
        xtype: 'home',
        config: {
            html : 'hi nice to meet you <br> this is home!!!!!'
        }
    });
    NormalPanel.js
    Code:
    Ext.define('JOY.view.NormalPanel', {
        extend: 'Ext.Panel',
        xtype: 'normalpanel',
        config: {
            html : 'This is normal Panel'
        }
    });

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

      0  

    Default


    You cannot set the title inside the navigaitonBar configuration. The title is set by the navigation view's children.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  6. #6
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Vote Rating
    1
    jwjiwon is on a distinguished road

      0  

    Wink Ah that was the reason.

    Ah that was the reason.


    Thank you!
    Could you please tell me how can I configure the title of the tab bar in the navigation?

  7. #7
    Sencha User
    Join Date
    Dec 2011
    Posts
    14
    Vote Rating
    0
    Sewdn is on a distinguished road

      0  

    Default


    I have the same issue on my Samsung Galaxy S running Android 2.2.
    However, i don't set the title manually.
    I'm using an MVC setup as well.

  8. #8
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Vote Rating
    1
    jwjiwon is on a distinguished road

      0  

    Default ah

    ah


    I misunderstood what you meant.
    I've done what you said, still it doesn't work.

    please let me confirm this.
    [fixed] means, it will be fixed in the next version?
    if so, when it gonna be?

  9. #9
    Sencha User
    Join Date
    Dec 2011
    Posts
    14
    Vote Rating
    0
    Sewdn is on a distinguished road

      0  

    Default workaround found

    workaround found


    Seems you have to manually set the activeItem to make the android devices navigate to the correct item on the stack:

    Code:
    this.mainPanel.push(view);
    //android workaround
    this.mainPanel.setActiveItem(view);
    Hope this helps.

  10. #10
    Sencha User
    Join Date
    Dec 2011
    Posts
    56
    Vote Rating
    1
    jwjiwon is on a distinguished road

      0  

    Default It works!!

    It works!!


    It works!! thank you, Sewdn!!