Question

I have a tabpanel with items of nestedlists. Each nested list goes several levels deep. If I drill down one of the nested list, then i click on a different item in the tabpanel, then click back to it, the nested list is still drilled down, instead of refreshing to the top level of the nested list.

How do I get the nestedlist to display the top level instead of the drilled down level everytime I return to it?

Additional Info
OK, I’m part way there. Here’s the code I have now:

     var tabBar = new Ext.TabPanel({
        fullscreen: true,
        id : 'footer',
        cardSwitchAnimation:false,

          listeners: {

                  cardswitch: {
                           fn: function() { 
                                  Ext.getCmp('footer').getActiveItem().setActiveItem(0);
                             }
                        }
          },

        tabBar: {
           dock: 'bottom'
        },
        items: [/* some nestedlist components */]
     });

So the final problem is that everytime I cardswitch, I see the “drillup/slideback” animation of the nested list sliding back or drilling back to the top level item. How do I get it to just show the top level item without this drill up/slide back animation? I want to preserve the slide forward and drill down animation when the user drills down the nestedlist.

Answer 1

You can try to set the cardSwitchAnimation parameter to false in the setActiveItem method

[UPDATE] Deselect item

Add an event listener for the item tap event on the nested list

nestedList.on("itemtap", function(nestedlist, index, item, e){setTimeout(function(){nestedlist(index);},500);}, this);

[UPDATE] From John

For some reason your code didn’t do anything for me. But this one worked:

var nestedList = new Ext.NestedList({
      store: store,
      listeners: {
        itemtap: function(dv, ix, item, e) {
            // Clear the selection soon
            setTimeout(function(){dv.deselect(ix);},500);
        }
    }
});