Verfügbare Symbole für die "Werkzeug" -Tasten des ExtJS-Panels

Question

Wie kann ich das in der Titelleiste meines Panels verwendete Symbol einstellen? Vielleicht muss ich selbst ein Bild hinzufügen, aber wenn ja, muss ich das irgendwo definieren oder konfigurieren?

{ 
    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

Es gibt 25 Symbole, die mit dem Typ config angegeben werden können. Check http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool-cfg-type

Zum Symbol Verwendung

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

der angegebenen Typ zu erhalten hinzufügen: zu 'add' ist nicht in der Liste

Answer 2

Ich glaube, Sie "set Schaltflächen in meiner Panel Titelleiste verwendet" bedeutet, nicht "gesetzt Symbol". Sie können buttons Config-Panel verwenden, nicht tools:

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

Sie andere Konfigurationen wie bbar (untere Leiste) verwenden können, fbar (Footer), tbar (oben), lbar (links), rbar (rechts) für Positionieren Sie die Symbolleiste. Ein kleiner Hinweis ist, dass die Konfigurationsobjekte in buttons standardmäßig xtype als button haben, so dass Sie sie nicht explizit angeben müssen.

Answer 3

Wenn Sie Ihren eigenen Werkzeugtyp hinzufügen und in der Lage sein, Weisen Sie ihm ein eigenes Bild zu:

Fügen Sie eine CSS-Klasse in Ihre CSS-Datei ein:

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

Dann in Ihre Werkzeuge, verwenden Sie einfach ‚MyTool‘ als Typ:

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

Stellen Sie sicher, dass Sie den gleichen Namen in Tool-Typ verwenden, wie Sie für die CSS-Klasse Suffix verwendet.

Answer 4

nach der ExtJS Dokumentation sind diese vordefinierten Typen zur Verfügung:

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 

ein eingeben kann unabhängig von der Art man will:

{type: 'YOURTYPE'} 

während ein 15px Symbol bereitstellt - oder vorzugsweise Symbol Sprites

(die Hintergrund-Position gilt sicherlich nicht für einzelne Icons, sondern Icon-Sprites):

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

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