可标记 HTML Table 单元格

Question

我想实现一个可标记的 HTML Table 单元格。对于 HTML，我使用了 HTML Cellrenderer，效果很好。为了使 Cell 可标记，我发现我必须将“-webkit-user-select”表单 none 设置为文本。为此，我编写了自己的 HTML cellrender。我扩展了 "qx.ui.table.cellrenderer.Conditional"，添加了 HTML Cellrenderer 的实现并添加了我在构造函数中调用的这个函数：

_createStyleSheet : function() {
        var colorMgr = qx.theme.manager.Color.getInstance();
        var stylesheet = ".qooxdoo-table-cell {" + qx.bom.element.Style.compile({
            position : "absolute",
            top : "0px",
            overflow : "hidden",
            whiteSpace : "nowrap",
            borderRight : "1px solid " + colorMgr.resolve("table-column-line"),
            padding : "0px 6px",
            cursor : "default",
            textOverflow : "ellipsis",
            userSelect : "text"
        }) + "} " + ".qooxdoo-table-cell-right { text-align:right } " + ".qooxdoo-table-cell-italic { font-style:italic} " + ".qooxdoo-table-cell-bold { font-weight:bold } ";

        if (qx.core.Environment.get("css.boxsizing")) {
            stylesheet += ".qooxdoo-table-cell {" + qx.bom.element.BoxSizing.compile("content-box") + "}";
        }

        qx.ui.table.cellrenderer.Abstract.__clazz.stylesheet = qx.bom.Stylesheet.createElement(stylesheet);
    }

现在单元格可标记，但 HTML 制表符未转换。我还收到以下错误：padawan.js:210 Uncaught TypeError: Cannot set 属性 'stylesheet' of undefined

Answer 1

您可能没有从 Abstract Cellrenderer. It would explain whyqx.ui.table.cellrenderer.Abstract.__clazz is undefined. So you should also add this part 的构造函数中复制所有需要的代码：

var cr = qx.ui.table.cellrenderer.Abstract;
if (!cr.__clazz)
{
  cr.__clazz = this.self(arguments);
  this._createStyleSheet();

  // add dynamic theme listener
  if (qx.core.Environment.get("qx.dyntheme")) {
    qx.theme.manager.Meta.getInstance().addListener(
      "changeTheme", this._onChangeTheme, this
    );
  }
}

和_onChangeTheme方法。

这是一个完整的 playground example，带有扩展的 HTML CellRenderer。

更好的做法是编写自己的实现 ICellRenderer 接口的渲染器。

可标记 HTML Table 单元格

Markable HTML Table Cell

qooxdoo

tablecell