1

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

});

专注于实际的导航栏，其他东西只是粘贴代码（我对其进行了一些修改），但我很确定这是一个错误。

提前致谢！

4

4 回答 4

2

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

像这样的东西：

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工具栏中的属性。

希望能帮助到你！

于 2012-04-14T18:13:31.393 回答
1

一个更好的答案（对我来说）只是将您添加到导航栏中的任何内容居中，是：

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

不过，您可能希望管理每个页面的导航栏的居中性。

于 2013-03-24T00:03:50.360 回答
0

我用了

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

这将在停靠的下方：'bottom'，行是上面的示例。

问候

杰克

于 2013-03-21T00:17:03.383 回答
0

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

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

                    }
               flex: 0.7

             },
            {
                xtype: 'spacer',
            },
于 2013-10-29T17:48:11.020 回答