Icons available for ExtJS's Panel's "tool" buttons

Question

How can I set icon used in my Panel's "Title Bar"? Maybe I need to add an image myself, but if so I suppose I need to define or configure that somewhere?

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

Hmm, have you tried: items:[{ icon : ///Some url }] ? – Leron May 21 '12 at 09:55 — Leron, May 21 '12 at 09:55

Jom · Accepted Answer · 2012-05-21T10:34:17.080

24

There are a set of 25 icons that can be specified by using the type config. check http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool-cfg-type

To get add symbol use

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

the specified type:'add' is not in the list

edited May 21 '12 at 10:34

answered May 21 '12 at 10:28

Jom

1,877
5
29
46

score 15 · Answer 2 · answered Oct 31 '12 at 09:11

If you want to add your own tool type and be able to assign it an image of your own, you can do the following:

Add a css class in your css file:

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

Then in your tools, simply use 'mytool' as the type:

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

Make sure that you use the same name in tool's type as you used for the css class suffix.

Martin Zeitler · Answer 3 · 2015-01-27T19:01:40.493

according to the ExtJS documentation, these predefined types are available:

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

one can enter whatever type one wants:

{type: 'YOURTYPE'}

while providing a 15px icon - or preferably icon sprites

(the background-position certainly not applies for single icons, but icon sprites):

.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.

U and me · Answer 4 · 2012-05-21T10:08:49.663

I think you mean "set buttons used in my Panel's Title Bar", not "set icon". You can use buttons config of Panel, not tools:

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

You can use other configurations like bbar (bottom bar), fbar (footer), tbar (top), lbar (left), rbar (right) for position the toolbar. One small notice is the config objects in buttons have the default xtype as button, so you don't need to explicitly specify them.

Icons available for ExtJS's Panel's "tool" buttons

4 Answers4