2012-05-09 2 views
2

Я новичок в Сенча. У меня есть кнопка со значком компоновки. Значок появляется в правом нижнем углу моей кнопки в соответствии с заданным размером кнопки. Может ли кто-нибудь помочь мне в выравнивании? Атрибут iconAlign не работает для меня.Как выровнять значок в центре кнопки в сенчане?

     { 
          xtype: 'button', 
          ui: 'action', 
          iconMask: true, 
          iconCls: 'compose', 
          iconAlign:'center', 
          width:35, 
          height: 25, 
          action:'landedInfo' 
         } 

ответ

0

Настройка поля в CSS помогли мне поставить значок в центре:

.x-tab .x-button-icon.compose,.x-button .x-button-icon.x-icon-mask.compose 
{ 

margin-left:-5px; 
margin-top:-5px; 
margin-right:-7px; 
margin-bottom:-5px; 
    } 
2

Вы должны установить свойство отступ в 0, так как ширина и высота вы предоставите слишком малы, и поэтому баловаться со значением «центра» вы предоставляете для «iconAlign»:

{ 
    xtype: 'button', 
    ui: 'action', 
    iconMask: true, 
    iconCls: 'compose', 
    iconAlign:'center', 
    width:35, 
    height: 25, 
    padding:0, 
    action:'landedInfo' 
} 

Один из способов увидеть это - увеличить ширину и высоту до, скажем, 100x50, тогда вы получите значок с центром, не касаясь свойства прокладки ... Я признаю, что сначала это может показаться сложным.

Надеется, что это помогает

+0

Я не хочу, чтобы увеличить размер кнопки. Ну, я мог бы достичь этого, используя css. Спасибо borck – Akshatha

+0

Вам не нужно, вы просто устанавливаете 'padding' на 0, и у вас будет значок с центром, не изменяя размер. Вещь с изменением размера кнопки была просто для объяснения цели. Вам не нужно css ... – borck

0

Я попытался это и работаю для меня:

{ 
    xtype: 'button', 
    ui: 'normal', 
    text:'LOGOUT', 
    iconMask: true, 
    iconCls: 'user', 
    iconAlign:'center',    
    padding:0, 
    cls: 'x-iconalign-top', 

} 
0

если вы используете icon-font, вы можете сделать это с помощью css.

.x-button-icon { 
    /*Icon centering*/ 
    position:absolute; 
    width:1em;//set width of icon relative(icon is font) 
    top:50%; 
    margin-top:-0.5em;//half of icon height shift back 
    left:50%; 
    margin-left:-0.5em;//half of icon width shift back 
} 

You can also absolutey position a component in Sencha Touch using the top, right, bottom and left configurations of any component. This works like the position: absolute CSS code.

Смежные вопросы