1. #1
    Sencha User
    Join Date
    Oct 2010
    Location
    Vitoria-Gasteiz (Spain)
    Posts
    50
    Vote Rating
    0
    lucia_mgv is on a distinguished road

      0  

    Default Anchor and Hbox layouts

    Anchor and Hbox layouts


    Hi,

    I have a really simple example of hbox and anchor layour within a viewport and when I resize the viewport and vertical scroll bar appears, it is also appearing and anoying horizontal scroll. As I have an anchor layout the main containers width should recalculate when the vertical scroll bar appears, but in ExtJS 4.1 it doesn't...

    Here is the example:

    Code:
    var Container1 = new Ext.container.Container({
            height:400,
            flex:1,
            style:'background-color:red;'
        });
        var Container2 = new Ext.container.Container({
            height:400,
            width:200,
            style:'background-color:green;'
        });
        var CNT=new Ext.container.Container({
            id:'CNT',
            anchor:'100%',
            layout:'hbox',
            style:'background-color:blue;',
            items:[Container1, Container2]
        });
        var MWINDOW=new Ext.container.Container({
            id:'MWINDOW',
            cls:'l129',
            style:'',
            padding:'12 12 12 12',
            autoScroll:true,
            layout:'anchor',
            items:[CNT]
        });
        var viewport=new Ext.container.Viewport({
            id:'VIEWPORT',
            layout:'fit',
            cls:'l129',
            items:MWINDOW
        });
    Maybe I am doing something wrong, but in ExjJS 4.0.7 this is working...

    Lucía

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    St. Louis, MO
    Posts
    33,710
    Vote Rating
    436
    mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of mitchellsimoens has much to be proud of

      1  

    Default


    Using this code (removed the new keyword and all the ids... ids are bad):

    Code:
    var Container1 = Ext.create('Ext.container.Container', {
        height:400,
        flex:1,
        style:'background-color:red;'
    });
    var Container2 = Ext.create('Ext.container.Container', {
        height:400,
        width:200,
        style:'background-color:green;'
    });
    var CNT= Ext.create('Ext.container.Container', {
        anchor:'100%',
        layout:'hbox',
        style:'background-color:blue;',
        items:[Container1, Container2]
    });
    var MWINDOW= Ext.create('Ext.container.Container', {
        cls:'l129',
        style:'',
        padding:'12 12 12 12',
        autoScroll:true,
        layout:'anchor',
        items:[CNT]
    });
    var viewport = Ext.create('Ext.container.Viewport', {
        layout:'fit',
        cls:'l129',
        items:MWINDOW
    });
    and 4.0.7, 4.1 PR1, and our latest code I cannot produce scrollbars.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    http://www.JSONPLint.com - Source to lint your JSONP!

    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 almost in print!

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