PDA

View Full Version : Ext.ux.IconLoader



mitch_feaster
23 Jul 2009, 2:40 PM
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
23 Jul 2009, 6:32 PM
the code's short and neat. i like :)

danh2000
23 Jul 2009, 11:33 PM
I like this too - I'll probably use it.

Well done!

steffenk
24 Jul 2009, 2:09 AM
Great! I start using it for TYPO3 using our skin icons ;)

Many thanks!

salihgedik
24 Jul 2009, 7:48 AM
Gr8. You should add a demo :)

mystix
24 Jul 2009, 8:57 AM
Gr8. You should add a demo :)

you've never seen a CSS file in action? :-?

salihgedik
24 Jul 2009, 9:14 AM
you've never seen a CSS file in action? :-?

Nope. Never :s

e-mike
25 Jul 2009, 5:04 PM
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
26 Jul 2009, 2:47 AM
Cool utility :)

e-mike
26 Jul 2009, 5:02 AM
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)

wiznia
5 Aug 2009, 4:55 AM
I knew there was a better way to do this that maintaing a css file with the path to all the icons!
Right now I'm using famfam icons and some icons I made myself (located in different folders), is there a way with this extension to load icons from different sources?
It could be something like this:


Ext.ux.IconLoader.addIconLibrary('famfamfam', 'http://famfamfam.googlecode.com/svn/wiki/images/');
Ext.ux.IconLoader.addIconLibrary('myIcons', 'http://otherpath/');

Ext.ux.IconLoader.reg('famfamfam', ['accept.png', 'cross.png']);
Ext.ux.IconLoader.reg('myIcons', ['one.png', 'two.png']);

The name of the class could "icon-" + libraryname + "-" + filename (without extension and _ replaced with -).
What do you think?

jay@moduscreate.com
5 Aug 2009, 5:28 AM
i don't like the term "preloader". It registers the CSS rule, but the icon itself is not *loaded* until it's actually requested by the DOM.

jay@moduscreate.com
5 Aug 2009, 5:47 AM
I knew there was a better way to do this that maintaing a css file with the path to all the icons!
Right now I'm using famfam icons and some icons I made myself (located in different folders), is there a way with this extension to load icons from different sources?
It could be something like this:


Ext.ux.IconLoader.addIconLibrary('famfamfam', 'http://famfamfam.googlecode.com/svn/wiki/images/');
Ext.ux.IconLoader.addIconLibrary('myIcons', 'http://otherpath/');

Ext.ux.IconLoader.reg('famfamfam', ['accept.png', 'cross.png']);
Ext.ux.IconLoader.reg('myIcons', ['one.png', 'two.png']);

The name of the class could "icon-" + libraryname + "-" + filename (without extension and _ replaced with -).
What do you think?

The problem with this approach is that you have to remember the CSS Rule name. Also, if it's not "loaded" (as the author states), your icons never show.

For those who are wondering - the difference btwn my util (iconMgr) and this one, is that you need not remember CSS rule names - just the icon name.

Ext.ux.TDGi.iconMgr.getIcon('add') will register a CSS rule and cache the name. subsequent requests for this (or any) icon are looked up and if the icon is in the 'cache', the cached registered CSS name is used.

Also, this means that any component or application module can use icons ad-hoc, not requiring any "preloading" or "pre-registration" of CSS rules.

That said, iconMgr also is smart enough to use gifs for IE6, instead of improperly rendered PNG's.

wiznia
5 Aug 2009, 6:17 AM
You don't have to remember the css rule name, just add to the icon name and the library it belongs to.

mitch_feaster
5 Aug 2009, 8:25 AM
You don't have to remember the css rule name, just add to the icon name and the library it belongs to.

Indeed, there's no need to remember anything special besides "icon-" and the name of the image file.

@wiznia: I like that idea. Implement it and post it here (or wait for me to get around to it...)


Here's my opinion on the differences between this utility and the (excellent) tdgi one:

This is more of a "production code" utility. When I wrote it I wanted performance, not pretty, well-engineered code. All that my code does is runs a foreach loop when you call "reg" and then you're done with it. The rest is up to the browser and it's (highly optimized) css engine.

I'm not saying that my code is sloppy or ugly, but if you want a good example of architecture and ext best-practices (especially for writing extensions) read the tdgi one. If you want something that's fast and simple, use this one. As I stated in the first post, this is hardly an extension, just sort of a "helper" utility.

jay@moduscreate.com
5 Aug 2009, 8:46 AM
great points guys, i've edited that post ;)

jay@moduscreate.com
5 Aug 2009, 8:48 AM
This is more of a "production code" utility. When I wrote it I wanted performance, not pretty, well-engineered code. All that my code does is runs a foreach loop when you call "reg" and then you're done with it. The rest is up to the browser and it's (highly optimized) css engine.


Bravo for achieving this. Your utility certainly is much leaner. Thanks for providing this to the community and adding value.