web-dev-qa-db-fra.com

Icônes disponibles pour les boutons "outil" du panneau ExtJS

Comment définir l'icône utilisée dans la "barre de titre" de mon panneau? Peut-être que j'ai besoin d'ajouter une image moi-même, mais si c'est le cas, je suppose que je dois définir ou configurer cette image quelque part? 

{
    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');
            }
        },
        ...
    ]
},
extjs4
13
jm2

Vous pouvez spécifier un ensemble de 25 icônes en utilisant le type config. Check http://docs.sencha.com/ext-js/4-0/#!/api/Ext panel.Tool-cfg-type

Pour obtenir un symbole supplémentaire, utilisez

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

le type spécifié: 'add' n'est pas dans la liste

23
Jom

Si vous souhaitez ajouter votre propre type d’outil et pouvoir lui attribuer une image, vous pouvez procéder comme suit:

Ajoutez une classe css dans votre fichier css:

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

Ensuite, dans vos outils, utilisez simplement "mytool" comme type:

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

Assurez-vous que vous utilisez le même nom dans le type d'outil que vous avez utilisé pour le suffixe de classe css.

14
Farish

selon la documentation ExtJS, ces types prédéfinis sont 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

on peut entrer comme on veut

{type: 'YOURTYPE'}

en fournissant un 15px icon - ou de préférence des sprites d'icônes

(la position d'arrière-plan ne s'applique certainement pas aux icônes simples, mais aux sprites d'icônes):

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

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

4
Martin Zeitler

Je pense que vous voulez dire "les boutons de réglage utilisés dans la barre de titre de mon panneau", pas "l'icône de réglage". Vous pouvez utiliser buttons config de Panel, pas tools:

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

Vous pouvez utiliser d'autres configurations telles que bbar (barre inférieure), fbar (pied de page), tbar (haut), lbar (gauche), rbar (droite) pour positionner la barre d'outils. Un petit avis est que les objets de configuration dans buttons ont la valeur par défaut xtype en tant que button, vous n'avez donc pas besoin de les spécifier explicitement.

1
U and me