在标题栏的中间动态添加面板

Question

我有一个标题栏的面板，它已经有两个按钮，一个在左侧，另一个在右侧。现在我想知道如何将一个面板（或其他）添加到栏的中心。

此面板需要在其中包含图片和字符串。

这就是我现在所做的，但面板显示在左侧按钮的右侧，我无法弄清楚如何将它放在标题栏的中间。

this.getTitlebar().add([{
    xtype: 'panel',
    layout:'hbox',
    items:[{
      xtype:'img',
      width:32,
      height:32,
      src:data.image.small.url
    },{
      html: data.key,
      style:'color:#FFF'
    }]
}]);

[更新]：居中：真实

我尝试添加居中：true到我的面板配置，但它不起作用，它实际上变得更糟

来自这个

到这个

由于

Answer 1

不需要添加“spacer”

items: [
    // your_first_button(default:left)
    {},
    // your_central_panel
    {centered: true},
    // your_second_button
    {right: 0}
]

希望这有帮助。

Answer 2

要按照描述对齐您的项目，只需使用此原型：

items: [
  {your_first_button},
  {xtype: 'spacer'},
  {your_central_panel},
  {xtpye: 'spacer'},
  {your_second_button},
]

希望这有帮助。

Answer 3

如果您尝试实现相同的目标，请不要使用Ext.Titlebar，而应使用Ext.Toolbar。

{xtype:'spacer'}之类的东西在标题栏中不起作用......

Answer 4

您是否尝试过该组件的插入方法？

你可以有这样的东西

yourComponent.insert(index,componentTobeAdded);

添加后，调用工具栏的组件布局以显示添加的面板。