Thank you Mustafa! I knew that I have to dig into CSS ...which I am not very familiar with.
Your fine example did not have value-dependent icons, but it was perfect to get the grip to the solution! For the record, this one has some 3 different icons: http://tinyurl.com/qztc5ek I *do* think that the row css class logic should be implemented inside the framework...but I can not guarantee that I will find the time to file an enhancement bug ;) Thanks again, and have a nice weekend Peter On 3/28/2014 11:54 AM Mustafa Sak wrote: > 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:p.schnei...@tis-gmbh.de] > 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 > > -- Dipl.-Ing. (FH) Peter Schneider TIS Technische Informationssysteme GmbH | Software-Entwicklung Müller-Armack-Str. 8 | GER-46397 Bocholt | www.tis-gmbh.de fon: +49 2871 2722-0 | fax: +49 2871 2722-99 | p.schnei...@tis-gmbh.de Geschäftsführer: Josef Bielefeld, Peter Giesekus Sitz der Gesellschaft: Bocholt Registergericht: Amtsgericht Coesfeld, HRB 826 ** 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 qooxdoo-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
