1. #1
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    186
    Vote Rating
    14
    EPV will become famous soon enough

      2  

    Default Icon fonts in Ext JS

    Icon fonts in Ext JS


    There has been a great amount of buzz surrounding icons fonts the last year. An icon font is a font with icons instead of letters. It gives you the opportunity to embed a font with all your icons into your Web/ExtJS project. Icons fonts are scalable & lightweight, gives your UI a consistent look, are supported by most browsers (even IE6/IE7), are easily themed and most important: they look really good.

    I'll describe the procedure in a few steps, feel free to comment and share your input.
    • Download your favorite icon font, or build your own at www.icomoon.io (recommended). From the icomoon App you can select icons from many different libraries (with their own licences) and download a package with the font and stylesheet with the icon-classes.
    • Add the font library (usually /fonts) to your resources folder in your application root folder.
    • Add your generated stylesheet (usually styles.css) to your resources folder and rename it to iconfont.css.
    • Embdedd your stylesheet to your application index file.
      Code:
      <link rel="stylesheet" href="resources/iconfont.css">
    • Edit the stylesheet and change line-height: 1; to line-height: 16px; and add font-size: 14px; to your icons-class. It should look something like this:
      Code:
      .icon-plus-alt:before, .icon-minus-alt:before {    
          font-family: 'meetfont';
          speak: none;
          font-style: normal;
          font-weight: normal;
          line-height: 16px;
          -webkit-font-smoothing: antialiased;
          font-size: 14px;
      }
    • In my example I added two icons to my font icon-plus-alt & icon-minus-alt which gave me the following icon-classes:
      Code:
      .icon-plus-alt:before {
          content: "\e000";
      }
      .icon-minus-alt:before {
          content: "\e001";
      }
    • You can now add your icons to your buttons via the iconCls property.
      Code:
      {
          text: 'Create',
          iconCls: 'action-create'
      },
      {
          text: 'Delete',
          iconCls: 'action-delete'
      }
    • The icons are monochrome but can easily be styled to a color that you prefer (do that in your theme scss or application css so you easily can override the font file).
      Code:
      .greenButton .x-btn-icon {
          color: #3da81d;
      }
    • If you want to add medium sized buttons you can add classes like this:
      Code:
      .x-btn-default-toolbar-medium .x-btn-inner{
          font-size: 13px; 
      }
      .x-btn-default-toolbar-medium .x-btn-icon:before{
          font-size: 20px;
          line-height: 24px;
      }
    I've also made a small override to the actioncolumn to make it possible for that using icon fonts as well. Tabheaders, cellrenderers are fine also tested with nice results. If your interested I can post code for that to.

    I've only been playing around with this stuff for a short while but see a big potential. I guess that there's things to improve so please give me feedback. The only bump so far is the panel header which I haven't have time to take care of yet (feel free to beat me to it).

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Sencha Touch 2 just moved to icon fonts and I too see a huge benefit using them.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    3
    Vote Rating
    0
    svi is on a distinguished road

      0  

    Default


    I want to use icon fonts in a project as well. Therefore I did some experiments with the grid.

    Unfortunately I'm not able to add an icon to an action column. I would be very interested in the code to use icon fonts in action columns.

    Thank you.

  4. #4
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    186
    Vote Rating
    14
    EPV will become famous soon enough

      1  

    Default


    Try this:


    Code:
    //Action Column
    Ext.define('ISAK.overrides.grid.column.Action', {
        override: 'Ext.grid.column.Action',
        // Renderer closure iterates through items creating an <img> element for each and tagging with an identifying
        // class name x-action-col-{n}
        defaultRenderer: function (v, meta, record, rowIdx, colIdx, store, view) {
            var me = this,
                prefix = Ext.baseCSSPrefix,
                scope = me.origScope || me,
                items = me.items,
                len = items.length,
                i = 0,
                item,
                disabled,
                tooltip;
    
    
            // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
            v = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
    
    
            meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
            for (; i < len; i++) {
                item = items[i];
    
    
                disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || scope, view, rowIdx, colIdx, item, record) : false);
                tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));
    
    
                // Only process the item action setup once.
                if (!item.hasActionConfiguration) {
    
    
                    // Apply our documented default to all items
                    item.stopSelection = me.stopSelection;
                    item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
                    item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
                    item.hasActionConfiguration = true;
                }
    
    
                //  THIS IS CHANGED
                v += '<div class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
                    ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
                    (tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' ></div>';
            }
            return v;
        }
    });

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2013
    Posts
    3
    Vote Rating
    0
    svi is on a distinguished road

      0  

    Default


    Hey Emil, nice job! It's working fine.
    Samuel

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2013
    Posts
    66
    Vote Rating
    0
    LandryAssocies is on a distinguished road

      0  

    Default


    I have the following in my app.scss

    @include icon('projects','9','IcoMoon');

    Which allows me to add to the IconCls of a tab the cls 'projects'.

    I'm not quite sure i understood the part where you change the color of it with a second class? (Ie green button)

    would you mind explaining how I should do it so that my icon is always white?


    Thank you, it would really help me alot has my current solution is messing with other thing which it should not.

  7. #7
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    441
    Vote Rating
    7
    wemerson.januario will become famous soon enough

      0  

    Default Can't use font icon in actioncolum Ext 4.2.x

    Can't use font icon in actioncolum Ext 4.2.x


    I can't use this override in Ext 4.2.x. I need to use fontAwesome or any icon fonts classes in actioncolumns. Thanks. Can you help me?
    Wemerson Januario
    Twitter:
    @wemersonjanuar
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 9106-6689
    From: Goiânia, Brazil
    Desenvolvedor ExtJS/ ExtJS Developer

  8. #8
    Sencha User
    Join Date
    Nov 2012
    Posts
    105
    Vote Rating
    5
    Kevin Jackson is on a distinguished road

      0  

    Default


    Could you flesh out the issue on why the solution will not work for you?

  9. #9
    Sencha Premium Member EPV's Avatar
    Join Date
    Dec 2010
    Location
    Sweden
    Posts
    186
    Vote Rating
    14
    EPV will become famous soon enough

      0  

    Default


    This is the override we're using in Ext JS 4.2.2.

    Good Luck / E

    Code:
    Ext.define('MyApp.overrides.grid.column.Action', {
        override: 'Ext.grid.column.Action',
        defaultRenderer: function(v, meta, record, rowIdx, colIdx, store, view){
            var me = this,
                prefix = Ext.baseCSSPrefix,
                scope = me.origScope || me,
                items = me.items,
                len = items.length,
                i = 0,
                item, ret, disabled, tooltip;
    
    
            // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
            // Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
            // we will pass an incorrect value to getClass/getTip
            ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
    
    
            meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
            for (; i < len; i++) {
                item = items[i];
    
    
                disabled = item.disabled || (item.isDisabled ? item.isDisabled.call(item.scope || scope, view, rowIdx, colIdx, item, record) : false);
                tooltip = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(item.scope || scope, arguments) : null));
    
    
                // Only process the item action setup once.
                if (!item.hasActionConfiguration) {
    
    
                    // Apply our documented default to all items
                    item.stopSelection = me.stopSelection;
                    item.disable = Ext.Function.bind(me.disableAction, me, [i], 0);
                    item.enable = Ext.Function.bind(me.enableAction, me, [i], 0);
                    item.hasActionConfiguration = true;
                }
    
    
                //img changed to div to accept iconFonts
                ret += '<div role="button" class="' + prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') +
                    ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(item.scope || scope, arguments) : (item.iconCls || me.iconCls || '')) + '"' +
                    (tooltip ? ' data-qtip="' + tooltip + '"' : '') + ' ></div>';
            }
            return ret;    
        }
    });

  10. #10
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    This is one I'm using for Fiddle:

    Code:
    Ext.define('Override.grid.column.Action', {
        override : 'Ext.grid.column.Action',
    
        iconTpl : '<tpl for=".">' +
            '<tpl if="glyph">' +
                '<div class="{cls}" style="font-family:{glyphFamily}; font-size:13px; line-height: 15px;"<tpl if="tooltip"> data-qtip="{tooltip}"</tpl>>&#{glyph};</div>' +
            '<tpl else>' +
                '<img role="button" alt="{alt}" class="{cls}"<tpl if="tooltip"> data-qtip="{tooltip}"</tpl> />' +
            '</tpl>' +
        '</tpl>',
    
        defaultRenderer : function(v, meta, record, rowIdx, colIdx, store, view) {
            var me            = this,
                prefix        = Ext.baseCSSPrefix,
                scope         = me.origScope || me,
                items         = me.items,
                altText       = me.altText,
                disableAction = me.disableAction,
                enableAction  = me.enableAction,
                iconCls       = me.iconCls,
                len           = items.length,
                i             = 0,
                iconTpl       = new Ext.XTemplate(me.iconTpl),
                datas         = [],
                item, itemScope, ret, disabled, tooltip, glyph, cls, data;
    
            // Allow a configured renderer to create initial value (And set the other values in the "metadata" argument!)
            // Assign a new variable here, since if we modify "v" it will also modify the arguments collection, meaning
            // we will pass an incorrect value to getClass/getTip
            ret = Ext.isFunction(me.origRenderer) ? me.origRenderer.apply(scope, arguments) || '' : '';
    
            meta.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
    
            for (; i < len; i++) {
                item      = items[i];
                itemScope = item.scope || scope;
                disabled  = item.disabled || (item.isDisabled ? item.isDisabled.call(itemScope, view, rowIdx, colIdx, item, record) : false);
                tooltip   = disabled ? null : (item.tooltip || (item.getTip ? item.getTip.apply(itemScope, arguments) : null));
                glyph     = item.glyph || item.getGlyph;
                cls       = Ext.String.trim(prefix + 'action-col-icon ' + prefix + 'action-col-' + String(i) + ' ' + (disabled ? prefix + 'item-disabled' : ' ') + ' ' + (Ext.isFunction(item.getClass) ? item.getClass.apply(itemScope, arguments) : (item.iconCls || iconCls || '')));
                data      = {
                    cls     : cls,
                    tooltip : tooltip
                };
    
                // Only process the item action setup once.
                if (!item.hasActionConfiguration) {
                    // Apply our documented default to all items
                    item.stopSelection          = me.stopSelection;
                    item.disable                = Ext.Function.bind(disableAction, me, [i], 0);
                    item.enable                 = Ext.Function.bind(enableAction, me, [i], 0);
                    item.hasActionConfiguration = true;
                }
    
                if (glyph) {
                    if (Ext.isFunction(glyph)) {
                        glyph = glyph.call(itemScope, view, rowIdx, colIdx, item, record);
                    }
    
                    if (glyph) {
                        glyph = glyph.split('@');
    
                        data.glyph       = glyph[0];
                        data.glyphFamily = glyph[1];
                    } else {
                        data = false;
                    }
                } else {
                    data.alt = item.altText || altText;
                    data.src = item.icon || Ext.BLANK_IMAGE_URL;
                }
    
                data && datas.push(data);
            }
    
            len && (ret += iconTpl.apply(datas));
    
            return ret;
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.