Hi Alexander,
Thank you for your reply and, sorry, couldn't make it shorter:
Two excerpts: <Application.js> and <r.php> backend JSON simulator:
+ actually there are three problems:
1. mentioned absent "el" javascript error on first attempt to render table
2. if you try moving vertical divider between tree and table to the left -
tree labels will be shown on top of divider in IE and FF
3. in I.E. when switching between reports - table frame border is not
painted correctly, although it looks well in FireFox
Thanks in advance!!!
=== cut === Application.js ===
/* ************************************************************************
#module(faster)
************************************************************************ */
qx.Class.define("faster.Application",
{
extend : qx.application.Gui,
members :
{
main : function()
{
this.base(arguments);
var frame = new qx.ui.layout.CanvasLayout;
frame.setEdge(15);
frame.addToDocument();
// the splitpane itself
var splitpane = new qx.ui.splitpane.HorizontalSplitPane("1*", "8*");
splitpane.setEdge(0);
splitpane.setShowKnob(true);
frame.add(splitpane);
var t = new qx.ui.tree.Tree("Reports");
// add widgets to splitpane
splitpane.addLeft(t);
with(t)
{
setBackgroundColor("white");
setBorder("inset"); setHeight('100%');
setWidth('100%');
};
var tMarketing = new qx.ui.tree.TreeFolder("Marketing");
var te1 = new qx.ui.tree.TreeFile("Report 1");
var te2 = new qx.ui.tree.TreeFile("Report 2");
tMarketing.add(te1);
tMarketing.add(te2);
t.add(tMarketing);
tMarketing.setOpen(true);
// Customize the table column model. We want one that automatically
// resizes columns.
var custom =
{
tableColumnModel :
function(obj)
{
return new qx.ui.table.columnmodel.Resize(obj);
}
};
t.getManager().addEventListener("changeSelection", function(e) {
if (e.getData().length > 0) {
var leaf = e.getData()[0].getLabelObject().getText();
if (leaf == "Report 1") {
// Create the initial data
var request = new qx.io.remote.Request("r.php");
request.addEventListener("completed", function(response) {
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns([ "Campaign", "Type", "Status"]);
var data = qx.io.Json.parseQx(response.getContent());
tableModel.setData(data);
var table = new qx.ui.table.Table(tableModel, custom);
with (table) {
set({ width:"100%", height:"100%",
border:"inset-thin" });
getSelectionModel().setSelectionMode(qx.ui.table.selection.Model.MULTIPLE_INTERVAL_SELECTION);
var tcm = table.getTableColumnModel();
// Obtain the behavior object to
manipulate
var resizeBehavior = tcm.getBehavior();
// This uses the set() method to set all
attributes at once; uses flex
resizeBehavior.set(0, { width:"1*", minWidth:40,
maxWidth: 90 });
var currencyFormat = new
qx.util.format.NumberFormat();
currencyFormat.setPrefix('$');
var renderer = new
qx.ui.table.cellrenderer.Number();
renderer.setNumberFormat(currencyFormat);
// getTableColumnModel().setDataCellRenderer(7,
renderer);
// getTableColumnModel().setDataCellRenderer(9,
renderer);
};
rFrame.removeAll();
rFrame.add(table);
rFrame.show();
});
request.addEventListener("failed", function(response) {
alert("failed " + response.getContent());
});
request.send();
} else if (leaf == "Report 2") {
// Create the initial data
var request = new qx.io.remote.Request("r.php");
request.addEventListener("completed", function(response) {
var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumns([ "Campaign", "Type", "Status"]);
var data = qx.io.Json.parseQx(response.getContent());
tableModel.setData(data);
var table = new qx.ui.table.Table(tableModel, custom);
with (table) {
set({ width:"100%", height:"100%",
border:"inset-thin" });
getSelectionModel().setSelectionMode(qx.ui.table.selection.Model.MULTIPLE_INTERVAL_SELECTION);
var tcm = table.getTableColumnModel();
// Obtain the behavior object to
manipulate
var resizeBehavior = tcm.getBehavior();
// This uses the set() method to set all
attributes at once; uses flex
resizeBehavior.set(0, { width:"1*", minWidth:40,
maxWidth: 90 });
var currencyFormat = new
qx.util.format.NumberFormat();
currencyFormat.setPrefix('$');
var renderer = new
qx.ui.table.cellrenderer.Number();
renderer.setNumberFormat(currencyFormat);
// getTableColumnModel().setDataCellRenderer(7,
renderer);
// getTableColumnModel().setDataCellRenderer(9,
renderer);
};
rFrame.removeAll();
rFrame.add(table);
rFrame.show();
});
request.addEventListener("failed", function(response) {
alert("failed " + response.getContent());
});
request.send();
}
}
});
var topWidget = new qx.ui.form.TextArea("Right Top Widget");
topWidget.setBackgroundColor("white");
topWidget.setHeight("100%");
topWidget.setWidth("100%");
var rFrame = new qx.ui.layout.CanvasLayout;
rFrame.setWidth("100%");
rFrame.setHeight("100%");
splitpane.addRight(rFrame);
// te1.toggleSelected();
}
}
});
=== end-of-cut === Applicatoin.js
=== cut === r.js ===
<?
echo json_encode(array(array('a','b','c'), array('a','b','c')));
?>
=== end-of-cut === r.js ===
--
View this message in context:
http://www.nabble.com/Dimension.js-142-error---el-%3D%3D-null%3A-tp18902773p18930021.html
Sent from the qooxdoo-devel mailing list archive at Nabble.com.
-------------------------------------------------------------------------
This SF.Net email is sponsored by the Moblin Your Move Developer's challenge
Build the coolest Linux based applications with Moblin SDK & win great prizes
Grand prize is a trip for two to an Open Source event anywhere in the world
http://moblin-contest.org/redirect.php?banner_id=100&url=/
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
