boutons extjs dans l'apparence de la barre d'outils

Question

Hey, j'ai vraiment une petite question mais quelque chose que je ne peux pas trouver.

lorsque je place un bouton dans une barre d'outils ExtJS, il apparaît avec un défaut apperance (comme toutes les fenêtres d'options de la barre d'outils)

comment puis-je faire ressembler à un bouton dans une forme ??

Answer 1

Voir ce post sur le forum Sencha Toolbar Button Style. J'ai aussi trouvé ce style d'un bouton comme un texte assez peu intuitif pour les utilisateurs. Avec seulement quelques lignes de CSS ajoutées à votre fichier maître CSS ExtJs, vous pouvez changer cette apparence globalement pour votre application.

Answer 2

Ceci est assez proche de celle-ci: ExtJS Button Style Toolbar

La réponse que je cherchais a été trouvé dans cette question:

Ajout

ctCls: 'x-btn-over' 

à la configuration du bouton fait effectivement ressembler à un bouton. C'est un peu un hack parce que c'est essentiellement le style du bouton de la barre d'outils pour apparaître comme si on le survolait, mais dans mon cas, j'ai décidé que c'était assez bon.

edit: Je n'ai pas touché à ExtJS depuis la version 3, il semble que ça ne marche plus.

Answer 3

Essayez comme ceci:

tbar: [ 
    { xtype: 'button', text: 'Button 1', cls:'x-btn-default-small' } 
] 

Answer 4

Voici ma solution (cela fonctionne pour ExtJS 3.3.3):

Pour bouton Ajouter classe supplémentaire, je l'ai appelé comme « x-barre d'outils gris- BTN ':

xtype: 'button', 
id: 'processButton', 
text: 'Process', 
ctCls: 'x-toolbar-grey-btn' 

Styles pour la classe supplémentaire, dans un fichier CSS séparé:

.x-toolbar-grey-btn .x-btn-tl{ 
    background-position: 0 0; 
} 
.x-toolbar-grey-btn .x-btn-tr{ 
    background-position: -3px 0; 
} 
.x-toolbar-grey-btn .x-btn-tc{ 
    background-position: 0 -6px; 
} 
.x-toolbar-grey-btn .x-btn-ml{ 
    background-position: 0 -24px; 
} 
.x-toolbar-grey-btn .x-btn-mr{ 
    background-position: -3px -24px; 
} 
.x-toolbar-grey-btn .x-btn-mc{ 
    background-position: 0 -1096px; 
} 
.x-toolbar-grey-btn .x-btn-bl{ 
    background-position: 0 -3px; 
} 
.x-toolbar-grey-btn .x-btn-br{ 
    background-position: -3px -3px; 
} 
.x-toolbar-grey-btn .x-btn-bc{ 
    background-position: 0 -15px; 
} 
.x-toolbar-grey-btn button{ 
    font-weight: bold; 
} 

Étant donné que les images des boutons Ext se trouvent dans le fichier '/ext-3.3.3/resources/images/default/button/btn.gif', j'ai changé seulement la propriété background-position. Cela ressemble à un bouton natif.

Answer 5

Vous devez envelopper dans un panneau, voici la solution pour Extjs 4.2.5

{ 
    xtype: 'panel', 
    items: { 
     xtype: 'button', 
     text : 'My button' 
    } 
}