Sosem értettem, hogy miért kell a icon és az iconCls-t így túlbonyolítani, bőven elég lenne csak az egyik (az icon), ám mégis néhol mindkettő van, néhol meg csak az iconCls.
Az ötlet, hogy készítsek egy singleton osztályt ennek a dilemmának a feloldására nem saját, ám a több megoldás közül egyik sem tetszett, így hát íme a száz plusz egyedik leegyszerűsített Ext.ux.iconCls:
Ext.ux.iconCls = function() {
var styleSheetId = 'styleSheetIconCls';
Ext.util.CSS.createStyleSheet('/* Ext.ux.iconCls */', styleSheetId);
var cssClasses = {};
return {
get: function(icon) {
if (!icon) return null;
if (typeof cssClasses[icon] == 'undefined') {
cssClasses[icon] = 'icon_' + Ext.id();
var styleBody = '\n.'+cssClasses[icon]+' { background-image: url('+icon+') !important; }';
if (Ext.isIE) {
document.styleSheets[styleSheetId].cssText += styleBody;
} else {
Ext.get(styleSheetId).dom.sheet.insertRule(styleBody, 0);
}
}
return cssClasses[icon];
}
};
}();
var styleSheetId = 'styleSheetIconCls';
Ext.util.CSS.createStyleSheet('/* Ext.ux.iconCls */', styleSheetId);
var cssClasses = {};
return {
get: function(icon) {
if (!icon) return null;
if (typeof cssClasses[icon] == 'undefined') {
cssClasses[icon] = 'icon_' + Ext.id();
var styleBody = '\n.'+cssClasses[icon]+' { background-image: url('+icon+') !important; }';
if (Ext.isIE) {
document.styleSheets[styleSheetId].cssText += styleBody;
} else {
Ext.get(styleSheetId).dom.sheet.insertRule(styleBody, 0);
}
}
return cssClasses[icon];
}
};
}();
Használata roppant egyszerű:
new Ext.valami({
...,
iconCls: Ext.ux.iconCls.get( 'img.png' )
});
...,
iconCls: Ext.ux.iconCls.get( 'img.png' )
});
