Results 1 to 6 of 6

Thread: Change a vbox into a hbox and vice versa on orientation change

  1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default Answered: Change a vbox into a hbox and vice versa on orientation change

    Hi there,

    I've built a horizontally scrollable hbox layout container, docked on top, filled with other sub-containers, which I want to transform into a vbox layout (scrollable vertically, docked to the left) on orientation change.

    Right now I'm doing something like this on resize:

    Code:
    var hboxLayout = Ext.getCmp('hboxLayoutID');
    Ext.getCmp('hboxLayoutParentID').removeAll(false, true);
    
    if(Ext.Viewport.getOrientation()=='landscape'){
        hboxLayout.setDocked('left');
        hboxLayout.setLayout({
                pack: 'center', 
                type: 'vbox'
            });
        hboxLayout.setScrollable({
                direction: 'vertical'
            });
        hboxLayout.setHeight('auto');
        hboxLayout.setWidth(100);
    }else{
        hboxLayout.setDocked('top');
        hboxLayout.setLayout({
                pack: 'center', 
                type: 'hbox'
            });
        hboxLayout.setScrollable({
                direction: 'horizontal'
            });
        hboxLayout.setHeight(100);
        hboxLayout.setWidth('');
    };
    Ext.getCmp('hboxLayoutParentID').add([hboxLayout]);
    It kinda does what it's supposed to (it snaps to the left / top, becomes vertically / horizontally scrollable, sets the correct width / height), EXCEPT re-aligning the sub-containers properly - they either remain aligned horizontally (if the initial view was landscape) or vertically (for initial portrait view).

    Am I missing something / doing something wrong?

  2. No. 1:
    You may create two views and show the other view on the fly (destroying the first if you need to)

    No. 2:
    You create two containers in the main container. One with hbox and the other with vbox.
    Then you transfer the content to the other container as needed.

    The second is especially good if you have forms and do not want to loose the selections/entered text.

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,319
    Answers
    3883
    Vote Rating
    1293
      0  

    Default

    Changing layout on the fly is not currently supported.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Feb 2011
    Location
    Dsseldorf, Germany
    Posts
    594
    Answers
    35
    Vote Rating
    33
      0  

    Default

    You could rebuild the view onOrientationChange like this:
    Code:
    xtype: 'container',
    layout: {    
        pack: 'center',
        type: Ext.Viewport.getOrientation()=='landscape' ? 'vbox' : 'hbox'
    }
    Rebuilding usually can be done on the fly without any interruptions.

  5. #4
    Sencha User
    Join Date
    Nov 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by mitchellsimoens View Post
    Changing layout on the fly is not currently supported.
    So what are you suggesting in such a situation, then? To dispose and recreate the hboxLayoutParentID container (from my example above) on every orientationchange event?

  6. #5
    Sencha User
    Join Date
    Feb 2011
    Location
    Dsseldorf, Germany
    Posts
    594
    Answers
    35
    Vote Rating
    33
      0  

    Default two ways

    No. 1:
    You may create two views and show the other view on the fly (destroying the first if you need to)

    No. 2:
    You create two containers in the main container. One with hbox and the other with vbox.
    Then you transfer the content to the other container as needed.

    The second is especially good if you have forms and do not want to loose the selections/entered text.

  7. #6
    Sencha User
    Join Date
    Nov 2012
    Posts
    8
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by Kurt001 View Post
    No. 2:
    You create two containers in the main container. One with hbox and the other with vbox.
    Then you transfer the content to the other container as needed.
    This was actually a really good suggestion, and I've finally made my container behave (pretty much) the way I wanted. Thanks!

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •