Доступные значки для кнопок панели инструментов "ExtJS Panel"

Как я могу установить значок, используемый в моей панели заголовков? Возможно, мне нужно добавить изображение самостоятельно, но если так, я полагаю, мне нужно определить или настроить его где-нибудь?

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

Ответ 1

Существует набор из 25 значков, которые можно указать с помощью конфигурации типа. проверьте http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool-cfg-type

Чтобы использовать символ добавления

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

указанный тип: 'add' отсутствует в списке

Ответ 2

Если вы хотите добавить свой собственный тип инструмента и сможете назначить ему собственное изображение, вы можете сделать следующее:

Добавьте класс css в ваш файл css:

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

Затем в ваших инструментах просто используйте "mytool" в качестве типа:

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

Убедитесь, что вы используете одно и то же имя в типе инструмента, как и для суффикса класса css.

Ответ 3

в соответствии с документацией ExtJS, эти предопределенные типы доступны:

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

можно ввести любой тип, который вам нужен:

{type: 'YOURTYPE'}

обеспечивая значок 15px - или предпочтительно значки спрайтов

(фоновая позиция, конечно, не применяется для отдельных значков, но спрайтов спрайтов):

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

Источники: Ext.panel.Tool-cfg-type, codefx.biz.

Ответ 4

Я думаю, вы имеете в виду "кнопки набора, используемые в моей панели заголовка панели", а не "значок набора". Вы можете использовать buttons config панели, а не tools:

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

Вы можете использовать другие конфигурации, такие как bbar (нижняя панель), fbar (нижний колонтитул), tbar (верх), lbar (слева), rbar (справа) для размещения панели инструментов. Одно небольшое уведомление - объекты конфигурации в buttons имеют по умолчанию xtype как button, поэтому вам не нужно явно указывать их.