Hi Peter,
the fastest way to solve your problem is to use core CSS. But the table does
not really support you with that capability, so at the beginning we have to
extend the table row renderer:
qx.Class.define("RowRenderer",
{
extend : qx.ui.table.rowrenderer.Default,
members :
{
getRowClass : function(rowInfo) {
return rowInfo.selected ? "qx-table-row selected" : "qx-table-row";
},
updateDataRowElement : function(rowInfo, rowElem)
{
this.base(arguments, rowInfo, rowElem);
if (rowInfo.selected) {
qx.bom.element.Class.addClasses(rowElem, ["selected"]);
}
else {
qx.bom.element.Class.removeClasses(rowElem, ["selected"]);
}
}
}
});
Then we need a custom cell renderer which includes a ordinary div as a
placeholder for the image. Furthermore the renderer instance creates new style
rules, which sets default values. If the "selected" class of the row was added,
it will just change background to red:
qx.Class.define("CellRenderer",
{
extend : qx.ui.table.cellrenderer.Default,
construct : function()
{
this.base(arguments);
qx.ui.style.Stylesheet.getInstance().addRule(".qx-table-row .qx-cell-icon",
"width:16px;height:16px;background: transparent no-repeat
url(resource/qx/icon/Tango/16/apps/office-calendar.png);");
qx.ui.style.Stylesheet.getInstance().addRule(".qx-table-row.selected
.qx-cell-icon", "background: red no-repeat
url(resource/qx/icon/Tango/16/apps/office-calendar.png);");
},
/*
*****************************************************************************
MEMBERS
*****************************************************************************
*/
members :
{
// overridden
_getContentHtml : function(cellInfo) {
return "<div class='qx-cell-icon'></div>";
}
}
});
Don't forget to set row renderer after creation on the table:
var table = new qx.ui.table.Table(tableModel);
table.setDataRowRenderer(new RowRenderer());
Here is the complete playground example:
http://tinyurl.com/kvtjtbh
If you find that solution useful, feel free to open an enhancement bug, to
suggest us to implement the row css class logic inside the framework.
Gruß
Mustafa Sak
Applications & Integration
1&1 Internet AG
Ernst-Frey-Straße 10
DE-76135 Karlsruhe
-----Ursprüngliche Nachricht-----
Von: Peter Schneider [mailto:[email protected]]
Gesendet: Donnerstag, 27. März 2014 10:46
An: qooxdoo Development
Betreff: [qooxdoo-devel] Update Table Cell Content
Hi there,
I am currently facing a 'theming' problem:
I have a Table containing one column which displays Symbols
(qx.ui.table.cellrenderer.Image derived).
These Symbols are 'dark' and when one selects a row in the table, the 'dark'
background color ("table-row-background-selected") makes it hard to see.
Which can be seen at 1st attached image.
The 2nd attached image shows what it *should* look like.
So my question is: How to 'theme' or program an Image CellRenderer that can
react on 'select'?
The "dirty" approach is something like this:
// ------------------------------------------------------------------
<code>
// ------------------------------------------------------------------
qx.Class.define("app.ui.table.cellrenderer.FooIconRenderer",
{
extend : qx.ui.table.cellrenderer.Image,
members :
{
_identifyImage : function (cellInfo)
{
var imageHints = {
imageWidth : 11,
imageHeight: 11,
url : this.__valueToUrl(cellInfo.value) // {String|null}
};
// URL set to something like "app/icon-3" or <null>...
if (imageHints.url) {
if (cellInfo.selected) {
imageHints.url += "-invert"; // inverted icon (light toned)
}
imageHints.url += ".png";
imageHints.tooltip = this.__valueToTip(cellInfo.value);
}
return imageHints;
}
}
});
// ------------------------------------------------------------------
</code>
// ------------------------------------------------------------------
Which *only* *works* if the Table, that makes use of this cell renderer has set
the 'alwaysUpdateCells' flag to <true>! But this slows down the update of the
table, which is _not_really_ an option!
So, is there any theming that I can do? i could only find selection handling
for row-renderer. And the stylesheet of tables seems to be way different than
'regular' Widget styling :(
Regards,
Peter
--
** Unsere Veranstaltungen:
T-Matik in Greven, 20.05.2014
Post-Expo in Stockholm, Halle A - Stand A10.05, 23.-25.09.2014 TIS-Hausmesse in
Bocholt, 16.10.2014 transfairlog in Hamburg, 04.-06.11.2014
------------------------------------------------------------------------------
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
