Search code examples
extjs4

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


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

Solution

  • 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