Comment définir correctement la taille de l'icône d'un bouton dans extjs?

Je suis en utilisant extjs4 et Ce que je suis en train de faire semble être simple mais je ne trouve pas une solution de travail pour elle.

J'ai un 64*64px icône et je veux que mon bouton pour montrer que l'image de fond mais extjs montre les images partiellement.Cherché sur le net pour trouver une solution, mais personne n'a suggéré une de travail solution pour elle.Je veux juste que mon image de fond d'ajustement à mon bouton.

voici mon code js:

{
    xtype : 'button',
    text : null,
    iconCls : 'startbutton',
    //icon:'./assets/icons/startbtn.png',
    //style:{height:'60px'},
    width : 64,
    height : 64
}

voici mon code css:

.x-btn-icon .startbutton {
    background-image: url(start.png) !important;
}

j'ai essayé un peu de css combinaisons et toujours pas de succès.

OriginalL'auteur Mehdi Fanai | 2011-09-30

10

La iconCls se réfère strictement à l'icône de la touche, si vous voulez que l'image de couvrir l'ensemble de bouton, il faut ajouter le contexte d'une classe css ajouté au bouton.
```
{
    xtype: 'button',
    width: 64,
    height: 64,
    text: 'some text',
    cls: 'startbutton'
}
```
et le css
```
.startbutton {
    background-image: url(start.png) !important;
}
```
Merci nscrob.son fonctionnement.

OriginalL'auteur nscrob
4

J'ai eu un problème important avec la accepté de répondre.
Le texte du bouton (bouton de gauche dans l'image ci-dessous) est apparu dans la mauvaise position (derrière l'icône) - la position qu'il a été configuré pour utiliser les échelles par défaut.

Afin d'utiliser un autre que par défaut la taille de l'icône et de placer le texte dans la bonne position, ma solution était assez simple, sans primordial de base les styles.

J'ai juste remplacé le text propriété avec la html de la propriété.
Ensuite, j'ai placé le bouton de votre choix de texte au sein d'un 'span' et ajouté une classe à cette période afin de le positionner correctement avec les CSS.

C'est le code (testé sur IE , Firefox , Chrome):

Définition de bouton
```
xtype:'button',
iconCls:'contactIcon80',
iconAlign:'top',
width:120,
height:100,
html:'<span class="bigBtn">Damn you hayate</span>'
```
Bouton iconCls
```
.contactIcon80 {
    background-image: url(../images/calendar80.png) !important;
    width:80px!important;
    height:80px!important;
    margin-right: auto !important;
    margin-left: auto !important;
}
```
Span class
```
.bigBtn {
    position: absolute;
    bottom: 4px  !important;
    left: 0%  !important;
    text-align: center !important;
    width: 120px !important;
}
```
Bien sûr, c'est pour icône de texte du haut en bas.
Vous pouvez le personnaliser pour d'autres modèles

OriginalL'auteur Anestis Kivranoglou
3

Bien que ce ne sera pas directement de l'aide si vous êtes l'image est 64px haut/large, les suivants config 'échelle' option peut être utilisée pour ajuster la taille d'un bouton:

•'petite' - Résultats sur le bouton de l'élément 16px haut.

•"moyen" - Résultats sur le bouton de l'élément 24px haut.

•'grand' - Résultats sur le bouton de l'élément 32px haute

je l'ai déjà fait pourquoi vous le suggérez, mais il affiche la moitié de l'icône et pas à tous.
Je pensais que c'était implicite!

OriginalL'auteur dougajmcdonald
1

Je suis en utilisant ExtJS 3.4.0 et je ne sais pas si c'est plus facile en 4.x mais je l'espère!

J'ai résolu le problème en créant de nouveaux styles de bouton en plus petite/moyenne/grande, puis sur le bouton en spécifiant:
```
{ text: 'Read Data',
  scale: 'extra',
  iconAlign: 'left',
  iconCls:'read_icon'}
```
Code CSS doit être spécifié pour chaque côté, vous allez utiliser l'icône, dans mon cas j'ai juste défini pour le côté gauche, mais vous devez clone de chaque côté haut/bas/droite/gauche.
Vous trouverez tous les code d'origine à l'intérieur de ext-all.css, voici ce que j'utilise pour un 64x64 icône
```
.x-btn-text-icon .x-btn-icon-extra-left .x-btn-text{
  background-position: 0 center;
  background-repeat: no-repeat;
  padding-left:66px;
  height:64px;
}
```
Vous pouvez ré-utiliser le code pour tous les "extra" de la taille des boutons de votre projet et vous pouvez en ajouter autant que vous voulez

La vôtre est la meilleure réponse que j'ai vu autour de sur les. Est-il un moyen de le faire scale propriété pour la button dans son ensemble?
Je suis désolé @Thomas, c'était il y a longtemps... je n'ai pas utilisé Ext depuis 🙁 n'en avons aucune idée maintenant
pas un problème! C'était un coup de feu dans l'obscurité. Je vais laisser le commentaire, même si, dans le cas où quelqu'un le voit et pense, "Oh, je sais"

OriginalL'auteur colthreepv

Vous devez vous connecter pour publier un commentaire.