如何使用 ExtJS 更改光标答案

【问题标题】：How to change the cursor using ExtJS如何使用 ExtJS 更改光标
【发布时间】：2022-02-10 04:15:56
【问题描述】：

我想设置一个网格列，以便在悬停后将光标更改为指针。

我不知道对它应用样式是否是最佳实践，请告诉我。

我就是想不通。

这是我的代码，我希望该列在鼠标悬停时改变光标。

Ext.define('Ext.grid.Panel', {
store: services,
xtype: 'log',
features: [groupingFeature],
stateId: 'stateGrid',
columns: [
    {
        text: 'URL',
        sortable: true,
        flex: true,
        dataIndex: 'url'
    }
  ]
});

谢谢你的帮助

【问题讨论】：

如果网格中只有一列，这很容易，如上面的代码所示。你打算有更多的列吗？另外，我假设您的意思是将鼠标悬停在列的 data 部分，而不是 header 上，对吗？
我将有几列...是的，我的意思是鼠标悬停在数据部分，你的意思是标题，你从哪里得到的？ :)

标签： extjs mouse-cursor

【解决方案1】：

它对我有用：

columns: [
{
    text: 'URL',
    sortable: true,
    flex: true,
    dataIndex: 'url',
    renderer: function (val, metadata, record) {
            metadata.style = 'cursor: pointer;'; 
        return val;
    }
}]

【讨论】：

【解决方案2】：

对于大多数组件，可以直接附加 CSS sn-ps 类似：

 Ext.define('...', {
    extend: 'Ext.chart.CartesianChart',
    legend: {
        style: 'cursor: pointer;'
    }
});

当使用renderer 时，还可以附加一个 CSS 类（以及任何样式）：

renderer: function (value, meta, record) {
     meta.tdCls += 'x-cursor-pointer'; 
     return value;
}

Ext.grid.column.Column 也有一个 componentCls 属性：Ext.grid.column.Column#cfg-componentCls 和一个 style 属性：Ext.grid.column.Column#cfg-style... 这将为整个列设置样式，而不是每个单独的行 - 或者一个可以根据值组合，通过将一个类添加到整个列并使用渲染器添加更多类（然后使用这些组合的 CSS 选择器）。

【讨论】：