PDA

View Full Version : use x-tool-close icon in toolbar



ttbgwt
31 Dec 2010, 8:16 AM
I'm trying to use the extjs close (X) icon for a button on a toolbar but can't get the icon to show?



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

skirtle
31 Dec 2010, 9:59 AM
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:


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.

ttbgwt
1 Jan 2011, 6:56 AM
Thanks skirtle! That worked...