Hi all,

I have a problem with nested lists within tab panel. Basically, tab panel has three tabs, each tab has a nested list.
The thing I want to implement is to remember the 'back' button, if you click on an item at first tab ('real time news') and display the details card, 'back' button appears. From this view, you may change the tab (to lets say 'market news'), and it will display that nested list in 'market news' tab. Now, if you return to previous tab ('real time news') it should check if the listIndex is 1, and if it is, it should display 'back' button back again (with the specific handler for it).

The implementation of nested lists is like this (and it is the same for all three lists)
Code:
    _nlRealTimeNews = new Ext.NestedList({
        fullscreen: true,
        store: _realTimeNewsStore,
        scroll: 'vertical',
        useToolbar: false,
        getDetailCard: function(record, parentRecord) {
            return new Ext.Panel({

        })
    },
    getItemTextTpl: function(node) {
        return '<div class="nested-list-item">' +
                 '<div class="image">' +
                     '<img src="{ImageUrl}" alt="{Tweet}" style="display:none;" onload="$(this).fadeIn();" />' +
                 '</div>' +
                 '<div class="title">' +
                     '{Tweet}' +
                 '</div>' +
                 '<div class="datetime">' +
                     '{DateTime}' +
                 '</div>' +
             '</div>';
    }
});

_nlRealTimeNews.on('cardswitch', function(list, newCard, oldCard, index) {
    _settings.latestNews.realTimeNews.listIndex = index; //remember listIndex, didnt know how to get this information from 'newCard.getActiveItem()...'
    if (index == 1) {
        newCard.update(_settings.dataStore.LatestNews.RealTimeNews.Article[_settings.latestNews.realTimeNews.selectedIndex].Content);
        // call function to show 'back' button and pass the handler for it
        dfx.fn.showMainBackButton(function() {
            _nlRealTimeNews.listIndex = 1;
            _nlRealTimeNews.onBackTap(); // sometimes not working
        });
    }
});

_nlRealTimeNews.on('itemtap', function(list, index, item, e) {
    _settings.latestNews.realTimeNews.selectedIndex = index;
});
The thing to pay attention here is 'cardswitch' event, after updating the details card content, I am calling a function to show 'back' button on the top toolbar, passing an event handler for that button. Event handler specifies which list needs to be reset to listIndex 0.

And for the main tab panel (which holds all three nested lists) is also defined 'cardswitch' handler:
Code:
    _container.on('cardswitch', function(sender, newCard, oldCard, index) {
        var displayBackButton = false;
        switch (newCard.title) {
            case button1: // button1, button2, button3 are global string variables
                // real time news
                if (_settings.latestNews.realTimeNews.listIndex == 1) {
                    displayBackButton = true;
                    dfx.fn.showMainBackButton(function() {
                        _nlRealTimeNews.listIndex = 1;
                        _nlRealTimeNews.onBackTap();
                    });
                }
                break;
            case button2:
                // market news
                if (_settings.latestNews.marketNews.listIndex == 1) {
                    displayBackButton = true;
                    dfx.fn.showMainBackButton(function() {
                        _nlMarketNews.listIndex = 1;
                        _nlMarketNews.onBackTap();
                    });
                }
                break;
            case button3:
                // forecasts
                if (_settings.latestNews.forecasts.listIndex == 1) {
                    displayBackButton = true;
                    dfx.fn.showMainBackButton(function() {
                        _nlForecasts.listIndex = 1;
                        _nlForecasts.onBackTap();
                    });
                }
                break;
        }
        if (!displayBackButton)
            dfx.fn.hideMainBackButton();
    });
Now, the strangest thing is that this works only if i go step by step (enter details card of some list, 'back' button appears at the top, and when I click it, it goes back to listIndex 0), but does not work when I enter to details card of more than 1 list, like:
- Tab1: click any item, details card appears along with the button
- I click on Tab3 (for example) and enter details card, 'back' button remains at the top, but with a different handler (the handler changes for the currently displayed list)
- I go back to Tab1, (when Tab1 displays, handler changes for the 'back' button) and after I click the 'back' button, list goes back to listIndex 0 (which is ok)
- Then I go back to Tab3, click on the 'back' button, button disappears, nothing happens.


Does anyone of you guys have an idea why is this happening?

Thanks in advance.

- Aleksandar