Adding button to toolbar pushes over the title

[sc0ttman]

Hey all,
I have a couple questions for toolbars and buttons:

• I would like to add a navigation button to the toolbar of a Panel (sometimes on the left side, sometimes on the right). The only problem is that it seems to push over the title which makes it not centered anymore. Is there a way to add the Back button the way the NestedList component adds it? Without pushing over the title?
  I just have a panel with a toolbar as the first item in the items array:
  

  items: [{xtype: "toolbar", title: "Widgets", docked:'top', items: [{ text: 'Back',  ui: 'back',}]}, ...] 

• My second problem is basically the same problem as the first, only I would like the button on the right side of the toolbar.
• The 3rd problem can be seen in the second image. Im using the 'delete' UI which should render an image of a 'X', for some reason it isnt. Is this a known bug with ST2p3 ?

Thanks!

[arunc]

You can use spacers to place items in toolbar , it will give you better control of position. Add one spacer then label for title then again spacer then the back button....
Delete ui is working for me with in a toolbar, but am not able to use it on other components.

[sc0ttman]

Thanks arunc.

I ended up going with 'Ext.navigation.View' in order to get the back buttons placed properly.
Also, for my modal windows where I wanted the close button on the right I used a technique I saw in the Kiva app:

{ xtype: 'spacer', width:50 },
{ xtype: 'spacer'},
{ xtype: 'title',  title: 'My Title'},
{ xtype: 'spacer' },
{ iconCls: 'delete',  iconMask: true, ui: "plain"} 

As for the icon not showing, I forgot to uncomment it in my _buttons.scss file.

Thanks