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
    4,769
    Vote Rating
    164
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  3. #3
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goias, Goiânia
    Posts
    372
    Vote Rating
    4
    wemerson.januario is on a distinguished road

      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
    Skype:
    wemerson.januario
    Email: wemerson.januario@gmail.com
    Fone:
    62 84101145 - Goiânia-GO- Brazil
    Consulting and Training Ext JS
    Projects: (Nubes ERP)

Thread Participants: 2

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