Iconos disponibles para los botones "herramienta" del Panel de ExtJS

Question

¿Cómo puedo configurar el icono utilizado en la "Barra de título" de mi Panel? Quizás necesite agregar una imagen yo mismo, pero si es así, ¿supongo que necesito definirla o configurarla en alguna parte?

{ 
    xtype: 'treepanel', 
    title: 'Projects', 
    width: 200, 
    store: Ext.data.StoreManager.lookup('projects'), 
    tools: [ 
     { 
      type: 'add', // this doesn't appear to work, probably I need to use a valid class 
      tooltip: 'Add project', 
      handler: function() { 
       console.log('TODO: Add project'); 
      } 
     }, 
     ... 
    ] 
}, 

Answer 1

Hay un conjunto de 25 iconos que pueden especificarse mediante el tipo config. cheque http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool-cfg-type

Para añadir el uso de símbolos

tools:[{ 
    type:'plus', 
    tooltip: 'Add project', 
    // hidden:true, 
    handler: function(event, toolEl, panel){ 
     // Add logic 
    } 
}] 

la especificada tipo: 'añadir' no está en la lista

Answer 2

Creo que significa "establecer botones utilizados en la barra de título de mi panel", no "configurar el icono". Puede utilizar buttons configuración del panel, no tools:

buttons: [{ 
    text: 'Add', 
    tooltip: 'Add project', 
    handler: function() { 
     console.log('TODO: Add project'); 
    } 
}] 

puede utilizar otras configuraciones como bbar (barra inferior), fbar (pie de página), tbar (arriba), lbar (izquierda), rbar (derecha) para posicionar la barra de herramientas. Un pequeño aviso es que los objetos de configuración en buttons tienen el valor predeterminado xtype como button, por lo que no es necesario que los especifique explícitamente.

Answer 3

Si desea añadir su tipo de herramienta y poder asígnele una imagen propia, puede hacer lo siguiente:

Agregar una clase css en su archivo css:

.x-tool-mytool { background-image: url(path_to_your_image_file) !important; } 

Luego, en sus herramientas, basta con utilizar 'mytool' como el tipo:

  { 
       type:'mytool', 
       tooltip: 'This is my tool', 
       handler: function(event, toolEl, panel){ 
        // my tool logic 
       } 
      } 

Asegúrese de que se utiliza el mismo nombre en el tipo de herramienta que utilizó para el sufijo clase CSS.

Answer 4

según la documentación ExtJS, estos tipos predefinidos están disponibles:

collapse, expand, maximize, minimize, resize, restore, move, close 

minus, plus, prev, next, pin, unpin, search, toggle, refresh 

save, print, gear, help 

right, left, up, down 

uno puede entrar cualquiera que sea un tipo quiere:

{type: 'YOURTYPE'} 

la vez que proporciona un 15px icono - o preferiblemente icono sprites

(la posición de fondo ciertamente no se aplica a iconos individuales, sino a sprites de iconos):

.x-tool-img.x-tool-YOURTYPE{ 
    background: url('../images/custom_tool_sprites.png') no-repeat 0 0; 
} 

fuentes: Ext.panel.Tool-cfg-type, codefx.biz.