Ext.ux.IconLoader

[mitch_feaster]

this is hardly an extension, it's just a little helper utility I've been using to load icons (namely the famfamfam icons) in my pages.

I used to just include a huge (on the order of 100Kb) CSS file with rules for every single famfamfam icon but with this helper utility I don't have to do that anymore and I still get easy access to all the icons.

Example usage:

//no need for the following line if you just edit the attached source file
Ext.ux.IconLoader.init('http://famfamfam.googlecode.com/svn/wiki/images/'); //note the trailing slash

//"register" the icons you're going to be using on the page:
Ext.ux.IconLoader.reg('accept.png', 'cross.png'); //will create the css rules necessary to use accept.png and cross.png as background images.

//use them!
new Ext.Button({iconCls: 'icon-accept', renderTo: Ext.getBody(), text: 'hello, world'});
new Ext.Button({iconCls: 'icon-cross', renderTo: Ext.getBody(), text: 'hello, world again'}); 

The css rules generated will be in the format: "icon-" + filename (without extension and _ replaced with -). For example:

Ext.ux.IconLoader.reg('application_add.png', 'application_edit.png', 'application_double.png') 

would create a css rule like so:

.icon-application-add {
  background-image: url(path_to_icons/application_add.png) !important;
}
.icon-application-edit {
  background-image: url(path_to_icons/application_edit.png) !important;
}
.icon-application-double {
  background-image: url(path_to_icons/application_double.png) !important;
} 

Tested in firefox (3.5, 3.0), Internet Explorer (8), Chrome.

[mystix]

the code's short and neat. i like

[danh2000]

I like this too - I'll probably use it.

Well done!

[steffenk]

Great! I start using it for TYPO3 using our skin icons

Many thanks!

[salihgedik]

Gr8. You should add a demo

[mystix]

Gr8. You should add a demo

you've never seen a CSS file in action?

[salihgedik]

you've never seen a CSS file in action?

Nope. Never

[e-mike]

Thanks, i changed a bit and post it here to share...

Two icon paths, one hosted by google and one at your own host after download...

For IE6 use gif... So load without extension...

Look at TDGi version for a function way of loading...

            // http://www.famfamfam.com
            // http://code.google.com/p/famfamfam/
            // http://code.google.com/p/famfamfam/wiki/all_icons_png
            // http://www.yui-ext.com/forum/showthread.php?p=363120
            // http://tdg-i.com/js/examples/ext/tdgiux/TDGi.iconMgr/
            Ext.ns('Ext.ux.icons');
            Ext.ux.icons.load = function(){
                //iconsPath = 'http://famfamfam.googlecode.com/svn/wiki/images/';
                iconsPath = 'assets/ext/icons/';
                iconExt = (Ext.isIE6) ? '.gif' : '.png'; newStyle  = '';
                Ext.each(arguments, function(iconName){
                    className = 'icon-' + iconName.replace(/_/g, '-');
                    iconPath = String.format('{0}{1}', iconsPath, iconName + iconExt)
                    newStyle += String.format('.{0} { background-image: url(' + iconPath + ') !important; background-repeat: no-repeat; }', className)
                });
                Ext.util.CSS.createStyleSheet(newStyle, 'dynamic-icons');
            };
            Ext.ux.icons.load('text_list_bullets', 'group', 'user', 'calendar', 'calendar', 
                'basket', 'overlays', 'television', 'camera', 'page_white', 'newspaper', 'wrench');

[jay@moduscreate.com]

Cool utility

[e-mike]

Thanks... It's not really mine... I combined two (source see links) and gave it my own twist... I'd like to extend it more to also add a function way of loading non pre-loaded icons. Like TDGi does. But for now this will do. The only thing you have to think of is adding a new icon to the pre-loader else the requested icon doesn't work. (It does not add a css class if you don't load it first)