1. #1
    Sencha User
    Join Date
    Oct 2010
    Posts
    6
    Vote Rating
    0
    montafina is on a distinguished road

      0  

    Default [Ext 4.2.1] use a glyph in a actioncolumn instead of a css icon?

    does anyone knows a workaround to use a glyph instead of a cssIcon in an actioncolumn

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,120
    Vote Rating
    227
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      1  

    Default

    The actionColumn doesn't support glyphs out of the box, though I have seen a user extension set up to support glyphs.

    You can write your own extension of the ActionColumn class modifying the defaultRenderer method to support glyphs / font icons, though.
    http://docs.sencha.com/extjs/4.2.2/#...efaultRenderer
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our human resources manager: fabienne.bell@sencha.com

  3. #3
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    537
    Vote Rating
    27
    wemerson.januario has a spectacular aura about wemerson.januario has a spectacular aura about

      3  

    Default Working Override

    Quote Originally Posted by montafina View Post
    does anyone knows a workaround to use a glyph instead of a cssIcon in an actioncolumn
    This override works wellll!
    Code:
    Ext.define('AppOverrides.grid.column.Action', {
      override: 'Ext.grid.column.Action',
      
      iconTpl: '<tpl for=".">' +
              '<tpl if="glyph">' +
              '<div class="{cls}" style="font-family:{glyphFamily};  font-size:15px; 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;
      }
    });
    how to use:

    Code:
    {
              xtype: 'actioncolumn',
              width: 25,
              getGlyph: function(itemScope, rowIdx, colIdx, item, rec) {
    //your code here....
                return 'xf06e@FontAwesome';
              },
              tooltip: 'SOme tooltip',
              menuDisabled: true,
              sortable: false
            },
    Wemerson Januario
    Website: http://wemersonjanuario.com.br
    Twitter: https://twitter.com/januariocoder

    Email: wemerson.januario@gmail.com

    From: Goiânia, Brazil
    Ext JS Consulting, Training, Support

Thread Participants: 2