Question

I would like to create an event listener to detect when my nestedlist is at the top level, and then hide a component on the page. For example:

onNestedlistActiveItemChange: function(container, value, oldValue, options) {
     if (this.getMyNestedList().atLevel(0)) <-- seudo code, does not work
           {
           Ext.getCmp('myButton').hide();
           }
    }

Thanks in advance for your help

Answer 1

The _backButton._hidden property of the nested list will return true when the default back button is hidden and false when the button is displayed. The button is hidden only when the nested list is at the top level.

The trick is to use the nested list’s “back” event, which returns the state of the toolbar after the back event has occurred:

onMynestedlistBack: function(nestedlist, node, lastActiveList, detailCardActive, options){
    if(nestedlist._backButton._hidden) {
        Ext.ComponentQuery.query('#myButton')[0].hide();
    }
}

That is, if the nested list’s back button is hidden, then the list is at the top level, so hide myButton.

There are certainly more rigorous ways to do it, but most of them would involve overriding the toolbar’s default button handling.