Sencha Touch: setzen Sie die Schaltfläche auf der rechten Seite und die text-center horizontal am panel

Will ich ein panel mit dem einzigen Knopf auf der rechten Seite ausgerichtet. Ich weiß, die Idee der 'spacer'. Aber zusätzlich möchte ich um einen html-text-center-horizontal. Aber mit der 'spacer' es funktioniert nicht wirklich. Der text ist nicht wirklich in der Mitte der Platte. Wie sieht 'spacer' zu arbeiten, und wie kann ich das erreichen, was ich will?

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
        ]

});

Stil von "forwardButton':

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

Stil 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;  }

Irgendeine Idee, wie ich mein problem lösen kann?

InformationsquelleAutor gulsan | 2011-10-09
  1. 2

    Ich hatte ein ähnliches problem. Ich wollte einen back-button auf der linken Seite, und eine segmentierte Schaltfläche zentriert. Was ich getan habe, ist der backbutton-flex-Attribut auf 1 und es funktionierte gut. segmentedbutton ist jetzt zentriert für mich. Hoffe das hilft für dein 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'}   
            ]}
    • {xtype: 'spacer'} Hat es für mich. Danke.
    InformationsquelleAutor Tobi
Schreibe einen Kommentar