Sencha触摸水平中心在导航栏中搜索字段

问题描述：

这个问题很愚蠢，我可能偶然发现了一个错误，但我需要将我的搜索字段置于Sencha Touch的导航栏中，而我无法使其工作。这是我的代码：Sencha触摸水平中心在导航栏中搜索字段

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}' 
     } 
    ] 
} 

});

关注实际的导航栏的东西，其他的东西只是粘贴代码（我修改了它有点），我敢肯定这是一个错误，但。

在此先感谢！

答

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

事情是这样的：

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，但感谢您的答案，它现在正在与此实现一起工作。 – 2012-04-15 19:54:04

答

我用

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

这将是正下方的停靠：“底部”，行是上面的例子。

问候

杰克逊

答

一个更好的答案（对我来说），只是中心无论你已经添加到导航条，就是：

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

你可能会想管理中心尽管如此，每个页面的导航栏的好坏。

对我来说更好的答案..谢谢！ – inane 2016-02-13 12:01:10

答

每当我发现很难居中一个所需的领域，我只是添加一个间隔前后，与我想要中心项目的Flex结合，它永远不会失败。在这种情况下：

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

        } 
       flex: 0.7 

      }, 
      { 
       xtype: 'spacer', 
      },

Sencha触摸水平中心在导航栏中搜索字段

相关推荐