Sencha Touch连续列表浏览双后退按钮问题

Question

上图显示了我的Sencha Touch应用程序的当前结构。我的详细信息页最终有2个后退按钮，因为用户通过2个列表视图进入详细信息视图。

我正在寻找一个解决方案，它会在详细信息视图中放置一个返回按钮，返回到空缺列表。空缺列表将有自己的后退按钮，可以返回到部分列表。

Answer 1

使用Ext.navigation.View。它将处理所有视图过渡，并为您创建一个后退按钮。您所要做的就是将列表推送到其中。

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 );
    }
});

点击选择列表的公开按钮会将新的空缺列表推送到导航视图中。由于导航视图堆栈现在有两个视图，因此它将创建一个后退按钮，让一个人弹出空缺列表并返回选择列表。

当一个人点击空缺列表披露按钮时，会发生相同的程序。

代码假设您已经在某处创建了导航视图，并且您的选择记录包含空置商店的ID。