Hello,
i try to make a color cellrenderer. the code is at the end. Thsi
renderer should take data having colors like "#f00ff" and transform it
to fullsize volorcells.
the actual problem ist, that the cells moved a some pixels to the left,
and overlap . when i click a cell, the selection is at the right place.
which definition of the layout/style can be the problem?
thank you for your help
qx.Class.define("mapp.system.ui.table.cellrenderer.Color",
{
type : "color",
implement : qx.ui.table.ICellRenderer,
extend : qx.core.Object,
construct : function()
{
this.base(arguments);
var cr = makebiz.system.ui.table.cellrenderer.Color
if (!cr.__clazz)
{
var colorMgr = qx.theme.manager.Color.getInstance();
cr.__clazz = this.self(arguments);
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 : "1px 0px 0px 0px",
margin : "1px 0px 0px 0px",
cursor : "default",
userSelect : "none"
}) +
"} " +
".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") + "}";
}
cr.__clazz.stylesheet = qx.bom.Stylesheet.createElement(stylesheet);
}
},
properties :
{
/**
* The default cell style. The value of this property will be provided
* to the cell renderer as cellInfo.style.
*/
defaultCellStyle :
{
init : null,
check : "String",
nullable : true
}
},
members :
{
/**
* the sum of the horizontal insets. This is needed to compute the
box model
* independent size
*/
_insetX : 1, // paddingLeft + paddingRight + borderRight
/**
* the sum of the vertical insets. This is needed to compute the
box model
* independent size
*/
_insetY : 1,
/**
* Get a string of the cell element's HTML classes.
*
* This method may be overridden by sub classes.
*
* @param cellInfo {Map} cellInfo of the cell
* @return {String} The table cell HTML classes as string.
*/
_getCellClass : function(cellInfo) {
return "qooxdoo-table-cell";
},
/**
* Returns the CSS styles that should be applied to the main div of
this
* cell.
*
* This method may be overridden by sub classes.
*
* @param cellInfo {Map} The information about the cell.
* See {@link
qx.ui.table.cellrenderer.Abstract#createDataCellHtml}.
* @return {var} the CSS styles of the main div.
*/
_getCellStyle : function(cellInfo) {
return cellInfo.style || "";
},
/**
* Retrieve any extra attributes the cell renderer wants applied to
this
* cell. Extra attributes could be such things as
* "onclick='handleClick()';"
*
* @param cellInfo {Map} The information about the cell.
* See {@link
qx.ui.table.cellrenderer.Abstract#createDataCellHtml}.
*
* @return {String}
* The extra attributes to be applied to this cell.
*/
_getCellAttributes : function(cellInfo)
{
return "";
},
/**
* Returns the HTML that should be used inside the main div of this
cell.
*
* This method may be overridden by sub classes.
*
* @param cellInfo {Map} The information about the cell.
* See {@link
qx.ui.table.cellrenderer.Abstract#createDataCellHtml}.
* @return {String} the inner HTML of the cell.
*/
_getContentHtml : function(cellInfo) {
return ("<div
style='width:100%;height:100%;background-color:"+cellInfo.value+";'></div>"
|| "");
},
/**
* Get the cell size taking the box model into account
*
* @param width {Integer} The cell's (border-box) width in pixel
* @param height {Integer} The cell's (border-box) height in pixel
* @param insetX {Integer} The cell's horizontal insets, i.e. the
sum of
* horizontal paddings and borders
* @param insetY {Integer} The cell's vertical insets, i.e. the sum of
* vertical paddings and borders
* @return {String} The CSS style string for the cell size
*/
_getCellSizeStyle : function(width, height, insetX, insetY)
{
var style = "";
if (qx.core.Environment.get("css.boxmodel") == "content")
{
width -= insetX;
height -= insetY;
}
style += "width:" + Math.max(width, 0) + "px;";
style += "height:" + Math.max(height, 0) + "px;";
return style;
},
// interface implementation
createDataCellHtml : function(cellInfo, htmlArr)
{
htmlArr.push(
'<div class="',
this._getCellClass(cellInfo),
'" style="',
'left:', cellInfo.styleLeft, 'px;',
this._getCellSizeStyle(cellInfo.styleWidth,
cellInfo.styleHeight, this._insetX, this._insetY),
this._getCellStyle(cellInfo), '" ',
this._getCellAttributes(cellInfo),
'>' +
this._getContentHtml(cellInfo),
'</div>'
);
}
}
});
------------------------------------------------------------------------------
This SF email is sponsosred by:
Try Windows Azure free for 90 days Click Here
http://p.sf.net/sfu/sfd2d-msazure
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
