javascript - 如何应用特定列的CSS。

Question

我正在尝试在我的网格中实现这个 css。

CSS crop string in the middle

现在这在一定程度上起作用了。 (不完全是)通过使用这个 cls。

.x-grid-cell-inner {
  position: relative;
  width: 100px;
}
.x-grid-cell-inner p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.x-grid-cell-inner:after {
  content: attr(data-filetype);
  position: absolute;
  left: 100%;
  top: 0;
}
/*Show on hover*/
.x-grid-cell-inner:hover {
  width: auto  
}
.x-grid-cell-inner:hover:after {
  display: none;  
}

但问题是这是评估所有列和 widgetColumn。我想在列类型为“文本字段”的任何地方应用它。为此，我正在尝试

renderer: function (value, meta, record) {
        meta.tdAttr = 'data-qtip="' + value + '"';
        if(meta.column.filterType == "autoresolve"){
            meta.tdCls = "x-grid-cell-inner"
        }
        return value;
    }

我还需要更改 x-grid-cell-inner 名称，但我给出的是它不会出现。但是通过使用它，它可以应用于所有单元格。我想避免那些列类型不是“文本字段”的单元格。任何人都可以帮助得到那个。

Answer 1

您可以使用列的 tdCls 属性。例如，如果您将 tdCls: 'fiddle-overflow-cell' 设置为您的列，那么您的样式将是

.fiddle-overflow-cell .x-grid-cell-inner {
    position: relative;
    width: 100px;
}

.fiddle-overflow-cell .x-grid-cell-inner p {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.fiddle-overflow-cell .x-grid-cell-inner:after {
    content: attr(data-filetype);
    position: absolute;
    left: 100%;
    top: 0;
}
/*Show on hover*/

.fiddle-overflow-cell .x-grid-cell-inner:hover {
    width: auto
}

.fiddle-overflow-cell .x-grid-cell-inner:hover:after {
    display: none;
}

fiddle :https://fiddle.sencha.com/#view/editor&fiddle/2cns

您可以在所有需要此行为的列上添加属性或定义自定义 xtype:

    Ext.define('Fiddle.grid.column.TextColumn', {
        extend: 'Ext.grid.column.Column',
        xtype: 'textcolumn',

        tdCls: 'fiddle-overflow-cell'
    });