Visualizzazione delle immagini personalizzate nelle opzioni di configurazione 'tools' di ext.grid.panel

Question

Sono solo un mese con extjs e sto ancora sperimentando. La mia domanda è: ho un pannello della griglia e al suo interno le opzioni di configurazione degli "strumenti". Lo sto usando per abilitare/disabilitare una variabile Ext.grid.feature.Grouping. Le 2 funzioni del gestore hanno la logica per disabilitare/abilitare le 2 viste facendo clic sui 2 pulsanti "incrociati" che appaiono sul lato destro dell'intestazione. La logica va bene. Tuttavia, mi piacerebbe visualizzare la mia serie di immagini personalizzate al posto dei pulsanti "croce". Può essere fatto? Se sì, come? Devo apportare alcune modifiche al codice css per quello?

Ho esaminato la documentazione e ho fatto anche una buona ricerca, ma nulla sembra rispondere alla mia domanda.

Answer 1

Specificare una configurazione personalizzata type sui vostri strumenti:

Ext.create('Ext.grid.Panel', { 
    ... 
    tools: [ 
     { 
     type: 'enable-grouping', 
     handler: function() { 
      ... 
     } 
     }, 
     { 
     type: 'disable-grouping', 
     handler: function() { 
      ... 
     } 
     } 
    ] 
}); 

quindi definire le seguenti classi in un foglio di stile per lo stile i vostri nuovi strumenti:

.x-tool-enable-grouping { 
    background-image: url('path/to/tool/image/enable-grouping.png'); 
} 

.x-tool-disable-grouping { 
    background-image: url('path/to/tool/image/disable-grouping.png'); 
} 

La dimensione di un'immagine di strumento dovrebbe essere 15 x 15 px