1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    15
    Vote Rating
    0
    bcichowlas is on a distinguished road

      0  

    Default Unanswered: Under certain circumstances, my navigation Back Button disappears

    Unanswered: Under certain circumstances, my navigation Back Button disappears


    The code is all here: https://github.com/bcichowlas/ez.git

    I'm using Architect with Touch 2.2. latest version.

    I've only seen this fail in Android.

    And, even then, it fails on the Samsung Galaxy S4 with one of its builtin browsers (Chrome) but not the other (written by Samsung?). Of course, one doesn't know which browser the user will have chosen the first time a browser choice is offered on the phone. The one on the left is Chrome, so I suspect most uncertain users would go with that.


    And, in general, Chrome is probably the better choice since it has a reputation of supporting HTML5 better than other mobile browsers. However, in this case it seems to fail.


    Start the application.


    It is programmed to let you click on either the button ("Button2") or the bar chart image below. They both run the exact same Sencha code:


    var panel = Ext.create('MyApp.view.MyPanel', {
    title: 'My Panel',
    html:""
    });


    var mainNav = image.getParent().getParent().getParent();


    mainNav.push(panel);



    If you click on the button, you will always a new panel with a Back Button next.


    If you click on the bar chart with certain browsers, sometimes you will see the Back Button and sometimes not. That's the problem, but you can still click on where the back button should be and it will work, just as though it were invisible but working.


    It never seems to fail the first time, but after that it fails for me about half the time. Note that sometimes you will see the Back button appear momentarily AFTER you click the phantom button.

    The crucial difference seems to be that one is a button and the other is an image.

    Some actual screenshots from a Samsung Galaxy S4 phone are attached.
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,532
    Vote Rating
    871
    Answers
    3564
    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 personally have not seen this fail at all and should be no reason to fail. What ST 2.x.x are you using and have you inspected the DOM to see if the button is actually there just no size?
    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
    Jan 2012
    Posts
    15
    Vote Rating
    0
    bcichowlas is on a distinguished road

      0  

    Default


    I'm using Architect 2.2.2 Build 991 and building for "Sencha Touch 2.2.x". I just checked and this is the current release.

    The script that it generates in app.html seems to call for sencha-touch-2.2.1/sencha-touch-all.js" .

    My first inclination was to look at the DOM as well, but how would I do that when the problem only shows up working in the mobile browser version of Chrome, possibly only on the Galaxy s4 since I have no other similar phones to try?

    Thanks,
    Bruce

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,532
    Vote Rating
    871
    Answers
    3564
    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


    Use a remote debugger, Chrome on Android has remote debugging built in.
    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.

  5. #5
    Sencha User
    Join Date
    Jan 2012
    Posts
    15
    Vote Rating
    0
    bcichowlas is on a distinguished road

      0  

    Default


    Thanks. I haven't done remote debugging with Android Chrome before but I think I will be able to give it a try later today.

    Are there any particular things I should be looking for in the DOM?

  6. #6
    Sencha User
    Join Date
    Jan 2012
    Posts
    15
    Vote Rating
    0
    bcichowlas is on a distinguished road

      0  

    Default


    I was able to reproduce the problem while running the Chrome remote debugger since it fails most of the time.

    Here's what I found. I was trying to expand the element and the css so that I could find the problem. Since I can only attach five files, I will break this into two posts. This one shows screen shots from the device. The other will show screenshots from the debugger.

    The first four shots show drill downs while the Back button is not appearing when it should. The first is as far in as I could go and then they go succesively outward. The corresponding debugger display will be in my next post. The very last one is the same info as the fourth, except that this is taken for comparison from a case in which the Back button does appear. (Sometimes it fails and sometimes it doesn't.) To me, it looks the same, at least in the details shown. But I think the most interesting information will be in the next post.
    Drill Down on device 3.jpgDrill Down on device 2.jpgDrill Down on device 1.jpgDevice while not showing Back.jpgDevice while showing Back.jpg

  7. #7
    Sencha User
    Join Date
    Jan 2012
    Posts
    15
    Vote Rating
    0
    bcichowlas is on a distinguished road

      0  

    Default


    I put titles on these screens which I think you can see as you hover over the screenshots. I think the last screenshot is the most interesting. In order they are:
    1) Drilling down as far as I could with the debugger (matches first three device screenshots in the last post)
    2) The debugger when the Back button is not showing
    3) The debugger when the Back button is showing.
    4) The sensitive checkmark: Note the checkmark circled in red. I don't have much experience with the Chrome mobile debugger, but it would seem that when you hover over the element items on the right, they are checked, but you can remove the check and turn it back on to learn about your DOM and CSS.

    The interesting thing here is that if you are on this screen and the Back button is not showing, you can turn the checkmark off and then back on, at which point the Back button will be showing. Doesn't that mean there is something fundamentally wrong? Shouldn't the device display be in the same state after turning the checkmark off and then back on?

    If you have a Samsung Galaxy S4 and download my public project from Github, I think you will be able to replicate and examine these results. (It may well do this on other phones, too. I had only the one Android phone to try.)

    Later...I was able to try this on an iPhone 5 using the IOS version of Chrome. It never fails there. The Back button always appears whether you click on the bar chart or on the button. (On the Android S4, it always appears when you click on the button, but may or may not appear if you click on the bar chart.)

    Still later: I did a "getComputedStyle" on the BackButton on the s4 comparing when it could be seen and when it could not. There is a lot of data generated by that call, but I could not find any difference between when it was visible and when it was not.

    Thanks,
    Bruce



    Drilling down as far as I could on the debugger.jpgDebugger while Back button is showing.jpgDebugger while Back Button is not showing.jpgDebugger showing sensitive checkmark.jpg

  8. #8
    Sencha User
    Join Date
    Jan 2012
    Posts
    15
    Vote Rating
    0
    bcichowlas is on a distinguished road

      0  

    Default


    I modified the "navigationview2" example in Touch 2.2.1 to use an image rather than a list item to do the NavigationBar "push" and now it shows the same problem. On about the fourth time I clicked the image to push the Navigation Bar, the resulting screen did not have a visible Back button, even though you could still click it.

    I only changed Main.js slightly and added MyPanel.js . Here is the modified Main.js

    Ext.define('AddressBook.view.Main', {
    extend: 'Ext.navigation.View',
    xtype: 'mainview',


    requires: [
    'AddressBook.view.Contacts',
    'AddressBook.view.contact.Show',
    'AddressBook.view.contact.Edit',
    'AddressBook.view.MyPanel'
    ],


    config: {
    autoDestroy: false,


    navigationBar: {
    ui: 'sencha',
    items: [
    {
    xtype: 'button',
    id: 'editButton',
    text: 'Edit',
    align: 'right',
    hidden: true,
    hideAnimation: Ext.os.is.Android ? false : {
    type: 'fadeOut',
    duration: 200
    },
    showAnimation: Ext.os.is.Android ? false : {
    type: 'fadeIn',
    duration: 200
    }
    },
    {
    xtype: 'button',
    id: 'saveButton',
    text: 'Save',
    ui: 'sencha',
    align: 'right',
    hidden: true,
    hideAnimation: Ext.os.is.Android ? false : {
    type: 'fadeOut',
    duration: 200
    },
    showAnimation: Ext.os.is.Android ? false : {
    type: 'fadeIn',
    duration: 200
    }
    }
    ]
    },


    items: [
    {
    xtype: 'image',
    height: 201,
    itemId: 'myimg',
    src: 'resources/images/headshots/1.jpeg'
    }
    //,{ xtype: 'contacts' }


    ],
    listeners: [
    {
    fn: 'onMyimgTap',
    event: 'tap',
    delegate: '#myimg'
    }
    ]
    },


    onMyimgTap: function(image, e, eOpts) {
    console.log('onMyimgTap');
    var panel = Ext.create('AddressBook.view.MyPanel', {
    title: 'My Panel',
    html:""
    });


    var mainNav = image.getParent();


    mainNav.push(panel);


    }




    });

    and here is the added MyPanel.js (added to the 'view' subdirectory):



    Ext.define('AddressBook.view.MyPanel', {
    extend: 'Ext.Panel',


    config: {
    layout: {
    type: 'fit'
    },
    items: [
    {
    xtype: 'list',
    itemTpl: [
    '<div>*{field}*</div>'
    ],
    store: 'MyStore'
    }
    ]
    }
    });

  9. #9
    Sencha User
    Join Date
    Jan 2012
    Posts
    15
    Vote Rating
    0
    bcichowlas is on a distinguished road

      0  

    Default


    I don't mean to be rude or ungrateful, but my client absolutely needs to run on devices like the best-selling Android Galaxy S4 and not being able to navigate by clicking on images within a navigation view environment is a big deal. It seems a pretty fundamental issue.

    That's why I've furnished additional info from remote debugging and even shown the problem within the context of a supplied Sencha example to try to mitigate the risk that it is just my coding error.

    But I appreciate that the Sencha support given is free and voluntary. I need to judge for my client whether the forum is likely to be of help on this or not. Does not hearing anything in two days mean my issue is dead or is there likely to be further attention shortly? I just need something to tell my client one way or the other.

    Thanks,
    Bruce