sencha-touch - 在标题栏中间动态添加面板

Question

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

这个面板里面需要有图片和se字符串。

这就是我目前所做的，但面板显示在左侧按钮的右侧，我不知道如何将它放在标题栏的中间。

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

[更新]：居中：真

我试图在我的面板配置中添加 centered: true 但它没有用，它实际上变得更糟

由此

对此

谢谢

Answer 1

不需要添加“spacer”

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

希望这可以帮助。

Answer 2

如果您想实现相同的目标，请不要使用 aExt.Titlebar而是使用 a Ext.Toolbar。

诸如{xtype:'spacer'}在标题栏中不起作用的事情......

Answer 3

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

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

希望这可以帮助。

Answer 4

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

你可以有这样的东西

yourComponent.insert(index,componentTobeAdded);

添加后，调用Toolbar的组件布局，显示添加的面板。