导航视图 Sencha Touch 2

Posted 2023-02-25

【中文标题】导航视图 Sencha Touch 2

【英文标题】：Navigation View Sencha Touch 2

【发布时间】：2013-01-14 12:54:44

【问题描述】：

我在 Sencha Touch 2 中的 NavigationView 有问题。 当我按下“返回”按钮时，我无法浏览多个窗口。

我使用 view.push() 和 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：

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”按钮，然后转到 view2。如果我按下按钮“返回”（在导航视图中），我会进入 view1，然后按下按钮“siguiente”并进入 view2，但在 view2 中，我按下按钮“siguiente”我无法进入 view3。

非常感谢您！

【问题讨论】：

必须给出一些代码，否则我认为没有人会尝试提供帮助。

【参考方案1】：

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

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

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

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

希望对你有帮助:)

【讨论】：

非常感谢，您说的完全正确。我按照你的指示解决了我的问题。 :) 最后一个问题：为什么你将名称更改为通过 bhView2 和 bhView3 引用 bView2 和 bView3？

哈哈！这只是一个错字，因为我玩dota太多了:)）但很高兴它有帮助:)