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?

    [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,062
    Vote Rating
    215
    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 recruiting manager:
    sheryl@sencha.com

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

      1  

    Default Working Override

    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
    Twitter:
    @januariocoder
    Email: wemerson.januario@gmail.com

    From: Goiânia, Brazil
    Ext JS Developer

Thread Participants: 2