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

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

---

提前感谢

您可以通过覆盖或扩展ActionColumn来实现

您可以从文档中看到，如果设置数据项，

data hide=“user”

与

autoHide=false

等效

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

defaultRenderer

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

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

我们可以将自定义的

tooltipAutoHide

config添加到操作配置中。然后在defaultRenderer中，我们可以读取该配置，默认为true，并在设置了

tooltipAutoHide:false

时渲染出

data hide=“user”

这里有一个例子。相关线路为：

读取配置文件

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

Ext.define（'Ext.ux.column.MyActionColumn'{
扩展：“Ext.grid.column.Action”，
xtype:“myactioncolumn”，
defaultRenderer:函数（v、cellValues、record、rowIdx、colIdx、store、view）{
var me=这个，
scope=me.origScope | | me，
items=me.items，
len=项目长度，
i、 项目，ret，禁用，工具提示，altText，图标，glyph，tabIndex，角色；
//允许已配置的渲染器创建初始值（并在“metadata”参数中设置其他值！）
//在这里分配一个新变量，因为如果我们修改“v”，它也会修改arguments集合，这意味着
//我们将向getClass/getTip传递一个不正确的值
ret=Ext.isFunction（me.origrender）？me.origrender.apply（作用域、参数）| |“”“”；
cellValues.tdCls+=''+Ext.baseCSSPrefix+'action col cell'；
对于（i=0；i'+glyph.character+''）：'>'；
}
返回ret；
}
});
Ext.create（'Ext.grid.Panel'{
标题：“行动专栏演示”，
存储：Ext.data.StoreManager.lookup（'employeeStore'），
栏目：[{
文本：“名字”，
数据索引：“名字”
}, {
文本：“姓氏”，
数据索引：“lastname”
}, {
xtype:“myactioncolumn”，
宽度：50，
项目：[{
iconCls:“x-fa cog”，
工具提示：“编辑”，
工具提示自动隐藏：false，
处理程序：函数（网格、行索引、colIndex）{
var rec=grid.getStore（）.getAt（行索引）；
警报（“编辑”+rec.get（'firstname'））；
}
}]
}],
宽度：250，
renderTo:Ext.getBody（）
});

---

这是一个正在工作的

太棒了！！！这正是我要找的。谢谢！！！