extjs - 有没有办法自定义 Ext.grid.column.action 中的工具提示？

Question

有没有办法自定义 Ext.grid.column.Action 中的工具提示？我想将 autoHide 设置为 false。

提前致谢

Answer 1

您可以通过覆盖或扩展 ActionColumn。

您可以从QuickTipManager文档中看到，如果您设置数据项，data-hide="user"则相当于autoHide=false.

ActionColumn 没有公开该功能，它只是使用默认值，因此我们必须覆盖 ActionColumns 的defaultRenderer.

defaultRenderer是一个受保护的模板函数，因此我们可以提供自己的渲染器和自定义配置。

首先从 ActionColumn 复制现有的defaultRenderer源，然后添加几行来处理我们的新配置。

我们可以将自定义tooltipAutoHide配置添加到操作配置中。然后在 defaultRenderer 中，我们可以读取该配置，默认为 true，data-hide="user"如果tooltipAutoHide:false设置了则渲染。

这是一个例子。相关线路是

读取配置

//Get custom 'tooltipAutoHide' config from tip
                tooltipAutoHide = item.tooltipAutoHide === false ? false : true;

如果为 false，则呈现 'data-hide="user"'

// write data-hide=user == autoHide:false 
                    (!tooltipAutoHide ? ' data-hide="user"' : '') +

在列定义中，设置tooltipAutoHide:true

{
  xtype:'myactioncolumn',
enter code here  items:[{
   tooltip: 'Edit',
   tooltipAutoHide: false
  }]
}

这是完整的样本

        Ext.define('Ext.ux.column.MyActionColumn', {
        extend: 'Ext.grid.column.Action',
        
        xtype: 'myactioncolumn',

        defaultRenderer: function (v, cellValues, record, rowIdx, colIdx, store, view) {
            var me = this,
                scope = me.origScope || me,
                items = me.items,
                len = items.length,
                i, item, ret, disabled, tooltip, altText, icon, glyph, tabIndex, ariaRole;

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

            cellValues.tdCls += ' ' + Ext.baseCSSPrefix + 'action-col-cell';
            for (i = 0; i < len; i++) {
                item = items[i];
                icon = item.icon;
                glyph = item.glyph;

                disabled = item.disabled || (item.isDisabled ? Ext.callback(item.isDisabled, item.scope || me.origScope, [view, rowIdx, colIdx, item, record], 0, me) : false);
                tooltip = item.tooltip || (item.getTip ? Ext.callback(item.getTip, item.scope || me.origScope, arguments, 0, me) : null);
                // 
                //Get custom 'tooltipAutoHide' config from tip
                tooltipAutoHide = item.tooltipAutoHide === false ? false : true;
                console.log(tooltipAutoHide);
                altText = item.getAltText ? Ext.callback(item.getAltText, item.scope || me.origScope, arguments, 0, me) : item.altText || me.altText;

                // 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;
                }

                // If the ActionItem is using a glyph, convert it to an Ext.Glyph instance so we can extract the data easily.
                if (glyph) {
                    glyph = Ext.Glyph.fly(glyph);
                }

                // Pull in tabIndex and ariarRols from item, unless the item is this, in which case
                // that would be wrong, and the icon would get column header values.
                tabIndex = (item !== me && item.tabIndex !== undefined) ? item.tabIndex : me.itemTabIndex;
                ariaRole = (item !== me && item.ariaRole !== undefined) ? item.ariaRole : me.itemAriaRole;

                ret += '<' + (icon ? 'img' : 'div') +
                    (typeof tabIndex === 'number' ? ' tabIndex="' + tabIndex + '"' : '') +
                    (ariaRole ? ' role="' + ariaRole + '"' : ' role="presentation"') +
                    (icon ? (' alt="' + altText + '" src="' + item.icon + '"') : '') +
                    ' class="' + me.actionIconCls + ' ' + Ext.baseCSSPrefix + 'action-col-' + String(i) + ' ' +
                    (disabled ? me.disabledCls + ' ' : ' ') +
                    (item.hidden ? Ext.baseCSSPrefix + 'hidden-display ' : '') +
                    (item.getClass ? Ext.callback(item.getClass, item.scope || me.origScope, arguments, undefined, me) : (item.iconCls || me.iconCls || '')) + '"' +
                    (tooltip ? ' data-qtip="' + tooltip + '"' : '') + 
                    // write data-hide=user == autoHide:false 
                    (!tooltipAutoHide ? ' data-hide="user"' : '') +
                    (icon ? '/>' : glyph ? (' style="font-family:' + glyph.fontFamily + '">' + glyph.character + '</div>') : '></div>');
            }

            return ret;
        }
    });

Ext.create('Ext.grid.Panel', {
        title: 'Action Column Demo',
        store: Ext.data.StoreManager.lookup('employeeStore'),
        columns: [{
            text: 'First Name',
            dataIndex: 'firstname'
        }, {
            text: 'Last Name',
            dataIndex: 'lastname'
        }, {
            xtype: 'myactioncolumn',
            width: 50,
            items: [{
                iconCls: 'x-fa fa-cog',
                tooltip: 'Edit',
                tooltipAutoHide: false,
                handler: function (grid, rowIndex, colIndex) {
                    var rec = grid.getStore().getAt(rowIndex);
                    alert("Edit " + rec.get('firstname'));
                }
            }]
        }],
        width: 250,
        renderTo: Ext.getBody()
    });

这是一个有效的Sencha Fiddle 示例。