导航视图Sencha Touch 2

问题描述

我的Sencha Touch 2中的NavigationView出现问题。
当我按下后退按钮时，我无法导航多个窗口。

I have a problem with my NavigationView in Sencha Touch 2.When I push the 'back' button, then I can't navigate more than one window.

我使用view.push（）和view.pop（）进行导航。

I navigate using view.push() and view.pop().

view.js：

Ext.define('MyApp.view.view', {
extend: 'Ext.navigation.View',
alias: 'widget.View',

config: {
    id: 'nvView',
    items: [
        {
            xtype: 'toolbar',
            docked: 'bottom',
            layout: {
                align: 'center',
                pack: 'center',
                type: 'hbox'
            },
            items: [
                {
                    xtype: 'button',
                    iconAlign: 'center',
                    iconCls: 'info',
                    iconMask: true,
                    text: 'Ayuda'
                },
                {
                    xtype: 'button',
                    iconAlign: 'center',
                    iconCls: 'compose',
                    iconMask: true,
                    text: 'Guardar'
                },
                {
                    xtype: 'button',
                    id: 'volver',
                    iconAlign: 'center',
                    iconCls: 'reply',
                    iconMask: true,
                    text: 'Volver'
                }
            ]
        },
        {
            xtype: 'formpanel',
            title: 'View',
            html: 'View1',
            id: 'View1',
            styleHtmlContent: true,
            items: [
                {
                    xtype: 'button',
                    docked: 'bottom',
                    id: 'bView1',
                    margin: 10,
                    ui: 'forward',
                    text: 'siguiente'
                }
            ]
        }
    ]
}
});

view2.js：

Ext.define('MyApp.view.View2', {
extend: 'Ext.form.Panel',
alias: 'widget.View2',

config: {
    fullscreen: true,
    html: 'View2',
    id: 'View2',
    styleHtmlContent: true,
    items: [
        {
            xtype: 'button',
            docked: 'bottom',
            id: 'bView2',
            margin: 10,
            ui: 'forward',
            text: 'siguiente'
        }
    ]
}
});

view3.js：

Ext.define('MyApp.view.View3', {
extend: 'Ext.form.Panel',
alias: 'widget.View3',

config: {
    fullscreen: true,
    html: 'View3',
    id: 'View3',
    styleHtmlContent: true,
    items: [
        {
            xtype: 'button',
            docked: 'bottom',
            id: 'bView3',
            margin: 10,
            ui: 'forward',
            text: 'siguiente'
        }
    ]
}
});

ViewController.js：

ViewController.js:

Ext.define('MyApp.controller.ViewController', {
extend: 'Ext.app.Controller',

config: {
    views: [
        'View'
    ],

    refs: {
        bView1: 'bView1',
        bView2: 'bView2'
    },

    control: {
        "#bView1": {
            tap: 'onView1'
        },
        "#bView2": {
            tap: 'onView2'
        }
    }
},

onView1: function(button, e, options) {
    button.up('navigationview').push({
        xtype: 'View2',
        title: 'View2'
    });
},

onView2: function(button, e, options) {
    button.up('navigationview').push({
        xtype: 'View3',
        title: 'View3'
    });
}
});

我的问题的一个例子是：
我从view1开始，然后我按下按钮'siguiente'和我去观看2。如果我按下'后退'按钮（在navigationView中）我去view1，然后按下'siguiente'按钮并转到view2，但是在view2中，我按下按钮'siguiente'我不能去view3。

An example of my problem is this:I start in view1, then I push button 'siguiente' and I go to view2. If I push button 'back' (in navigationView) I go view1, then I push button 'siguiente' and go view2, but in view2, I push button 'siguiente' I can't go view3.

提前非常感谢！

推荐答案

这是因为你使用 id ，所以当你第二次启动它时会发生冲突，显示警告和功能不正常。如果您使用 itemId ，您将是安全的。

It's because you using id, so when you initiate it the second time it'll get conflict, show warning and function not working properly. You'll be safe if you use itemId.

itemId: 'bView1' //same for other view bView2, bView3

要在控制器中引用 itemId ，只需这样做：

To reference your itemId in controller, just do like this for example:

refs: {
    bView1: '[itemId=bView1]',
    bhView2: '[itemId=bView2]',
    bhView3: '[itemId=bView3]'
},

control: {
     bView1: {
         tap: 'onView1'
     },
     bhView2: {
         tap: 'onView2'
     },
},

onView1: function(button, e, options) {
    button.up('navigationview').push({
        xtype: 'View2',
        title: 'View2'
    });
},

onView2: function(button, e, options) {
    button.up('navigationview').push({
        xtype: 'View3',
        title: 'View3'
    });
}

希望有所帮助：）

这篇关于导航视图Sencha Touch 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！