Sencha Touch连续listviews双后退按钮问题

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

点击选择列表的披露按钮会将新的空缺列表推送到导航视图中。由于现在在 navigationview 堆栈上有两个视图，它会创建一个返回按钮，让一个弹出空缺列表并返回到选择列表。

点击空缺列表披露按钮时会发生相同的过程。

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