Hi Bryan, Would you please post your report and _attach_ (not inline like it is here) the test application to a ticket in bugzilla. Mark it as a "treevirtual" bug so I find it easily. I have a number of qooxdoo things I'm working on right now, and getting to any pending resize table column model issues is one of them on my "to do" list. (It may be a week or three before I get to it, so ping me in a few weeks to check on my status if I haven't dealt with it yet.)
Cheers, Derrell On Wed, Mar 5, 2008 at 5:34 PM, Bryan Coutch <[EMAIL PROTECTED]> wrote: > > > > > 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 2nd 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 3rd 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 > > -- "There is nothing more difficult to plan, more doubtful of success, nor more dangerous to manage than the creation of a new system. For the initiator has the enmity of all who would profit by the preservation of the old system and merely lukewarm defenders in those who would gain by the new one." --Machiavelli, 1513 ------------------------------------------------------------------------- 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
