[英]Sencha Touch Customize Navigation Bar in navigation view
我正在做一個簡單的應用程序,它具有一個包含列表的導航視圖,當您按列表時,我想顯示一些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}'
}
]
}
});
導航欄上現在沒有搜索字段,只是空的。 我該如何解決? 提前致謝!
navigationBar配置必須位於config標記內,此代碼對我有用:
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}'
}
]
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.