Come impostare correttamente la dimensione dell'icona di un pulsante in extjs?

Question

Sto usando extjs4 e quello che sto cercando di fare sembra essere semplice ma non riesco a trovare una soluzione funzionante per questo.

Ho un icona di 64 * 64px e voglio che il mio pulsante per vederlo come immagine di sfondo, ma extjs mostra solo l'immagine parzialmente .Googled in rete per una soluzione, ma nessuno ha chiesto un lavoro soluzione per questo. Voglio solo la mia immagine di sfondo adatta al mio pulsante.

Ecco il mio codice js:

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

Ecco il mio codice css:

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

ho provato alcune combinazioni css e ancora senza successo.

Answer 1

I iconCls si riferisce strettamente al l'icona del pulsante, se si desidera che la foto per coprire il pulsante di tutta la si dovrebbe aggiungere lo sfondo a un css classe aggiunta al pulsante.

{ 
    xtype: 'button', 
    width: 64, 
    height: 64, 
    text: 'some text', 
    cls: 'startbutton' 
} 

e css

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

Answer 2

Anche se questo non vi aiuterà direttamente se siete immagine è 64px alto/largo, l'opzione seguente config 'scala' può essere utilizzato per regolare le dimensioni di un bottone:

• 'piccolo' - Risultati nell'elemento del pulsante è 16px alto.

• "medio": i risultati nell'elemento del pulsante sono 24 px di altezza.

• 'grandi' - Risultati in l'elemento pulsante di essere 32px alti

Answer 3

sto usando ExtJS 3.4.0 e non so se questo è più facile a 4.x, ma spero di sì!

ho risolto il problema creando nuovi stili di pulsanti oltre a piccole/medie/grandi dimensioni, quindi sul pulsante specificando:

{ text: 'Read Data', 
    scale: 'extra', 
    iconAlign: 'left', 
    iconCls:'read_icon'} 

codice CSS deve essere specificato per ogni parte stai andando usare l'icona, in il mio caso è stato appena definito per il lato sinistro, ma è necessario clonare per ciascun lato in alto/in basso/a destra/a sinistra. È possibile trovare tutto il codice originale all'interno ext-all.css, ecco quello che sto usando per un'icona 64x64

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

È possibile riutilizzare il codice per tutti i pulsanti 'extra' dimensioni nella vostra progetto ed è possibile aggiungere quante ne vuoi

Answer 4

Ho avuto un problema importante con la risposta accettata. Il testo del pulsante (pulsante sinistro nell'immagine, sotto) è apparso nella posizione errata (dietro l'icona) - la posizione in cui era configurato per utilizzare le scale predefinite.

Per poter utilizzare un altro-che-default la dimensione delle icone e inserire il testo nella posizione corretta, la mia soluzione era abbastanza semplice, senza stili fondamentali imperativi.

Ho appena sostituito la proprietà text con la proprietà html. Quindi, ho inserito il testo del pulsante desiderato all'interno di una "span" e aggiunto una classe a questo span per posizionarlo correttamente con i CSS.

Questo è il codice (testato su IE, Firefox, Chrome):

definizione Pulsante

xtype:'button', 
iconCls:'contactIcon80', 
iconAlign:'top', 
width:120, 
height:100, 
html:'<span class="bigBtn">Damn you hayate</span>' 

Button iconCls classe

.contactIcon80 { 
    background-image: url(../images/calendar80.png) !important; 
    width:80px!important; 
    height:80px!important; 
    margin-right: auto !important; 
    margin-left: auto !important; 
} 

Span

.bigBtn { 
    position: absolute; 
    bottom: 4px !important; 
    left: 0% !important; 
    text-align: center !important; 
    width: 120px !important; 
} 

Di corso questo è per l'icona in alto del testo in basso. È possibile personalizzarlo per altri layout