Html Sencha触摸导航栏中的水平居中搜索字段

这个问题非常愚蠢，我可能偶然发现了一个bug，但我需要在Sencha Touch的导航栏中集中我的搜索字段，我就是无法让它工作。这是我的代码：

Ext.define('Myapp.view.MyNav', {
extend: 'Ext.navigation.View',

xtype: 'mynav',

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

config: {
    fullscreen: true,
        navigationBar: {
            items: [
                {
                    xtype: 'searchfield',
                    placeHolder: 'Search...',
                    listeners: {
                        keyup: function(field) {

                        }
                    },
                    align: 'right'
                }
            ]
        },

    items: [ 
        {
            title: 'MyNav',
            xtype: 'list',
            fullscreen: true,
            grouped: true,


            store: {
                fields: ['name', 'html'],
                sorters: 'name',
                data: [
                    {name: 'Alfa', html: '<p>alfa</p>'},
                    {name: 'Beta', html: '<p>beta</p>'},
                    {name: 'Gamma', html: '<p>gamma</p>'},
                    {name: 'Mupp', html: '<p>mupp</p>'},
                    {name: 'Tupp', html: '<p>tupp</p>'}
                ],
                grouper: {
                groupFn: function(record) {
                    return record.get('name')[0];
                },
                indexBar: true
            },
            },

            listeners: {
                select: function(view, record) {
                    var test = Ext.create('Ext.Panel', {                        fullscreen: true,
                        title: record.get('name'),
                        layout: {
                            type:'vbox'
                        },
                        items: [
                            {
                                xtype: 'panel',
                                html: record.get('html')
                            }
                        ]
                    });

                    var mainnav = Ext.ComponentQuery.query('bookmarksmainnav')[0];
                    mainnav.setActiveItem(test);
                }
            },

            itemTpl: '{name}'
        }
    ]
}

});

Ext.define（'Myapp.view.MyNav'{
扩展：“Ext.navigation.View”，
xtype:'mynav'，
要求：[
“Ext.field.Search”、“Ext.Button”
],
配置：{
全屏：对，
导航栏：{
项目：[
{
xtype:“搜索字段”，
占位符：“搜索…”，
听众：{
键控：功能（字段）{
}
},
对齐：“右”
}
]
},
项目：[
{
标题：“MyNav”，
xtype:'列表'，
全屏：对，
对,，
商店：{
字段：['name'，'html']，
分拣员：“姓名”，
数据：[
{name:'Alfa'，html:'Alfa
'}，
{name:'Beta'，html:'Beta
'}，
{name:'Gamma'，html:'Gamma
'}，
{name:'Mupp'，html:'Mupp
'}，
{name:'Tupp'，html:'Tupp
'}
],
石斑鱼：{
groupFn：函数（记录）{
返回记录。get（'name'）[0]；
},
indexBar：对
},
},
听众：{
选择：功能（查看、记录）{
var test=Ext.create（'Ext.Panel'，{fullscreen:true，
标题：record.get（'name'），
布局：{
类型：'vbox'
},
项目：[
{
xtype:'面板'，
html:record.get（'html'）
}
]
});
var mainnav=Ext.ComponentQuery.query（'bookmarksmainnav'）[0]；
主导航设置活动项（测试）；
}
},
itemTpl:“{name}”
}
]
}
});

专注于实际的导航栏，其他东西只是代码粘贴（我做了一些修改），我很确定这是一个bug

---

提前谢谢

您可以尝试使用停靠在页面底部的工具栏，搜索字段居中，我不知道为什么导航栏会忽略居中属性

大概是这样的：

config: {
    fullscreen: true,
    navigationBar: {

    },

    items: [ 
        {
            xtype: 'toolbar',
            docked: 'bottom',
            items: [
                {
                    xtype: 'searchfield',
                    placeHolder: 'Search...',
                    listeners: {
                        keyup: function(field) {

                        }
                    },
                    centered: true
                }
            ],
        },
        {
            title: 'MyNav',
            xtype: 'list',

如果需要屏幕顶部的搜索字段，可以尝试使用

hidden:true

隐藏导航栏，并更改工具栏中的

docked

属性

希望有帮助

我用过

layout: {
    align: 'center',
    pack: 'center',
    type: 'hbox'
}

这将刚好位于停靠的“底线”下方，这是上面的示例

问候

Jacko

一个更好的答案（对我来说）是，将您添加到导航栏的内容放在中心，即：

this.getNavigationBar().leftBox.setCentered(true);

---

不过，您可能需要管理每页导航栏的居中度。

每当我发现很难将所需字段居中时，我只需在前后添加一个间隔符，并为我要居中的项目添加一个柔性，它永远不会失败。在这种情况下：

      items: [
            {
                xtype: 'spacer',
            },
            {
                xtype: 'searchfield',
                placeHolder: 'Search...',
                listeners: {
                    keyup: function(field) {

                    }
               flex: 0.7

             },
            {
                xtype: 'spacer',
            },

---

我已经决定改变我的整个UI，但是谢谢你的回答，它现在正在使用这个实现。