Question

I have a nestedList with a few levels that appears when the user presses a button on the screen. When the nestedList appears, there is no back button (because we’re at the top of the tree, so understandably there is nowhere to go back to), whereas tapping on items in the list takes you to screens with a back button.

I’d like to add a back button to the first screen. I have managed to do this, but not without adding the same back button to every sublist in the nestedList – this has the effect of 1 back button at the top level, and 2 back buttons (one to take you out of the nestledList completely, and one to take you up a level) at every subsequent level.

Can anyone help me figure out how to have 1 back button on each screen, including the top level to close the list?

Many thanks

PS a nasty workaround that I’m using at the moment is to have a “close” button in the top right of every screen instead.

Answer 1

I don’t know how comfortable you are with the inner workings of Sencha Touch so how you go about doing this is up to you–

The back button is there, hidden, when the nested list is shown (created in the initComponent function with hidden: true), and then onBackTap, onItemTap and setActivePath will all call syncToolbar near the end of their functions which is where the back button is hidden when you are at a depth of 0.

So there are 2 places you need to do something about, first is initComponent which is easy– just implement initComponent in your nestedList, call the superclass’ initComponent and then set the backButton visible

var myNestedList = new Ext.NestedList({
  ...,
  initComponent: function() {
    myNestedList.superclass.initComponent.call(this);
    this.backButton.setVisible(true);
  },
  ...
});

That takes care of showing it intially.. how you care to deal with fixing syncToolbar is up to you. You can use Ext.override, you can straight up copy and paste the whole syncToolbar function into your nestedList object which would also override it or you could do what you’re told never to do and just edit the sencha-touch.js file directly. However you decide to do it, what you’re looking to change is

syncToolbar: function(card) {
  ...
  backToggleMth = (depth !== 0) ? 'show' : 'hide';

  if (backBtn) {
    backBtn[backToggleMth]();
    if (parentNode) { 
      backBtn.setText(backBtnText); 
    }
  }
  ... };

You can either change backToggleMth to = 'show' or just delete the if (backBtn {...} all together.