1. #1
    Ext JS Premium Member
    Join Date
    Apr 2009
    Location
    Hamburg, Germany
    Posts
    4
    Vote Rating
    0
    Bartholomew is on a distinguished road

      0  

    Question Unanswered: How to constrain resizable items in container with hbox layout?

    Unanswered: How to constrain resizable items in container with hbox layout?


    Let's say I have two items inside a container with a hbox layout. The first (left) item is resizable to the right and the second (right) item has a min width set. Unfortunately, it is possible to resize the the first item until the it's resize handle and the second item are outside of their parent container.

    Is there a way to constrain the items inside their container? I already tried constrainAlign, manageOverflow and shrinkWrap. But to be honest, I don't really know where to put them. Thanks in advance.

    PHP Code:
    Ext.create('Ext.Panel', {
        
    width500,
        
    height300,
        
    title"HBoxLayout Panel",
        
    layout: {
            
    type'hbox',
            
    align'stretch',
            
    pack'start'
        
    },
        
    renderTodocument.body,
        
    items: [{
            
    xtype'panel',
            
    title'Inner Panel One',
            
    width100,
            
    resizable: {
                
    handles'e'
            
    }
        },{
            
    xtype'panel',
            
    title'Inner Panel Two',
            
    minWidth100,
            
    flex1
        
    }]
    }); 

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    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


    Could try using border layout instead. It will stop the resize.
    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.

  3. #3
    Ext JS Premium Member
    Join Date
    Apr 2009
    Location
    Hamburg, Germany
    Posts
    4
    Vote Rating
    0
    Bartholomew is on a distinguished road

      0  

    Default


    Sadly, the border layout doesn't work in my particular case. Does your reply mean, that currently there is no way to do it using the hbox layout?

  4. #4
    Ext JS Premium Member
    Join Date
    Apr 2009
    Location
    Hamburg, Germany
    Posts
    4
    Vote Rating
    0
    Bartholomew is on a distinguished road

      0  

    Default


    Okay, I found out using a splitter will fix this problem, but inserts another item which kind of messes up my code. Is there any other way without inserting extra items?

    Example with splitter item:
    PHP Code:
    Ext.create('Ext.Panel', {
        
    width500,
        
    height300,
        
    title"HBoxLayout Panel",
        
    layout: {
            
    type'hbox',
            
    align'stretch',
            
    pack'start'
        
    },
        
    renderTodocument.body,
        
    items: [{
            
    xtype'panel',
            
    title'Inner Panel One',
            
    width100
        
    },{
            
    xtype'splitter',
        },{
            
    xtype'panel',
            
    title'Inner Panel Two',
            
    minWidth100,
            
    flex1
        
    }]
    }); 

Thread Participants: 1

Tags for this Thread