Button ID not reinstated on navigationview slide

[cyberwombat]

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:

{
    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

[mitchellsimoens]

Is a new button being created?

[cyberwombat]

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

[cyberwombat]

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.

 
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

[cyberwombat]

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

[cyberwombat]

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

[mitchellsimoens]

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.

[cyberwombat]

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

[cyberwombat]

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")

 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

[blakdronzer]

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

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();
    }
});