Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    4
    Vote Rating
    0
    tpae is on a distinguished road

      0  

    Default [2.1.0] Navigation.View throwing error when animation set to false

    [2.1.0] Navigation.View throwing error when animation set to false


    How to reproduce the problem:

    Using Sencha 2.1.0

    First, set animation to false on Ext.Navigation.View

    Code:
    layout : {    animation: false    },
    Then keep push/pop view until see this error:

    Code:
    Uncaught TypeError: Cannot read property 'style' of undefined -- From line 10 of src/util/translatable/CssTransform.js
    Can't see the bug unless it's experiencing minor latency, try pushing a view that takes a few moments to load.

    When the bug is observed, the Navigation.View stops functioning, can't push/pop views. Back button does not disappear.

    Observed on:
    • Galaxy S (Android 2.2)
    • Galaxy S II LTE (Android 4.1)
    • iPhone 4 (iOS 5.1)
    Possible fix:

    On line 10 of CssTransform.js file:
    Code:
        doTranslate: function() {
            if (this.getElement().dom != undefined)
            this.getElement().dom.style.webkitTransform = 'translate3d(' + this.x + 'px, ' + this.y + 'px, 0px)';
        },
    After adding the code, didn't observe any other issues.

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Posts
    4
    Vote Rating
    0
    tpae is on a distinguished road

      0  

    Default


    Same problem, but different error:

    Code:
    Uncaught TypeError: Cannot call method 'getParent' of null -- From line 28 of src/util/translatable/ScrollPosition.js
    Possible fix:

    On line 24, check to see if element is null.

    Code:
    if (!element) {
    return null;
    }

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


    Can I get a testcase to reproduce this? I don't get the error with this:

    Code:
    Ext.Viewport.add({
        xtype  : 'navigationview',
        layout : {
            animation : false
        },
        items  : [
            {
                title : 'Home',
                html  : 'home',
                items : [
                    {
                        xtype   : 'button',
                        text    : 'Push View',
                        handler : function(btn) {
                            var view   = btn.up('navigationview'),
                                fields = [],
                                i      = 0;
    
                            for (; i < 200; i++) {
                                fields.push({
                                    xtype : 'sliderfield'
                                });
                            }
    
                            view.push({
                                title : 'foo',
                                items : fields
                            });
                        }
                    }
                ]
            }
        ]
    });
    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.

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    4
    Vote Rating
    0
    tpae is on a distinguished road

      0  

    Default


    Hello,

    I found out that it actually has to do with scrolling.

    While scrolling inside pushed window, press back button.

    It doesn't happen first time, but it happens often enough if you keep trying it.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
    OtteVbeek is on a distinguished road

      0  

    Default


    Quote Originally Posted by tpae View Post
    How to reproduce the problem:

    Using Sencha 2.1.0

    First, set animation to false on Ext.Navigation.View

    Code:
    layout : {    animation: false    },
    Then keep push/pop view until see this error:

    Code:
    Uncaught TypeError: Cannot read property 'style' of undefined -- From line 10 of src/util/translatable/CssTransform.js
    Can't see the bug unless it's experiencing minor latency, try pushing a view that takes a few moments to load.

    When the bug is observed, the Navigation.View stops functioning, can't push/pop views. Back button does not disappear.

    Observed on:
    • Galaxy S (Android 2.2)
    • Galaxy S II LTE (Android 4.1)
    • iPhone 4 (iOS 5.1)
    Possible fix:

    On line 10 of CssTransform.js file:
    Code:
        doTranslate: function() {
            if (this.getElement().dom != undefined)
            this.getElement().dom.style.webkitTransform = 'translate3d(' + this.x + 'px, ' + this.y + 'px, 0px)';
        },
    After adding the code, didn't observe any other issues.
    Thank you very much! Your 'possible fix' works for me.

    In my situation it had nothing to do with setting the animation configuration to false, but with the following:

    In my application I use one main view (Tabpanel). My main view has 4 items in it that extend Ext.Container. To each of these items I added listeners: activate and deactivate. On activate it 'lazy loads' the needed child elements. On deactivate it triggers: this.removeAll(true), which removes all child elements. I do this to keep the DOM as small as possible.

    Now where it goes wrong:
    When I activate one of the items in Tabpanel, then scroll down and activate another item from the Tabpanel (while the item is still scrolling) I get the following error:
    Code:
    Cannot read property 'style' of undefined in CssTransform.js.
    I discovered this doesn't happen al the time. In my case it only happens when the scrolling animation is almost finished (when the scrollbar is bumping back from the top or bottom after it reached his end point).

    After modifying CssTransform.js with the given fix it's now longer a problem.

    Could this be implemented into Sencha?