Sencha Touch Anpassen der Navigationsleiste in der Navigationsansicht

Question

Ich mache eine einfache App, die eine Navigationsansicht für eine Liste enthält, wenn Sie die Liste drücken Ich möchte etwas HTML oder etwas zeigen, aber ein "neues" Fenster, damit ich kann Nutzen Sie den Zurück-Button auf der Navigationsleiste.

Mein Problem ist jetzt, dass ich ein Suchfeld auf der Navigationsleiste brauche, für die erste Anzeige, das Problem ist, dass ich nicht verstehe, wie man die Navigationsleiste so ändert, dass es eine Suchleiste bekommt. Hier ist mein Code:

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

});

Es gibt jetzt kein Suchfeld in der Navigationsleiste, es ist nur leer. Wie repariere ich? Danke im Voraus!

Answer 1

Die navigationbar Konfiguration innerhalb der Config-Tag sein muss, funktioniert dieser Code für mich:

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