CODEWITHSUNDEEP
sencha-touch-2
Arkady
Arkady

Reputation: 393

Sencha Touch 2 How to Detect Top Level on Nestedlist

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

Upvotes: 0

Views: 631

Answers (2)

Nikola Lajic
Nikola Lajic

Reputation: 4075

You can get the list level by checking the index of the list

var idx = nestedlist.getInnerItems().indexOf(list);
if (idx === 0) { 
    // top level...
}

[UPDATE]

You can also check the depth level of the record

var depth = record.getData().depth;
if (depth === 1) { 
    // top level...
}

Upvotes: 0

Eric U
Eric U

Reputation: 46

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.

Upvotes: 2

Related Questions