Results 1 to 3 of 3

Thread: use x-tool-close icon in toolbar

  1. #1
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    432
    Vote Rating
    22
      0  

    Default use x-tool-close icon in toolbar

    I'm trying to use the extjs close (X) icon for a button on a toolbar but can't get the icon to show?

    Code:
    new Ext.Toolbar({
      cls: 'top-toolbar',
      items: [{
         iconCls: 'x-tool-close',
         tooltip: 'Close',
         handler: function () { Ext.getCmp('pumpList').collapse(); }
      }
    });

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,791
    Vote Rating
    394
      0  

    Default

    The window tools use an image sprite and the class x-tool-close merely positions the image, the other styling comes from x-tool. That said, even adding x-tool to your iconCls won't work because the styling doesn't play nicely with a toolbar button. I don't know of a magic config setting or CSS for this but the following brute-force approach worked for me:

    Code:
    new Ext.Toolbar({
        cls: 'top-toolbar',
        items: [{
            xtype: 'box',
            autoEl: {
                cls: 'x-tool x-tool-close',
                'ext:qtip': 'Close'
            },
            listeners: {
                afterrender: {
                    single: true,
                    fn: function(box) {
                        var el = box.getEl();
    
                        el.addClassOnOver('x-tool-close-over');
    
                        el.on('click', function() {
                            Ext.getCmp('pumpList').collapse();
                        });
                    }
                }
            }
        }]
    });
    I suspect there's an easier way but I haven't been able to find it yet.

  3. #3
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    432
    Vote Rating
    22
      0  

    Default

    Thanks skirtle! That worked...

Similar Threads

  1. Replies: 1
    Last Post: 23 Sep 2010, 3:44 AM
  2. Tool tip as 'close' on cross button in a window
    By awanish in forum Ext 3.x: Help & Discussion
    Replies: 5
    Last Post: 10 Sep 2010, 6:24 AM
  3. Want to add tool tip on tab panel's close icon
    By ravigupta84 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 9 Sep 2010, 4:23 AM
  4. Can we add 'refresh' tool in TabPanel like 'close' tool
    By syedarshadali in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 5 Nov 2009, 10:44 PM
  5. [FIXED] desktop: tool eventhandler tries to close wrong parent
    By lovelysystems in forum Ext GWT: Bugs (1.x)
    Replies: 3
    Last Post: 17 Sep 2008, 12:26 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •