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

      0  

    Default Unanswered: Ext.navigation.View: Pushing too many items of same title breaks Ext.navigation.Bar

    Unanswered: Ext.navigation.View: Pushing too many items of same title breaks Ext.navigation.Bar


    Version: sencha-touch-2-b3

    Pushing too many items of same title into an Ext.navigation.View breaks backward navigation with the back button in Ext.navigation.Bar.

    GOOD
    sencha-touch-all-debug.js:70935 onBeforePop: count is 0
    sencha-touch-all-debug.js:70937 backButtonStack has 5 items.
    sencha-touch-all-debug.js:70141 onViewRemove: popping back button from backButtonStack ...
    sencha-touch-all-debug.js:70905 refreshNavigationBarProxy: proxy is [object Object]
    GOOD
    sencha-touch-all-debug.js:70935 onBeforePop: count is 0
    sencha-touch-all-debug.js:70937 backButtonStack has 4 items.
    sencha-touch-all-debug.js:70141 onViewRemove: popping back button from backButtonStack ...
    sencha-touch-all-debug.js:70905 refreshNavigationBarProxy: proxy is [object Object]
    BAD
    sencha-touch-all-debug.js:70935 onBeforePop: count is 0
    sencha-touch-all-debug.js:70937 backButtonStack has 3 items.

    -- no call to onViewRemove or refreshNavigationBarProxy ---

    sencha-touch-all-debug.js:70935 onBeforePop: count is 0
    sencha-touch-all-debug.js:70937 backButtonStack has 3 items.

    -- no call to onViewRemove or refreshNavigationBarProxy ---

    sencha-touch-all-debug.js:70935 onBeforePop: count is 0
    sencha-touch-all-debug.js:70937 backButtonStack has 3 items.

    -- no call to onViewRemove or refreshNavigationBarProxy ---

    Thought someone who cares should know. I can consistently reproduce this issue.

    Dan
    Last edited by dotBomb; 19 Feb 2012 at 2:21 PM. Reason: Forgot to mention version info and backstack item count.

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


    How many do you need to push before it breaks? Can I get a test case so I can report it as a bug?
    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
    32
    Vote Rating
    0
    dotBomb is on a distinguished road

      0  

    Default


    I just put the repro in the examples folder in a folder named 'preview'. Here's a link:

    http://dankemper.net/sencha-touch-2-...mples/preview/

    Directions to reproduce:

    1. Six or more times, add one of the three items available from the Ext.ActionSheet
    2. Navigate backwards until the problem presents itself.

    Dan

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,652
    Vote Rating
    901
    Answers
    3575
    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 taped on Paper Trail Designs 7 times but it never navigated forward past the first time. I then went back and no error appeared. It worked as expected.
    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
    32
    Vote Rating
    0
    dotBomb is on a distinguished road

      0  

    Default


    The code behind the buttons on the ActionSheet is smart enough to know not to display an item if it is already in the viewport. Please try random selections.

    Also, I noticed that on back transition, the header text doesn't change to reflect the item change on HTC Insight. NavigationView still not all there yet ...
    Last edited by dotBomb; 20 Feb 2012 at 8:00 AM. Reason: Clarification ...

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

      0  

    Default


    Code for reference:

    Code:
    Ext.setup({
        requires: [
            'Ext.navigation.View',
            'Ext.ActionSheet',
            'Ext.SegmentedButton',
            'Ext.Button',
            'Ext.Toolbar'
        ],
        onReady: function () {
    
    
            Ext.Viewport.addListener('orientationchange',
                function (theViewport, orientationWidth, orientationHeight, eOpts) {
    
                    // prep the notification message
                    //
                    var notificationMessage = "New orientation is: " + theViewport.getOrientation() + ", width: " + orientationWidth + ", height: " + orientationHeight + ".";
    
                    // show the new orientation 
                    //
                    Ext.Msg.alert('Change Notification', notificationMessage, Ext.emptyFn);
    
                    // try to manually set the width and height ...
                    //
                    theViewport.setWidth(orientationWidth);
                    theViewport.setHeight((orientationHeight + 1));
    
                    // repaint the entire application (no visible change noticed from the execution of this call)
                    //
                    Ext.repaint();
                });
    
            /**
            * Helpers
            */
            function isRequestedViewActive(viewName) {
                if (view.getNavBarTitle() == viewName) {
                    console.log("This particular selection is already shown.");
                    return true;
                }
                else {
                    return false;
                }
            }
    
            /**
            * Stage the overlay
            */
            var overlayToolbar = Ext.create('Ext.Toolbar', {
                docked: 'top',
                xtype: 'toolbar',
                title: 'Features'
            });
    
            var overlay = Ext.create('Ext.Panel', {
                floating: true,
                modal: true,
                hidden: true,
                hideOnMaskTap: true,
                height: 300,
                width: '70%',
                contentEl: 'content',
                styleHtmlContent: true,
                scrollable: true,
                items: [overlayToolbar]
            });
    
            /**
            * navigation.View item factory method
            */
            function createChildContainer(viewTitle, viewItemId, viewHtml, imagesArry) {
                return Ext.create('Ext.Container', {
                    title: viewTitle,
                    itemId: viewItemId,
                    layout: {
                        type: 'vbox',
                        align: 'stretch'
                    },
    
                    padding: '0 1 1 1',
    
                    items: [
                            {
                                xtype: 'panel',
                                html: viewHtml
                            },
                            {
                                flex: 1.5,
                                xtype: 'carousel',
                                direction: 'horizontal',
                                directionLock: true,
                                items: [
                                {
                                    xtype: 'image',
                                    cls: 'my-carousel-item-img',
                                    src: imagesArry[0]
                                },
                                {
                                    xtype: 'image',
                                    cls: 'my-carousel-item-img',
                                    src: imagesArry[1]
                                },
                                {
                                    xtype: 'image',
                                    cls: 'my-carousel-item-img',
                                    src: imagesArry[2]
                                }
                            ],
                                itemConfig: {
                                    cls: 'my-carousel-item'
                                }
                            }
                    ]
                });
            }
    
            /**
            * Create an instance of Ext.navigation.View, which is fullscreen so it is inserted into Ext.Viewport
            */
            var view = Ext.create('Ext.navigation.View', {
                fullscreen: true,
                useTitleForBackButtonText: true,
                listeners: {
                    orientationchange: function (theViewPort, newOrientation, orientationWidth, orientationHeight, eOpts) {
                        var notificationMessage = "New orientation is: " + newOrientation + ", width: " + orientationWidth + ".";
                        Ext.Msg.alert('Change Notification', notificationMessage, Ext.emptyFn);
                    }
                },
                items: [
                //bottom toolbar containing the settings button
                    {
                    docked: 'bottom',
                    xtype: 'toolbar',
                    ui: 'light',
                    items: [
                            { xtype: 'spacer' },
                            {
                                iconMask: true,
                                iconCls: 'settings',
                                handler: function () {
                                    //check if we can pop a view in the navigation view, if not, disable the pop button
                                    //on the action sheet
    
                                    // var popButton = optionsSheet.down('#pop');
                                    // popButton.setDisabled(!view.canPop());
    
    
                                    // var toggleButton = optionsSheet.down('#togglebackbuttontext'); // from itemId: 'togglebackbuttontext', defined on ActionSheet item ...
                                    // toggleButton.setDisabled(!view.canPop());
    
                                    //show the option sheet
                                    console.log('Showing optionsSheet now ...');
                                    optionsSheet.showBy(this);
                                    console.log('Finished showing optionsSheet ...');
                                }
                            },
                            {
                                iconMask: true,
                                iconCls: 'info',
                                handler: function () {
                                    console.log('overlayToolbar\'s title is: ' + overlayToolbar.getTitle());
                                    overlayToolbar.setTitle(view.getNavBarTitle() + ' Features');
                                    overlay.showBy(this);
                                }
                            }
                        ]
                },
                    createChildContainer('Chronicle', 'viewChronicle', '<center><div style="padding: 0.4em; width: 100%; font-size: .90em; text-align: center;">Chronicle keeps track of your time so you don\'t have to waste it remembering what you did.</div></center>', ['images/testApp.jpg', 'images/testApp2.jpg', 'images/testApp3.jpg'])
                ]
            });
    
            /**
            * A ActionSheet which is used to display various options for the Navigation View
            */
            var optionsSheet = Ext.create('Ext.ActionSheet', {
                items: [
                    {
                        xtype: 'button',
                        text: 'Chronicle',
                        iconMask: true,
                        iconCls: 'action',
                        handler: function () {
                            if (!isRequestedViewActive('Chronicle')) {
                                console.log("Pushing selected item with carousel ...")
    
                                view.push(createChildContainer('Chronicle', 'viewChronicle', '<center><div style="padding: 0.4em; width: 100%; font-size: .90em; text-align: center;">Chronicle keeps track of your time so you don\'t have to waste it remembering what you did.</div></center>', ['images/testApp.jpg', 'images/testApp2.jpg', 'images/testApp3.jpg'])); // end view.push()
                            }
    
                            //hide the sheet
                            optionsSheet.hide();
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'Paper Trail Designs',
                        iconMask: true,
                        iconCls: 'action',
                        handler: function () {
                            if (!isRequestedViewActive('Paper Trail Designs')) {
                                console.log("Pushing selected item with carousel ...");
    
                                view.push(createChildContainer('Paper Trail Designs', 'viewPaperTrailDesigns', '<center><div style="padding: 0.4em; width: 100%; font-size: 0.90em; text-align: center;">Pixel perfect graphics in contemporary design by Paper Trail Designs.</div></center>', ['images/testApp2.jpg', 'images/testApp3.jpg', 'images/testApp.jpg'])); // end view.push()
                            }
    
                            //hide the sheet
                            optionsSheet.hide();
                        }
                    },
                    {
                        xtype: 'button',
                        text: 'ReportVIEW',
                        iconMask: true,
                        iconCls: 'action',
                        itemId: 'reportviewbuttontext',
                        handler: function () {
                            if (!isRequestedViewActive('ReportVIEW')) {
                                console.log("Pushing selected item with carousel ...")
    
                                view.push(createChildContainer('ReportVIEW', 'viewReportVIEW', '<center><div style="padding: 0.4em; width: 100%; font-size: .90em; text-align: center;">Function - rich reporting in a stylized view.</div></center>', ['images/testApp3.jpg', 'images/testApp.jpg', 'images/testApp2.jpg'])); // end view.push()
                            }
    
                            //hide the sheet
                            optionsSheet.hide();
                        }
                    },
                    {
                        xtype: 'button',
                        iconMask: true,
                        iconCls: 'user',
                        text: 'Contact',
                        handler: function () {
                            //hide the sheet
                            optionsSheet.hide();
                        }
                    },
                    {
                        text: 'Cancel',
                        ui: 'decline',
                        iconMask: true,
                        iconCls: 'delete',
                        handler: function () {
                            //hide the sheet
                            optionsSheet.hide();
                        }
                    }
                ]
            });
        }
    });
    Dan

Thread Participants: 1