Sencha Touch在導航視圖中自定義導航欄

Question

我正在做一個簡單的應用程序，它具有包含列表的導航視圖，當您按列表時我想顯示一些HTML或其他東西，但是一個「新」窗口，所以我可以利用導航欄上的後退按鈕。

我現在的問題是，我需要一個導航欄上的搜索字段，對於初始顯示，問題是我不明白如何修改導航欄，因此它會得到一個搜索欄。這裏是我的代碼：

Ext.define('AppName.view.MainNav', { 
extend: 'Ext.navigation.View', 

xtype: 'mainnav', 

requires: [ 
    'Ext.field.Search', 'Ext.TitleBar' 
], 

config: { 
    fullscreen: true, 
    items: [ 
     { 
     navigationBar: { 
      xtype: 'titlebar', 
      items: [ 
       { xtype: 'spacer' }, 
       { 
        xtype: 'searchfield', 
        placeHolder: 'Search...', 

        } 
       }, 
       { xtype: 'spacer' } 
      ] 
     }, 

     xtype: 'list', 
     fullscreen: true, 

     store: { 
      fields: ['name', 'number'], 
      sorters: 'name', 
      data: [ 
       {name: 'bla', number: 0}, 
       {name: 'blo', number: 1}, 
       {name: 'bliblo', number: 2}, 
       {name: 'Bliblablo', number: 3}, 
       {name: 'bliboasdas', number: 4}, 
      ] 
     }, 

     itemTpl: '{name}' 
     } 
    ] 
} 

}）;

現在導航欄上沒有搜索欄，它只是空的。我該如何解決？提前致謝！

Answer 1

的的導航欄配置必須的配置標籤中，此代碼的工作對我來說：

Ext.define('AppName.view.MainNav', { 
extend: 'Ext.navigation.View', 

xtype: 'mainnav', 

requires: ['Ext.field.Search', 'Ext.TitleBar'], 

config: { 
    fullscreen: true, 

    navigationBar: { 
     items: [ 
      { 
       xtype: 'searchfield', 
       placeHolder: 'Search...', 
       align: 'right' 
      } 
     ] 
    }, 
    items: [ 
     { 
      xtype: 'panel', 
      html: 'test' 
     }, 
     { 
      xtype: 'list', 
      fullscreen: true, 

      store: { 
       fields: ['name', 'number'], 
       sorters: 'name', 
       data: [ 
        {name: 'bla', number: 0}, 
        {name: 'blo', number: 1}, 
        {name: 'bliblo', number: 2}, 
        {name: 'Bliblablo', number: 3}, 
        {name: 'bliboasdas', number: 4}, 
       ] 
      }, 

      itemTpl: '{name}' 
     } 
    ] 
} 
});