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