Sencha Touch Horizontally Center Search Field in Navigation Bar

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

}); 

Фокус на фактической навигационной панели вещи, другие вещи просто код вставили (и я изменил его немного), я уверен, что это ошибка, хотя.

Заранее благодарен!

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

Я использовал

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

Это было бы только под пристыкован: «снизу», строка в приведенном выше примере.

С уважением

Jacko

Answer 3

Лучший ответ (для меня), что только центры, что вы добавили к панели навигации, является:

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

Вы, вероятно, хотите, чтобы управлять центром однако, навигационная панель для каждой страницы.

Answer 4

Всякий раз, когда мне трудно центрировать нужное поле, я просто добавляю разделитель до и после, в сочетании с гибким элементом, который я хочу центрировать, он никогда не терпит неудачу. В этом случае:

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

        } 
       flex: 0.7 

      }, 
      { 
       xtype: 'spacer', 
      },