Can't set correctly the HBox layout

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

Can't set correctly the HBox layout

voger
I want to create a panel like widget that it will contain three
elements. One for command buttons like "Show Desktop", one for the
Taskbar and one for account related buttons like "Login", "Profile" etc.
I am attaching a graph of how I want it to look.

The main container is named Toolbar and it is a subclass of
qx.ui.container.Composite with HBox layout and the three areas contained
are also subclasses of qx.ui.container.Composite with HBox layout.

My problem is that I cannot set the toolbar to occupy the whole width of
the viewport. Also I want the left and the right areas of the diagram to
occupy as much space as the need and the middle area (the taskbar) to
occupy the rest of it.

Here is the code of the main container


qx.Class.define('qssite.ui.SToolBar', {
     extend: qx.ui.container.Composite,

     construct: function () {
         this.base(arguments);
         this._initLayout();
     },

     members: {
         _initLayout: function () {

             this.setLayout(new qx.ui.layout.HBox());
             this.set({
                 allowGrowX: false,
                 backgroundColor: 'blue' //for debugging purposes
             });

             this.add(new qssite.ui.STaskBarButtons());
             this.add(new qx.ui.toolbar.Separator());
             this.add(new qssite.ui.STaskBar(), {flex: 1}); //shuldn't
this magic work?
             this.add(new qx.ui.toolbar.Separator());
             this.add(new qssite.ui.SUserActions());
         }
     }
});
and this is how it is loaded in my Application.js

    //create a new taskbar
   var toolbar = new qssite.ui.SToolBar();
   var doc = this.getRoot();
   // the following should give 100% width but it does not
   doc.add(toolbar, {left: 0, top: 0, width: '100%'});

------------------------------------------------------------------------------
Dive into the World of Parallel Programming The Go Parallel Website, sponsored
by Intel and developed in partnership with Slashdot Media, is your hub for all
things parallel software development, from weekly thought leadership blogs to
news, videos, case studies, tutorials and more. Take a look and join the
conversation now. http://goparallel.sourceforge.net/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel

taskbar.png (10K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: Can't set correctly the HBox layout

voger
Sorry for the false alarm. I had set the allowGrowX property to false. I
removed it and now it works fine.

------------------------------------------------------------------------------
Dive into the World of Parallel Programming The Go Parallel Website, sponsored
by Intel and developed in partnership with Slashdot Media, is your hub for all
things parallel software development, from weekly thought leadership blogs to
news, videos, case studies, tutorials and more. Take a look and join the
conversation now. http://goparallel.sourceforge.net/
_______________________________________________
qooxdoo-devel mailing list
[hidden email]
https://lists.sourceforge.net/lists/listinfo/qooxdoo-devel