Hi Bryan, I have the same problem with many of my tables, and it seems to be related to the resizing of the table columns. When in editing mode, for example, a table sometimes keeps expanding its width and you cannot do anything against it. I am using a hack that resets the width to a fix number by window.setInterval, which is a bad solution, but works for the moment. I hope this is fixed in 0.8 or before.
The problem is that I cannot make a demopage to demonstrate the behaviour, because the actual widget is very complex and depends on many things that occur at runtime, so I cannot emulate it statically. Otherwise I would have already filed a bug report with a demo. I am happy you have a working demo demostrating the problem. Christian Bryan Coutch schrieb: > > I have been working on a qooxdoo layout problem that I encountered, > and quite frankly, it has me stumped. > > I have included a small(-ish) program that demonstrates some of the > main problems I have been having. > > I have a qx.ui.window.Window presenting a wizard-like interface. The > left-hand navigation is a TreeVirtual (just a table in this example, > has the same problem). The problem here is that if I have more rows > than can fit in the visible area, the window gets stretched until > every row is visible, stuttering one row at a time. If you have 100’s > of nodes in the navigation tree, the bottom of the window will > eventually disappear. It’s impossible to shrink the window height > smaller than the number of visible rows in the table. The only way > around this that I’ve found is to set an absolute table height, > certainly not an ideal solution. > > The 2^nd problem is similar, with the table on the right hand side. > That table prevents me from shrinking the window width. If you expand > the width of the window, the flex columns will take up more space, and > you will not be able to shrink the window again. > > The 3^rd problem is with the right hand table in IE6. As soon the > window is displayed, It will just keep expanding forever. Setting an > absolute width on the table fixes the expanding forever problem, but > then what’s the point of having a resizable window? > > If anybody has suggestions to help conquer this layout issue, I would > greatly appreciate hearing them. J > > Bryan > > <html> > > <head> > > <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> > > <title>Tables, and Flex Dimensions, and Usability, Oh My!</title> > > <script type="text/javascript" > src="http://demo.qooxdoo.org/current/demobrowser/script/demo.js";></script> > > </head> > > <body> > > <div id="description"> > > <p></p> > > </div> > > <script type="text/javascript"> > > qx.Class.define("BasicSample", > > { > > extend : qx.application.Gui, > > members : > > { > > main : function() > > { > > this.base(arguments); > > // Create a popup window > > var win = new qx.ui.window.Window( "Testing" ); > > win.setModal( true ); > > win.setResizable( true, true, true, true ); > > win.setMoveable( true ); > > win.setCentered(true); > > win.setWidth( 600 ); > > win.setHeight( 300 ); > > qx.ui.core.ClientDocument.getInstance().add(win); > > // Create a splitpane > > var splitPane = new qx.ui.splitpane.SplitPane( "horizontal", 200, "1*" ); > > splitPane.setWidth( "100%" ); > > splitPane.setHeight( "1*" ); > > // Table for the left-hand side of the split pane > > // This table represents the problems I am having with tree-virtual > > var leftTableModel = new qx.ui.table.model.Simple(); > > leftTableModel.setColumns( ["Tree Column"] ); > > var leftCustom = { > > tableColumnModel : function(obj) { > > return new qx.ui.table.columnmodel.Resize(obj); > > } > > } > > var leftTable = new qx.ui.table.Table(leftTableModel, leftCustom); > > leftTable.setWidth("100%"); > > leftTable.setHeight("100%"); > > leftTable.setBorder("inset"); > > leftTable.setStatusBarVisible( false ); > > // Table for the right-hand side of the split pane > > // This table represents the problems I am having with resizing > > // tables with flex column widths > > var rightTableModel = new qx.ui.table.model.Simple(); > > rightTableModel.setColumns( ["One", "Two", "Three"] ); > > var rightCustom = { > > tableColumnModel : function(obj) { > > return new qx.ui.table.columnmodel.Resize(obj); > > } > > } > > var rightTable = new qx.ui.table.Table(rightTableModel, rightCustom); > > rightTable.setWidth("1*"); > > rightTable.setHeight("100%"); > > rightTable.setBorder("inset"); > > rightTable.setStatusBarVisible( false ); > > // Layout on the right hand side, wizard-like > > var rightLayout = new qx.ui.layout.VerticalBoxLayout(); > > rightLayout.setWidth("100%"); > > rightLayout.setHeight("100%"); > > var header = new qx.ui.layout.HorizontalBoxLayout(); > > header.setWidth("100%"); > > header.setHeight(75); > > header.setBorder("inset"); > > // Actions you can perform on objects represented by a table row > > var actionBar = new qx.ui.layout.VerticalBoxLayout(); > > actionBar.setWidth(24); > > actionBar.setHeight("100%"); > > var actionButton1 = new qx.ui.form.Button( "" ); > > actionButton1.setWidth("100%"); > > actionButton1.setHeight(21); > > var actionButton2 = new qx.ui.form.Button( "" ); > > actionButton2.setWidth("100%"); > > actionButton2.setHeight(21); > > actionBar.add( actionButton1, actionButton2 ); > > // Group box to tidy appearance up a bit > > var grouplayout = new qx.ui.layout.HorizontalBoxLayout(); > > grouplayout.setWidth("100%"); > > grouplayout.setHeight("100%"); > > grouplayout.add( actionBar, rightTable ); > > var groupbox = new qx.ui.groupbox.GroupBox( "My Data" ); > > groupbox.setWidth("100%"); > > groupbox.setHeight("1*"); > > groupbox.add( grouplayout ); > > rightLayout.add( header, groupbox ); > > splitPane.addLeft(leftTable); > > splitPane.addRight(rightLayout); > > // Wizard button bar, sample buttons acting on left tree > > var buttonBar = new qx.ui.layout.HorizontalBoxLayout(); > > buttonBar.setWidth("100%"); > > buttonBar.setHeight("auto"); > > var addButton = new qx.ui.form.Button( "Add 50 Nodes" ); > > addButton.addEventListener( "execute", function(evt) { > > var tableData = []; > > for ( var i = 0; i < 50; i++ ) { > > tableData[i] = ["Node" + i]; > > } > > leftTableModel.setData(tableData); > > }, this ); > > buttonBar.add(addButton); > > var addButton2 = new qx.ui.form.Button( "Add 100 Nodes" ); > > addButton2.addEventListener( "execute", function(evt) { > > var tableData = []; > > for ( var i = 0; i < 100; i++ ) { > > tableData[i] = ["Node" + i]; > > } > > leftTableModel.setData(tableData); > > }, this ); > > buttonBar.add(addButton2); > > var removeButton = new qx.ui.form.Button( "Remove All Nodes" ); > > removeButton.addEventListener( "execute", function(evt) { > > var tableData = []; > > leftTableModel.setData(tableData); > > }, this ); > > buttonBar.add(removeButton); > > // Vertical layout for the window > > var layout = new qx.ui.layout.VerticalBoxLayout(); > > layout.setWidth("100%"); > > layout.setHeight("100%"); > > layout.setPadding( 4 ); > > layout.setSpacing( 4 ); > > layout.add( splitPane, buttonBar ); > > win.add( layout ); > > win.show(); > > } > > } > > }); > > qx.core.Init.getInstance().setApplication(new BasicSample); > > </script> > > </body> > > </html> > > ------------------------------------------------------------------------ > > ------------------------------------------------------------------------- > This SF.net email is sponsored by: Microsoft > Defy all challenges. Microsoft(R) Visual Studio 2008. > http://clk.atdmt.com/MRT/go/vse0120000070mrt/direct/01/ > ------------------------------------------------------------------------ > > _______________________________________________ > qooxdoo-devel mailing list > [email protected] > https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel > ------------------------------------------------------------------------- This SF.net email is sponsored by: Microsoft Defy all challenges. Microsoft(R) Visual Studio 2008. http://clk.atdmt.com/MRT/go/vse0120000070mrt/direct/01/ _______________________________________________ qooxdoo-devel mailing list [email protected] https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
