Sencha Touch 在导航栏中水平居中搜索字段

Posted 2023-02-26

【中文标题】Sencha Touch 在导航栏中水平居中搜索字段

【英文标题】：Sencha Touch Horizontally Center Search Field in Navigation Bar

【发布时间】：2012-04-13 22:53:13

【问题描述】：

这个问题非常愚蠢，我可能偶然发现了一个错误，但我需要在 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'
        
    ]


);

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

提前致谢！

【参考方案1】：

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

类似这样的：

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

希望对你有帮助！

【讨论】：

我决定更改我的整个 UI，但感谢您的回答，它现在正在使用此实现。

【参考方案2】：

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

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

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

【参考方案3】：

我用过

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

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

问候

杰克

【参考方案4】：

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

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

                    
               flex: 0.7

             ,
            
                xtype: 'spacer',
            ,