Ikony dostępne dla przycisków "narzędzi" panelu ExtJS

Question

Jak ustawić ikonę używaną w pasku tytułowym mojego panelu? Może powinienem dodać obraz samodzielnie, ale jeśli tak, to przypuszczam, że muszę to gdzieś zdefiniować lub skonfigurować?

{ 
    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

Istnieje zestaw 25 ikon, które można określić za pomocą typu config. check http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool-cfg-type

Aby dodać Użyj symbol

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

określony typu: „dodać” nie znajduje się na liście

Answer 2

Myślę, że masz na myśli "zestaw przycisków używanych w pasku tytułu mojego panelu", a nie "ustaw ikonę". Można użyć buttons config z panelu nie tools:

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

można korzystać z innych konfiguracjach jak bbar (dolnym pasku), fbar (stopki), tbar (u góry) lbar (po lewej), rbar (prawej) ustaw pasek narzędzi. Jedno małe powiadomienie to obiekty konfiguracyjne w buttons mają domyślną wartość xtype jako button, więc nie trzeba ich jawnie określać.

Answer 3

Jeśli chcesz dodać własny typ narzędzia i umieć przypisz mu własny obraz, możesz wykonać następujące czynności:

Dodaj klasę css do pliku css:

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

Następnie w swoich narzędzi, wystarczy użyć „mytool” jako typ:

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

Upewnij się, że używasz tej samej nazwy w rodzaju narzędzie jako użyłeś dla przyrostka klasy css.

Answer 4

według dokumentacji ExtJS, dostępne są te predefiniowane typy:

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 

można wpisać cokolwiek typ chce:

{type: 'YOURTYPE'} 

zapewniając jednocześnie 15px ikonę - lub najlepiej ikona ikonek

(pozycja tła z pewnością nie dotyczy pojedynczych ikon, ale ikony ikon):

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

źródła: Ext.panel.Tool-cfg-type, codefx.biz.