Sencha Touchナビゲーションバーをナビゲーションビューでカスタマイズする

Question

リストを保存するためのナビゲーションビューを持つシンプルなアプリをやっています。リストを押すとHTMLが表示されますが、新しいウィンドウが表示されますナビゲーションバーの戻るボタンを利用します。

私の問題は、現在、ナビゲーションバーに検索フィールドが必要なことです.Inital表示では、ナビゲーションバーを変更して検索バーを取得する方法がわからないという問題があります。私のコードは次のとおりです。

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

navigationBar構成が設定タグ内でなければならない、このコードは私の作品：上

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