CODEWITHSUNDEEP
sencha-touchpaneltoolbaralignment
gulsan
gulsan

Reputation: 11

Sencha Touch: Align the button to the right and the text center horizontally of the panel

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?

js-code:

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

});

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?

Upvotes: 1

Views: 6119

Answers (1)

Tobi
Tobi

Reputation: 188

I have had a similar problem. I wanted to have a back button to the left, and a segmented button centered. What I have done is to set the backbutton flex attribute to 1 and it worked well. segmentedbutton is now centered for me. Hope this helps for your problem.

{xtype: 'toolbar',ui: 'light',pack: 'center', items:[
                {xtype: 'BackButton', flex: 1},
                {xtype: 'segmentedbutton', items:[
                                {text: 'Active', pressed: true},
                                {text: 'Won'},
                                {text: 'Lost'}
                ]},
                {xtype: 'spacer'}   
            ]}

Upvotes: 2

Related Questions