Question

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

现在这在某种程度上有效。（不完全）通过使用此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的评价。我希望在列类型为＆＃34; textfield＆＃34;的任何地方应用它。为此，我正在尝试

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这个名字，但我认为它不会来。但通过使用它，它适用于所有细胞。我想避免那些列类型不是＆＃34; textfield＆＃34;的单元格。任何人都可以帮助你做到这一点。

Answer 1

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

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

小提琴：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'
    });

如何应用特定列的CSS。

1 个答案: