PDA

View Full Version : Ext.ux.iconMgr



galdaka
24 Sep 2008, 3:21 AM
I create a modified version of this code: http://extjs.com/forum/showthread.php?p=195122#post195122 for my pourposes.

I think this feature must be added in Ext Core. Automatically select .GIF or .PNG based css class.



Ext.ns('Ext.ux');
Ext.ux.iconMgr = function(iconName) {
var ruleBodyTpl = ' \n\r .{0} { background-image: url({1}) !important; }';
var styleSheetId = 'iconMgr_' + Ext.id();
var styleSheet = Ext.get(Ext.util.CSS.createStyleSheet('/* iconMgr stylesheet */\n', styleSheetId));
var imgExtension = (Ext.isIE6) ? '.gif' : '.png';
return {
getIcon : function(iconPath, icon) {
var cls = 'icon_' + Ext.id();
var iconImgPath = iconPath + icon + imgExtension;
var styleBody = String.format(ruleBodyTpl, cls, iconImgPath);
var styleSheet = Ext.get(styleSheetId);
if (! Ext.isIE) {
styleSheet.dom.sheet.insertRule(styleBody, styleSheet.dom.sheet.cssRules.length);
}
else {
document.styleSheets[styleSheetId].cssText += styleBody;
}
Ext.util.CSS.refreshCache();
return(cls);
}
}
}();


Usage:



...
tbar:[{
text: ' Guardar',
iconCls: Ext.ux.iconMgr.getIcon('http://XXX/ux/icons/', 'database_save'),
handler:function(){...}
}
....


Greetings,

jay@moduscreate.com
24 Sep 2008, 3:42 AM
Awesome. But why are you using absolute paths instead of relative? is the XXX domain not the same one serving the application?

galdaka
24 Sep 2008, 3:53 AM
Awesome. But why are you using absolute paths instead of relative? is the XXX domain not the same one serving the application?

I have the icons in other Lotus Notes database (Other domain, server, etc.)

Greetings,

Yoris
24 Sep 2008, 4:05 AM
Nice implementation, thanks for sharing!
but i dont think it should be added in ext, this one of those rare plugins you should keep as a plugin

jay@moduscreate.com
24 Sep 2008, 4:09 AM
agreed. :)

mjlecomte
29 Sep 2008, 7:50 PM
Thanks for the original creation here Jay. I was about to post a suggestion in your thread, Galdaka took it in a direction I was going to suggest so I'll indicate my suggestions here.

I had same thought, to make it easier to specify the icon path, but why not make it both optional and configurable on the fly?



Ext.ns('Ext.ux');
Ext.ux.iconMgr = function(iconName){ //what is iconName for?
//var iconBase = 'TDGi.iconMgr/';//original base directory
//this default base directory might be more flexible (icons folder within this ux)
var iconBase = './';
var ruleBodyTpl = ' \n\r .{0} { background-image: url({1}) !important; }';
var styleSheetId = 'iconMgr_' + Ext.id();
var styleSheet = Ext.get(Ext.util.CSS.createStyleSheet('/* iconMgr stylesheet */\n', styleSheetId));
var imgExtension = (Ext.isIE6) ? '.gif' : '.png';
return {
//switch icon and iconPath so path can be optional
getIcon: function(icon, iconPath){
var cls = 'icon_' + Ext.id();
//use default base path unless specified
var iconPath = iconPath || iconBase;
var iconImgPath = iconPath + icon + imgExtension;
var styleBody = String.format(ruleBodyTpl, cls, iconImgPath);
var styleSheet = Ext.get(styleSheetId);
if (!Ext.isIE) {
styleSheet.dom.sheet.insertRule(styleBody, styleSheet.dom.sheet.cssRules.length);
}
else {
document.styleSheets[styleSheetId].cssText += styleBody;
}
Ext.util.CSS.refreshCache();
return (cls);
},
//accessor to change the default base so don't have to alter ux
setBase: function(iconPath){
iconBase = iconPath;
}
}
}();

galdaka
29 Sep 2008, 11:24 PM
Hey,

Thanks for the corrections.

1)
Ext.ux.iconMgr = function(iconName){ //what is iconName for? Is a mistake.

The correct code will be:
Ext.ux.iconMgr = function(){


Thanks in advance,

jay@moduscreate.com
30 Sep 2008, 3:12 AM
Thanks for the original creation here Jay. I was about to post a suggestion in your thread, Galdaka took it in a direction I was going to suggest so I'll indicate my suggestions here.

I had same thought, to make it easier to specify the icon path, but why not make it both optional and configurable on the fly?

MJ,

the original version actually had a setPath method. I removed it because i didn't want folks to have to remember to set the path at run time. So, i modified it to use a static URL. For most applications i develop, the icon base path is static, which is why i merged two icon sets.

It's important to note that this tool, like many, are built for my needs first, then somewhat adapted for public consumption.

Also, your setBase method breaks Galdaka's modification of my ux.

jay@moduscreate.com
30 Sep 2008, 3:16 AM
While i don't expect anyone here to visit my site, i did post about it there ;)

http://tdg-i.com/52/tdgiiconmgr-and-iconbrowser-update


August 20th, 2008 Jay Garcia Posted in Ext Extensions |

I’ve updated my Ext User Extension, Ext.ux.TDGi.iconMgr, for use with Ext 2.2 and removed the requirement to perform a setPath on either extension singleton. Simply put the path to where you placed the extension as the value for iconBase on both iconMgr and iconBrowser and you’re set.

mjlecomte
30 Sep 2008, 6:45 AM
No problem, understood, just sharing my revisions

To clarify, setPath is not required. You'd still use the default base path like you had it. setPath just offers the ability to change the basePath dynamically.

Not sure what broke on yours, it's working fine for me. I set the default base in the extension to serve as whatever base path I have and then I just specify the name of the icon as you had used it in your original ux.

If I have icons stored in another location then I can either:

specify the path manually each time I use addIcon() or
just set the base path again.


Anyway, here's the ux code I'm using:

Ext.ns('Ext.ux');
/**
* @class Ext.ux.iconMgr
* Original source has been modified.
*/

/*
Author : Jay Garcia
Site : http://tdg-i.com
Contact Info : jgarcia@tdg-i.com
Purpose : CSS set using the famfamfam silk icon set.
Icon Sources : http://www.famfamfam.com/lab/icons/silk/
:
Warranty : none
Price : free
*/

Ext.ux.iconMgr = function(){
//var iconBase = 'TDGi.iconMgr/';//original base directory
//assume default is icons folder within this ux directory
var iconBase = './icons/';
var ruleBodyTpl = ' \n\r .{0} { background-image: url({1}) !important; }';
var styleSheetId = 'iconMgr_' + Ext.id();
var styleSheet = Ext.get(Ext.util.CSS.createStyleSheet('/* iconMgr stylesheet */\n', styleSheetId));
var imgExtension = (Ext.isIE6) ? '.gif' : '.png';
return {
//switch icon and iconPath so path can be optional
getIcon: function(icon, iconPath){
var cls = 'icon_' + Ext.id();
//use default base path unless specified
var iconPath = iconPath || iconBase;
var iconImgPath = iconPath + icon + imgExtension;
var styleBody = String.format(ruleBodyTpl, cls, iconImgPath);
var styleSheet = Ext.get(styleSheetId);
if (!Ext.isIE) {
styleSheet.dom.sheet.insertRule(styleBody, styleSheet.dom.sheet.cssRules.length);
}
else {
// Per http://www.quirksmode.org/dom/w3c_css.html#properties
document.styleSheets[styleSheetId].cssText += styleBody;
}
Ext.util.CSS.refreshCache();
return (cls);
},
//accessor to change the default base so don't have to alter ux
setBase: function(iconPath){
iconBase = iconPath;
}
}
}();