1. #1

    Default Ext.ux.IconLoader

    Ext.ux.IconLoader


    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:

    PHP Code:
    //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'renderToExt.getBody(), text'hello, world'});
    new 
    Ext.Button({iconCls'icon-cross'renderToExt.getBody(), text'hello, world again'}); 
    The css rules generated will be in the format: "icon-" + filename (without extension and _ replaced with -). For example:
    PHP Code:
    Ext.ux.IconLoader.reg('application_add.png''application_edit.png''application_double.png'
    would create a css rule like so:
    PHP Code:
    .icon-application-add {
      
    background-imageurl(path_to_icons/application_add.png) !important;
    }
    .
    icon-application-edit {
      
    background-imageurl(path_to_icons/application_edit.png) !important;
    }
    .
    icon-application-double {
      
    background-imageurl(path_to_icons/application_double.png) !important;

    Tested in firefox (3.5, 3.0), Internet Explorer (8), Chrome.
    Attached Files
    Last edited by mitch_feaster; 27 Jul 2009 at 7:40 AM. Reason: stray period

  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    4
    mystix will become famous soon enough

      0  

    Default


    the code's short and neat. i like

  3. #3
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

    Default


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

    Well done!

  4. #4
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,649
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default


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

    Many thanks!
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  5. #5
    Sencha User salihgedik's Avatar
    Join Date
    Mar 2009
    Posts
    21
    Vote Rating
    0
    salihgedik is on a distinguished road

      0  

    Default


    Gr8. You should add a demo

  6. #6
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    4
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by salihgedik View Post
    Gr8. You should add a demo
    you've never seen a CSS file in action?

  7. #7
    Sencha User salihgedik's Avatar
    Join Date
    Mar 2009
    Posts
    21
    Vote Rating
    0
    salihgedik is on a distinguished road

      0  

    Default


    Quote Originally Posted by mystix View Post
    you've never seen a CSS file in action?
    Nope. Never

  8. #8
    Sencha User
    Join Date
    Jul 2009
    Posts
    16
    Vote Rating
    1
    e-mike is on a distinguished road

      0  

    Default


    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...

    Code:
                // 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');

  9. #9
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Cool utility

  10. #10
    Sencha User
    Join Date
    Jul 2009
    Posts
    16
    Vote Rating
    1
    e-mike is on a distinguished road

      0  

    Default


    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)

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar