1. #1
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    Answers
    6
    cyberwombat is on a distinguished road

      0  

    Default Unanswered: Button ID not reinstated on navigationview slide

    Unanswered: Button ID not reinstated on navigationview slide


    I have a weird issue which I think is a bug.

    I have a navigationview with 2 cards (controller/view combos) and a tabbar to navigate.

    In first view I have a button:

    Code:
    {
        xtype: 'button',
        iconCls: 'd',
        iconMask: true,
        itemId: 'ride',
        id: 'ride',
        flex: 1,
    },
    On initial load the ID (ride) is there. But if I slide out and back in the ID is lost - the rest such as iconCls stays - I am attaching shots of the DOM before and after

    Screen Shot 2012-01-08 at 5.25.44 PM.pngScreen Shot 2012-01-08 at 5.26.06 PM.png

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


    Is a new button being created?
    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 cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    Answers
    6
    cyberwombat is on a distinguished road

      0  

    Default


    I see your drift - meaning the ID is already used so it creates a new ID. After inspecting it appears that I have a double view - the one I came from and the same one I come back to. I suppose it could be a result of how I create new views so I will look into that. Thanks for suggestion - this may explain a host of other nav issue

  4. #4
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    Answers
    6
    cyberwombat is on a distinguished road

      0  

    Default


    So looking at this I see that my nav system (which used to be a cards layout until navview appeared in ST) no longer works. Here are the issues I am facing that are causing new cards to be created instead of old ones being reused.

    What I do is check if the card to navigate to is already in the items array of the main view.


    Code:
     
    var mainview = this.getMain();var items = d.getItems();
    var pos = i.items.indexOf(newviewinstance);
    //var pos = i.indexOf(newviewinstance);
    pos always returns -1 even if the view is already loaded. One thing that I notice is that getItems doesn't return an array - I have to do getItems().items to actually get the items.

    But either method returns -1 so I am missing something - this worked with the old card view.

    Is there an easy way to tell if a view is already in getItems? maybe I missed the method in the docs

  5. #5
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    Answers
    6
    cyberwombat is on a distinguished road

      0  

    Default


    Ok so I am not able to figure out how to navigate the new navigationview without recreate views everytime - I can destroy old ones but can't seem to figure out how to tell if a view already exists and how to go to it.

    What I am doing is comparing titles of views in getItems agains my new one - tried to do an items.indexOf(newview) but that doesn't work for me anymore.

    Can someone post an example of how to navigate this please? I currently fire a navigation event which has the instance of the new view - that event handler is what should determine what to push/go to

    Thanks

  6. #6
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    Answers
    6
    cyberwombat is on a distinguished road

      0  

    Default


    I may be misunderstanding the purpose of navigationview - after playing with it it doesn't seem possible to use setActiveItem (doesn't change view) and push always creates a new view. I guess I assumed it was some kind of stack that I could navigate but perhaps its just to keep track of history? Makes navigation difficult though - I think I have to search the items for a view that matches and destroy it and recreate it

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


    push() uses setActiveItem so if you pass in a config object, it will create a new view. If you pass an actual class instance, it should go to that instance.
    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 cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    Answers
    6
    cyberwombat is on a distinguished road

      0  

    Default


    Nah - I give it a new instance and it creates a new entry every time - so the stack keeps getting bigger as I navigate the app. I wonder if something in my view creation is causing the system to think of it as a new view - I would think that it goes by the class definition name (i.e. App.view.Something) but if that's the case there must be issues

  9. #9
    Sencha User cyberwombat's Avatar
    Join Date
    Oct 2011
    Posts
    237
    Vote Rating
    2
    Answers
    6
    cyberwombat is on a distinguished road

      0  

    Default


    When I switch panels (using buttons, or a tabbar) I fire an navigate event and give it a config which includes my view name. The event handler here (where d.view would be the name of a view such as "Dashboard")

    Code:
     onNavigate: function(d) {
    
    
            var e = this;
            var a = d.view,
            c = this.getController(a),
            v;
            v = c.getView(a).create();
            console.log(e.getMain().getItems().getCount());
            e.getMain().push(v);
    
    
        },
    If U use my tabbar to go back and forth between 2 views my count in the console increments all the time - it never reuses anything

  10. #10
    Sencha User blakdronzer's Avatar
    Join Date
    Jan 2011
    Location
    Mumbai, India
    Posts
    27
    Vote Rating
    0
    Answers
    3
    blakdronzer is on a distinguished road

      0  

    Thumbs up


    Hi cyberwombat,

    Maybe the code below will help you on the same as how i managed to handle the creation / deletion of the views. This did help me and may help u too

    Code:
    
    Ext.define('App.controller.Viewport', {
        extend : 'Ext.app.Controller',
        refs : [
            {
                ref      : 'main',                          //Will create a getter method on the controller getViewport, notice case
                selector : '[xtype="myapp-viewport"]'
            }
        ],
    
    
        init: function() {
            this.control({
                'myapp-viewport' : {
                    activeitemchange : 'handleItemChange'
                },
                'myapp-viewport button[ui=back]' : {
                    tap            : 'handleBack'
                },
                'myapp-viewport button[ui=home]' : {
                    tap            : 'handleHome'
                }
            });
        },
    
    
        /**
         * This will handle when a new item under the viewport is changed. This will hide/show the button based on
         * if the newCard is the ListWrap class. It will also remove the oldCard if the newCard is the ListWrap
         * so that the DOM is kept lightweight since we won't need the oldCard.
         */
        handleItemChange: function(viewport, newCard, oldCard) {
            //console.log('handling item change..');
            var isFirst = newCard.isXType('myapp-servicelistitems'),
                backBtn = viewport.down('button[ui=back]'),
                homeBtn = viewport.down('button[ui=home]');
    
    
            backBtn.setHidden(isFirst);
            homeBtn.setHidden(isFirst);
            if (isFirst) {
    //            console.log(viewport.getItems().items.length);
    //            console.log(oldCard);
    //            viewport.remove(oldCard);
            }
        },
    
    
        /**
         * This will take you back to the first inner item which is going to be the ListWrap instance.
         * Will also set the title back to the defaultTitle setup on the docked toolbar.
         */
        handleHome: function() {
            this.navigateTo("myapp-servicelistitems");
        },
    
    
    
    
        /**
         * This will take you back to the first inner item which is going to be the ListWrap instance.
         * Will also set the title back to the defaultTitle setup on the docked toolbar.
         */
        handleBack: function() {
            var me            = this,
                mainView      = this.getMain();
            var lastItem;
            for(i=0; i < mainView.getItems().length; i++) {
                console.log(i + ") - " + mainView.getAt(i).xtype);
                lastItem = mainView.getAt(i);
            }
            //mainView.remove(mainView.getItems().length-1,true);
            Ext.Function.defer(function(){
                mainView.remove(lastItem,true);
            }, 100);
            previousCard = mainView.getAt(mainView.getItems().length-2).xtype;
            this.navigateTo(previousCard, backward_dir);
            //console.log("handleBack: Current Card XType being set @" + curCard.xtype);
            //viewport.setActiveItem(curCard);
            //console.log("All done!!! - All Set");
        },
    
    
        navigateTo : function(newView,anim) {
            var me            = this,
                mainView      = this.getMain(),
                mainViewItems = mainView.items;
            view = Ext.Viewport.down(newView);
    
    
            if(!view) {
                //console.log(newView + " not yet available");
                view = mainView.add({
                    xtype: newView
                });
            }
    
    
            //mainView.getLayout().setAnimation({type: 'slide', direction: 'left'});
            //cnt.getLayout().getAnimation().setReverse(true);
            if(anim && anim.type){
                mainView.getLayout().setAnimation(anim);
            } else {
                mainView.getLayout().setAnimation({
                    type : 'fade'
                });
            }
            var oldItem = Ext.Viewport.getActiveItem();
            mainView.setActiveItem(view);
            //oldItem.destroy();
        }
    });