導航視圖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' 
    }); 
} 

希望它能幫助:)