1. #1
    Sencha User
    Join Date
    Nov 2012
    Posts
    8
    Vote Rating
    0
    paltinescu is on a distinguished road

      0  

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

    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 - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,668
    Answers
    3354
    Vote Rating
    746
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Changing layout on the fly is not currently supported.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    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
    Düsseldorf, Germany
    Posts
    557
    Answers
    32
    Vote Rating
    30
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      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
    paltinescu is on a distinguished road

      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
    Düsseldorf, Germany
    Posts
    557
    Answers
    32
    Vote Rating
    30
    Kurt001 has a spectacular aura about Kurt001 has a spectacular aura about

      0  

    Default two ways

    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
    paltinescu is on a distinguished road

      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!

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar