ExtJS: 'рядом с центром'

Question

Я хотел бы достичь this в ExtJS 4.2:

например центрированная кнопка, с чем-то (индикатор прогресса) справа, что не приводит к перемещению кнопки.

Все мои макеты в настоящее время относительны, в основном с использованием HBox & VBox, и я хотел бы сохранить его таким образом, а не использовать что-либо абсолютно для решения этой проблемы.

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

Любые предложения?

Answer 1

Используйте pack конфигурации Формуляра HBOX для отображения элементов в центре, и применить margin равную ширину прогрессбара бара на левую сторону кнопки:

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

    items: [{ 
     xtype: 'button', 
     text: 'Push me', 
     width: 100, 
     margin: '0 0 0 100' // margin-left equal to the width of the progress bar 
    },{ 
     xtype: 'progressbar', 
     width: 100 
    }] 
} 

проверить Также из this fiddle.

Answer 2

Вот моя попытка, дайте мне знать, если это проблема.

Ext.onReady(function() { 
var ct = new Ext.panel.Panel({ 
    width: '100%', 
    renderTo: Ext.getBody(), 
    margin: 10, 
    border: true, 
    id: 'ppanel',   
    layout: { 
     type: 'hbox', 
    }, 

    items: [{ 
     xtype: 'button', 
     text: 'Push me', 
     width: 100, 
     id: 'bbutton' 
    },{ 
     xtype: 'progressbar', 
     width: 100, 
     id: 'pbar' 
    }], 
    listeners: { 
     afterrender: function() { 
      pwidth = Ext.getCmp('ppanel').getWidth(); 
      bwidth = Ext.getCmp('bbutton').getWidth(); 
      button = Ext.getCmp('bbutton'); 
      progrs = Ext.getCmp('pbar'); 
      bmargin = (pwidth/2 - bwidth/2); 
      button.setMargin("0 0 0 "+bmargin); 
      progrs.setMargin("0 0 0 10"); 
     } 
    } 
}); 
});