pulsanti extjs nell'aspetto della barra degli strumenti

Question

Ehi, ho una piccola domanda in realtà ma qualcosa che non riesco a trovare.

quando ho posto un pulsante in una barra degli strumenti ExtJS, appare con un apperance di default (come le opzioni di finestre della barra degli strumenti)

come faccio a farlo sembrare come un pulsante in una forma ??

Answer 1

Vedere questo post sul forum Sencha Toolbar Button Style. Anche io ho trovato questo stile di un pulsante come testo abbastanza poco intuitivo per gli utenti. Con solo poche righe di CSS aggiunte al tuo file master css di ExtJs puoi cambiare questo aspetto a livello globale per la tua applicazione.

Answer 2

Questo è abbastanza vicino a questo: ExtJS Button Style Toolbar

La risposta che cercavo è stato trovato in quella domanda:

Aggiunta

ctCls: 'x-btn-over' 

alla configurazione del pulsante fa in realtà l'aspetto di un pulsante. Questo è un po 'un trucco perché questo è essenzialmente lo stile del pulsante della barra degli strumenti per apparire come se fosse al passaggio del tempo, ma nel mio caso ho deciso che questo era abbastanza buono.

modifica: Non ho toccato ExtJS dalla versione 3, quindi sembra che questo non funzioni più.

Answer 3

Prova in questo modo:

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

Answer 4

Ecco la mia soluzione (che funziona per ExtJS 3.3.3):

Per pulsante Aggiungi classe in più, ho chiamato come 'x-barra-grigio- BTN ':

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

Stili di classe in più, in file CSS separato:

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

Poiché le immagini del pulsante Ext si trovano nel file "/ext-3.3.3/resources/images/default/button/btn.gif", ho modificato solo posizione-sfondo proprietà. Sembra un pulsante nativo.

Answer 5

Devi avvolgerlo in un pannello, qui è la soluzione per ExtJS 4.2.5

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