Markierbare HTML-Tabellenzelle

Question

Ich möchte eine markierbare HTML-Tabellenzelle erreichen. Für HTML habe ich den HTML-Cellrenderer benutzt, der gut funktioniert. Um die Zelle markierbar zu bekommen, habe ich herausgefunden, dass ich das Formular "-webkit-user-select" auf keinen Text setzen muss. Dafür habe ich meinen eigenen HTML-CellRender geschrieben. Ich erweiterte die „qx.ui.table.cellrenderer.Conditional“, so die Umsetzung der HTML-Zellrenderer und hinzugefügt, um diese Funktion, die ich im Konstruktor rufen:

_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); 
    } 

Nun ist die Zelle markierbar ist aber die HTML-Tabs werden nicht konvertiert. Auch bekomme ich folgende Fehlermeldung: padawan.js: 210 Uncaught Typeerror: kann nicht gesetzt Eigenschaft ‚Sheet‘ undefinierter

Answer 1

Sie wahrscheinlich nicht den erforderlichen gesamten Code aus dem Konstruktor von Abstract Cellrenderer haben kopieren. Es würde erklären, warum qx.ui.table.cellrenderer.Abstract.__clazz nicht definiert ist. So sollten Sie auch this part hinzufügen:

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

und die _onChangeTheme Methode.

Hier ist eine vollständige playground example mit einem erweiterten HTML CellRenderer.

Eine bessere Praxis könnte sein, Ihre eigenen Render zu schreiben, die ICellRenderer Schnittstelle implementiert.