View Full Version : Align the button to the right and the text center horizontally of the panel

8 Oct 2011, 2:08 PM

I want to have a panel with the only button aligned to the right. I know the idea of 'spacer'. But additionally I want to set a html text center horizontally. But using 'spacer' it doesn't really work. The text is not really in the midst of the panel. How does 'spacer' work, and how can I achieve what I want?

this.topPanel = new Ext.Panel({
layout: 'hbox',
height: 50,
cls: 'topPanelCls',
items: [
{xtype: 'spacer'},
{html: 'TextText', width: 100, height: 30},
{xtype: 'spacer'},

Style of 'forwardButton':

.forwardButtonCls {
background: #ccc;
color: #ffffff;
font-size: 14px;
border: none;
vertical-align: center; }

Style of topPanel:

.topPanelCls {
margin: 10px 0px 0px 0px; }

.topPanelCls .x-panel-body {
background-color: #fff !important;
background-image: none !important;
width: 700px;
border:4px solid #ccc; }

Any idea how I can solve my problem?

10 Oct 2011, 12:52 AM

You can use toolbar to show text in middle via title property. Add can add button using items config options.

And in Panel,

spacer works like this,
-- After subtracting sum of the widths of all items(having fixed with),remaining width is divided by no. of spacers. That width is allocated to each spacer.
So,in your case it will be (panel width - width of text - width of button)/2.

-- all the components in sencha touch is divs with nested divs.

Another option you have is use flex config option.
code is

var topPanel = new Ext.Panel({
layout: 'hbox',
height: 50,
cls: 'topPanelCls',

items: [
{html: 'TextText', width: 100, height: 30,