Visualización de imágenes personalizadas en las opciones de configuración 'herramientas' de ext.grid.panel

Question

Tengo solo un mes de vida con extjs y todavía estoy experimentando. Mi pregunta es: tengo un panel de cuadrícula y dentro de él las opciones de configuración de 'herramientas'. Estoy usando esto para activar/desactivar una variable Ext.grid.feature.Grouping. Las 2 funciones del controlador tienen la lógica para deshabilitar/habilitar las 2 vistas haciendo clic en los 2 botones 'cruzados' que aparecen en el lado derecho del encabezado. La lógica está bien. Sin embargo, me gustaría mostrar mi conjunto de imágenes personalizadas en lugar de los botones 'cruzar'. Se puede hacer esto? Si es así, ¿cómo? ¿Debo hacer algunos cambios en el código CSS para eso?

He revisado la documentación y también hice una buena búsqueda pero parece que nada responde mi pregunta.

Answer 1

Especificar una configuración personalizada type en sus herramientas:

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

A continuación, defina las siguientes clases en una hoja de estilo con el estilo de sus nuevas herramientas:

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

El tamaño de la imagen de una herramienta de debe ser de 15 x 15 px