Question

这个问题非常愚蠢，我可能偶然发现了一个错误，但我需要将我的搜索字段集中在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}'
        }
    ]
}

});

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

提前致谢！

Answer 1

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

这样的事情：

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属性。

希望它有所帮助！

Answer 2

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

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

但是，您可能希望管理每个页面的导航栏的居中位置。

Answer 3

我用过

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

这就在停靠点下方：'bottom'，line就是上面的例子。

此致

亚茨科

Answer 4

每当我发现难以将所需的区域居中时，我只是在前后添加一个垫片，并结合我想要居中的项目的flex，它永远不会失败。在这种情况下：

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

                    }
               flex: 0.7

             },
            {
                xtype: 'spacer',
            },

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

4 个答案: