导航视图Sencha Touch 2

Question

我的Senview 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。如果我按下按钮“后退”（在navigationView中），我去view1，然后按下按钮'siguiente'并去view2，但在view2中，我按下'siguiente'我不能去view3。

非常感谢您提前！

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

希望它能帮助:)