Hi,
I've got a table with n columns and also a corresponding no.of text
fields above the table. I want the input fields to align horizontally
with the table's columns. Also, I want the alignment to stay even if the
browser is resized or if the container size is set to a fixed size
instead of occupying all the browser space.
When I assign a flex value of 48% to each of the fields and also to the
columns, the size taken by the two aren't equal. And the save button
takes more than 4% of the horizontal space.
The sample code is as follows:
> qx.Class.define("testproject.Application",
> {
> extend : qx.application.Standalone,
>
> members :
> {
> main_tab : null,
> titlepanel : null,
> layout_hbox : null,
> fixed_view : "fixed",
> fluid_view : "fluid",
> columns : ['Data1', 'Data2'],
> col_resize : [
> { width: "48%"},
> { width: "48%"}
> ],
> save_button_size: "4%",
>
> //layout of table columns and fields not aligning
> //main_layout_not_aligning : function() {
> main : function() {
> // Call super class
> this.base(arguments);
>
> // Enable logging in debug variant
> if (qx.core.Variant.isSet("qx.debug", "on")) {
> // support native logging capabilities, e.g. Firebug for Firefox
> qx.log.appender.Native;
> // support additional cross-browser console. Press F7 to
> toggle visibility
> qx.log.appender.Console;
> }
>
> APP = this;
> APPROOT = this.getRoot();
> var view_menu = new qx.ui.menu.Menu;
> var view = new qx.ui.menubar.Button("View", null, view_menu);
> var viewFixedCommand = new qx.ui.core.Command("Control+Shift+I");
> var viewFluidCommand = new qx.ui.core.Command("Control+Shift+U");
>
> viewFixedCommand.addListener("execute", function(e){
> this.viewGroup.setSelection([this.fixedButton]);
> }, this);
> viewFluidCommand.addListener("execute", function(e){
> this.viewGroup.setSelection([this.fluidButton]);
> }, this);
>
> this.fixedButton = new qx.ui.menu.RadioButton("fixed");
> this.fluidButton = new qx.ui.menu.RadioButton("fluid");
> this.fixedButton.setCommand(viewFixedCommand);
> this.fluidButton.setCommand(viewFluidCommand);
> view_menu.add(this.fixedButton);
> view_menu.add(this.fluidButton);
> // Configure and fill radio group
> this.viewGroup = new qx.ui.form.RadioGroup;
> this.viewGroup.add(this.fluidButton, this.fixedButton);
> this.viewGroup.addListener("changeSelection", function(e){
> this.debug("viewGroup changed selection, setting appropriate
> layout style ...");
> APP.adjustLayout(e);
> }, this);
>
> var edit_menu = new qx.ui.menu.Menu;
> var edit = new qx.ui.menubar.Button("Edit", null, edit_menu);
> var copyCommand = new qx.ui.core.Command("Control+Shift+C");
> var pasteCommand = new qx.ui.core.Command("Control+Shift+V");
>
> this.copyButton = new qx.ui.menu.Button("copy",null,copyCommand);
> this.pasteButton = new qx.ui.menu.Button("paste",null,pasteCommand);
> edit_menu.add(this.copyButton);
> edit_menu.add(this.pasteButton);
>
> var menubar = new qx.ui.menubar.MenuBar;
> menubar.setPaddingRight(10);
> menubar.add(edit);
> menubar.add(view);
>
> //create a scrollbar based container, so that vertical space
> isn't a problem from now on
> this.scroll = new qx.ui.container.Scroll();
> this.scroll.set({padding: 0});
> APPROOT.add(this.scroll, {edge: 0});
>
> //have a layout vbox which has left margin, the center and the
> right margin
> this.layout_hbox = new qx.ui.container.Composite(new
> qx.ui.layout.HBox(3).set({spacing: 0}));
> this.layout_hbox.set({padding: 0});
> this.left_margin = new qx.ui.container.Composite();
> this.right_margin = new qx.ui.container.Composite();
>
> //set fluid with zero width for left and right margin
> this.left_margin.set({
> minWidth : 0,
> maxWidth : 0
> });
> this.right_margin.set({
> minWidth : 0,
> maxWidth : 0
> });
>
> //create a composite container to hold login box, tab view etc now
> var layout = new qx.ui.layout.VBox;
> layout.setSeparator("separator-vertical");
> layout.setSpacing(0);
> this.child_container = new qx.ui.container.Composite();
> this.child_container.setLayout(layout);
>
> //add these to layout_hbox and the layout_hbox to the scroll
> this.layout_hbox.add(this.left_margin);
> this.layout_hbox.add(this.child_container);
> this.layout_hbox.add(this.right_margin);
> this.scroll.add(this.layout_hbox, {edge: 0});
> this.main_tab = new qx.ui.container.Composite(new
> qx.ui.layout.VBox().set({
> spacing: 10
> }));
>
> this.child_container.add(this.main_tab, {flex:1});
> APPROOT.addListener("resize",function(e){
> var selected_view = this.viewGroup.getSelection()[0].getLabel();
> this.debug("App resizing, and current selected layout is :" +
> selected_view + " ...");
> if(selected_view == this.fixed_view){
> this.debug("App resizing, setting fixed layout ...");
> this.__setFixedLayout();
> } else if(selected_view == this.fluid_view){
> this.debug("App resizing, setting fluid layout ...");
> this.__setFluidLayout();
> }
> },this);
>
> //add a composite with vbox and a table and field container
> this.table_container = new qx.ui.container.Composite();
> var layout = new qx.ui.layout.VBox();
> this.table_container.setLayout(layout);
> this.main_tab.add(menubar);
> this.main_tab.add(this.table_container);
>
> //add a field container with input fields
> var hbox_layout = new qx.ui.layout.HBox();
> this.field_container = new
> qx.ui.container.Composite(hbox_layout).set({
> marginTop: 10,
> marginBottom: 10
> });
> for(var i=0;i<this.columns.length;i++){
> var field_encapsulator = new qx.ui.container.Composite(new
> qx.ui.layout.HBox(1)).set({
> //paddingLeft : 5,
> //paddingRight : 5
> });
> var field = new qx.ui.form.TextField();
> field_encapsulator.add(field, {flex: 1});
> this.debug("Setting width of field " + i + " to "
> + parseFloat( this.col_resize[i]['width']) + " ...");
> this.field_container.add(field_encapsulator, {flex:
> parseFloat( this.col_resize[i]['width'])});
> }
>
> //have a save button too
> this.save_button = new qx.ui.form.Button("Save");
> var button_encapsulator = new qx.ui.container.Composite(new
> qx.ui.layout.HBox(1)).set({
> paddingLeft : 0
> });
> button_encapsulator.add(this.save_button, {flex: 1});
> this.debug("Setting width of button " + " to "
> + parseFloat( this.save_button_size) + " ...");
> //this.field_container.add(button_encapsulator, {flex:
> parseFloat(this.save_button_size) - 1.99});
> this.field_container.add(button_encapsulator, {flex:
> parseFloat(this.save_button_size)});
> this.table_container.add(this.field_container, {flex: 1});
>
> //add a table
> var tableModel = new qx.ui.table.model.Simple();
> tableModel.setColumns(this.columns);
>
> //resizable table column model
> var resizable_tcm =
> {
> tableColumnModel : function(obj) {
> return new qx.ui.table.columnmodel.Resize(obj);
> }
> };
>
> // table created
> var table = new qx.ui.table.Table(tableModel, resizable_tcm);
>
> var tcm = table.getTableColumnModel();
>
> //set some random data
> var data = [];
> for(var i=0;i<50;i++){
> data.push(['item'+i, 'value'+i]);
> }
> tableModel.setData(data);
>
> //set the resize value for each column
> // Obtain the behavior object to manipulate
> var resizeBehavior = tcm.getBehavior();
> for (var i=0,j=0;i< this.col_resize.length;i++) {
> var col_resize = this.col_resize[i];
> this.debug("Setting width of column " + i + " to " +
> col_resize + " ...");
> resizeBehavior.set(i, col_resize);
> }
> this.table = table;
> this.table_container.add(this.table, {flex: 1});
> },
>
> adjustLayout : function(e){
> var selected_view = e.getData()[0].getLabel();
> if(selected_view == this.fixed_view){
> this.debug("Setting layout to fixed now ...");
> this.__setFixedLayout();
> } else if(selected_view == this.fluid_view){
> this.debug("Setting layout to fluid now ...");
> this.__setFluidLayout();
> }
> },
>
> __setFixedLayout : function(){
> this.debug("Setting fixed layout ...");
>
> var width = APPROOT.getBounds().width;
> var margin_width = Math.floor((width - 960)/2);
> margin_width = margin_width > 0 ? margin_width : 0;
> this.debug("Setting margin widths to be " + margin_width + " ...");
> this.main_tab.set({
> width : 960,
> minWidth : 960,
> maxWidth : 960,
> minHeight : 600,
> padding : 10
> });
> this.left_margin.set({
> minWidth : margin_width,
> maxWidth : margin_width
> });
> this.right_margin.set({
> minWidth : margin_width,
> maxWidth : margin_width
> });
> },
>
> __setFluidLayout : function(){
> this.debug("Setting fluid layout ...");
> var width = APPROOT.getBounds().width - 20; //20 for 10 each on
> either side for padding
> width = (width < 960)? 960 : width; //greater of the width or
> 960, so 960 is min width
> this.main_tab.set({
> minWidth : width,
> minHeight : 600,
> //maxWidth : width,
> padding : 10
> });
>
> this.left_margin.set({
> minWidth : 0,
> maxWidth : 0
> });
> this.right_margin.set({
> minWidth : 0,
> maxWidth : 0
> });
> }
>
> }
> });
cheers,
skar.
--
--
The life so short, the craft so long to learn.
------------------------------------------------------------------------------
Let Crystal Reports handle the reporting - Free Crystal Reports 2008 30-Day
trial. Simplify your report design, integration and deployment - and focus on
what you do best, core application coding. Discover what's new with
Crystal Reports now. http://p.sf.net/sfu/bobj-july
_______________________________________________
qooxdoo-devel mailing list
[email protected]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel
