Sencha Touch: выровняйте кнопку справа и текстовый центр по горизонтали от панели - PullRequest
Новая
       29

Sencha Touch: выровняйте кнопку справа и текстовый центр по горизонтали от панели

1 голос
/ 09 октября 2011

Я хочу, чтобы панель с единственной кнопкой была выровнена вправо. Я знаю идею «распорки». Но дополнительно я хочу установить текстовый центр html по горизонтали. Но с использованием «проставок» это не работает. Текст на самом деле не в центре панели. Как работает «проставка» и как мне добиться того, чего я хочу?

JS-код: 

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

});

Стиль 'forwardButton': 

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

Стиль верхней панели: 

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

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

Есть идеи, как решить мою проблему?

1 Ответ

2 голосов
/ 06 ноября 2011

У меня была похожая проблема. Я хотел, чтобы кнопка «Назад» была слева, а сегментированная кнопка была в центре. То, что я сделал, это установил для атрибута flex кнопки backbutton значение 1, и оно работало хорошо Сегментированная кнопка теперь центрирована для меня. Надеюсь, это поможет вашей проблеме. 

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