On 8/21/07, westor <[EMAIL PROTECTED]> wrote:
>
>
> Thank you, Derrell - a good hint.
> But I have to say, until today cell renderers are a little bit "back
> magic"
> for me.
>
Ok. Here's an example...
A very simple cell renderer that wraps text looks like this:
/**
* A very simple data cell renderer for wrapping text values.
*/
qx.Class.define("qx.ui.table.cellrenderer.WrappingText",
{
extend : qx.ui.table.cellrenderer.Abstract,
construct : function(rowHeight)
{
// Save the specified row height. We'll use it in _getContentHtml()
this.rowHeight = rowHeight;
// Get a reference to our statics.
var clazz = this.self(arguments);
this.base(arguments);
// Have we created a stylesheet for this class yet?
if (!clazz.stylesheet)
{
// Nope. Create one.
clazz.stylesheet = qx.html.StyleSheet.createElement(
".qooxdoo-wrapping-table-cell {" +
" overflow:hidden;" +
" border-right:1px solid #eeeeee;" +
" border-bottom:1px solid #eeeeee;" +
" padding : 0px 2px;" +
" cursor:default;" +
"}");
}
},
members :
{
// overridden
_getCellClass : function(cellInfo)
{
// Use the style we created above, when rendering cells.
return "qooxdoo-wrapping-table-cell";
},
// overridden
_getContentHtml : function(cellInfo)
{
if (! cellInfo.value)
{
return "";
}
// Return the cell's value in a div of the specified row height
var html =
"<div style='height:" + this.rowHeight + "px;'>" +
cellInfo.value +
"</div>";
return html;
}
}
});
And here's an example of using it. Note that it sets the table's row height
to 30 and also specifies as a parameter to the cell renderer constructor
that it should use a row height of 30.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qooxdoo » Demo Browser</title>
<script type="text/javascript">
qxsettings =
{
"qx.disposerDebugLevel" : 0
};
qxvariants =
{
"qx.debug" : "on"
};
</script>
<script type="text/javascript" src="../../script/demo.js"></script>
<script type="text/javascript" src="../util.js"></script>
</head>
<body>
<div id="description">
<p>A table with virtual scrolling, model-view-controller, renderers,
editing, sorting, column resizing, column reordering,
column hiding.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var d = qx.ui.core.ClientDocument.getInstance();
var rowHeight = 30;
var main = new qx.ui.layout.VerticalBoxLayout();
main.set({ left:20, top:20, right:20, bottom:20, spacing:5 });
var nextId = 0;
var rowData =
[
[ "The quick brown fox jumped over the lazy dog" ],
[ "Once upon a time, there was a game called 'adventure'" ]
];
// table model
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns([ "Wrapping Text" ]);
tableModel.setData(rowData);
// table
var table = new qx.ui.table.Table(tableModel);
table.set(
{
width:"100%",
height:"1*",
border:"inset-thin",
rowHeight:rowHeight
});
// Get the table column model
var tcm = table.getTableColumnModel();
// Use our custom cell renderer for the first (and only) column
var cr = new qx.ui.table.cellrenderer.WrappingText(rowHeight);
tcm.setDataCellRenderer(0, cr);
main.add(table);
d.add(main);
});
</script>
</body>
</html>
This should give you something to learn from. The cell renderers are only
black magic until you actually delve into them and see that they're not so
complicated after all.
NOTE: This cell renderer is written to the new interface that was
incorporated into the legacy_0_7_x branch last week. If you want to play
with this renderer, you'll need to ensure that you're running up-to-date svn
code.
Cheers,
Derrell
-------------------------------------------------------------------------
This SF.net email is sponsored by: Splunk Inc.
Still grepping through log files to find problems? Stop.
Now Search log events and configuration files using AJAX and a browser.
Download your FREE copy of Splunk now >> http://get.splunk.com/
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
