Sencha Touch consecutive listviews double back buttons issue

Question

enter image description here

The image above shows the current structure of my Sencha Touch app. My details pages end up with 2 back buttons because a user goes through 2 listviews to get to the details view.

I am looking for a solution which will put a single back button on the details view which goes back to the vacancies list. And the vacancies list will have it's own back button which goes back to the sections list.

Martin Martin · Accepted Answer · 2014-07-19T04:06:17

Use an Ext.navigation.View. It will handle all the view transitions and will create a back button for you. All you have to do is pushing your lists into it.

Ext.create("Controller", {
    extend: "Ext.app.Controller",

    refs: {
        navigationView: "navigationview",
        sectionList: "list[itemId='sectionlist']",
        vacancyList: "list[itemId='vacancylist']"
    },
    control: {
        sectionList: {
            sectionSelected: "handleSectionSelection"
        },
        vacancyList: {
            vacancySelected: "handleVacancySelection"
        }
    },

    handleSectionTap: function () {
        var sectionList = Ext.create("Ext.List", {
            itemId: "sectionlist",
            store: "sectionStore",
            itemTpl: "{name}",
            onItemDisclosure: function ( list, record ) {
                this.fireEvent( "sectionSelected", record );
            }
        });

        var navigationView = this.getNavigationView();
        navigationView.push( sectionList );
    },

    handleSectionSelection: function ( record ) {
        var vacancyList = Ext.create("Ext.List", {
            itemId: "vacancylist",
            store: record.get("storeId"),
            itemTpl: "{name}",
            onItemDisclosure: function ( list, record ) {
                this.fireEvent( "vacancySelected", record );
            }
        });
    },

    handleVacancySelection: function ( record ) {
        var detailView = Ext.create("DetailView");
        detailView.setRecord( record );
        var navigationView = this.getNavigationView();
        navigationView.push( detailView );
    }
});

A tap on a disclosure button of the selection list will push a new vacancy list into the navigation view. Since there are now two views on the navigationview stack it will create a back button which will let one pop the vacancy list and return to the selection list.

Same procedure will happen when one taps the vacancy list disclosure button.

The code assumes that you have already created a navigation view somewhere and that your selection record holds an id of the an vacancy store.

Sencha Touch consecutive listviews double back buttons issue

1 Answers