CODEWITHSUNDEEP
sencha-touchextjssencha-touch-2
Titouan de Bailleul
Titouan de Bailleul

Reputation: 12949

Dynamically adding panel in the middle of a titlebar

I have a panel with a titlebar which already have a two buttons, one on the left and another on the right of the bar. Now I would like to know how to add a panel (or else) to the center of the bar.

This panel need to have a picture and se string inside.

This is what I do for the moment but the panel is displayed on the right of the left button and I can't figure out how to put it in the middle of the titlebar.

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

[UPDATE] : centered: true

I tried to add centered: true to my panel config but it didn't work, it actually got worse

from this

enter image description here

to this

enter image description here

Thanks

Upvotes: 2

Views: 945

Answers (4)

Titouan de Bailleul
Titouan de Bailleul

Reputation: 12949

If you're trying to achieve the same thing, don't use a Ext.Titlebar but use a Ext.Toolbar instead.

Things like {xtype:'spacer'} don't work in Titlebars...

Upvotes: 1

yao tony
yao tony

Reputation: 49

don not need to add the "spacer"

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

Hope this helps.

Upvotes: 2

Akash Saikia
Akash Saikia

Reputation: 452

Did you try insert method of the component?

You can have something like this

yourComponent.insert(index,componentTobeAdded);

And after adding it, call the component layout of the Toolbar to show the panel added.

Upvotes: 0

Thiem Nguyen
Thiem Nguyen

Reputation: 6365

To align your items as described, simply use this prototype:

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

Hope this helps.

Upvotes: 1

Related Questions