Hi skar,
maybe I'm missing something here, but wouldn't it be best to dynamically
set the text field width to the actual table column width? This worked
for me, after removing the flex setting for field_encapsulator:
tcm.addListener("widthChanged", function(e) {
var col = e.getData().col;
var newWidth = e.getData().newWidth;
this.field_container.getChildren()[col].setWidth(newWidth);
}, this);
Regards,
Daniel
skar schrieb:
> 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);
>> } tcm.addListener("widthChanged", function(e) {
var col = e.getData().col;
var newWidth = e.getData().newWidth;
this.debug("col " + col + " width changed to " + newWidth);
this.field_container.getChildren()[col].setWidth(newWidth);
}, this);
>> };
>>
>> // 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.
>
------------------------------------------------------------------------------
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
