1. #11
    Sencha User
    Join Date
    Jun 2011
    Location
    India
    Posts
    31
    Vote Rating
    2
    tanmayasahu is on a distinguished road

      0  

    Default Facing Problem with Hbox and Vbox layout

    Facing Problem with Hbox and Vbox layout


    Hi Everybody,
    I am developing a portal type application. For which I am using 3 hbox layout inside vbox layout. Please see the code below. The problem is when I am maximizing the child item of inner hbox layout it is using only its immidiate parent's area not the full screen.

    I want when I will maximize any child item of all the three hbox panel, it will use total screen area. Please see the code and suggest how I can achieve that....

    Ext.create('Ext.container.Viewport', {
    id : 'main-content-port',
    layout: { type: 'vbox', align: 'stretch' },
    items: [{
    id: 'main-hbox1',
    xtype: 'panel',
    border : false,
    layout:{ type: 'hbox', align: 'stretch' },
    flex: 1,
    items: [{
    xtype: 'custPan',
    id : 'firstPan',
    title : 'firstPan'
    },
    {
    xtype: 'custPan',
    id : 'secPan',
    title : 'secPan'
    },
    {
    xtype: 'custPan',
    id : 'thirdPan',
    title : 'thirdPan'
    },
    {
    xtype: 'custPan',
    id : 'fourthPan',
    title : 'fourthPan'
    },
    {
    xtype: 'custPan',
    id : 'fifthPan',
    title : 'fifthPan'
    }]
    },
    {
    id: 'main-hbox2',
    xtype: 'panel',
    border : false,
    layout:{ type: 'hbox', align: 'stretch' },
    flex: 1,
    items: [{
    xtype: 'custPan',
    id : 'sixthPan',
    title : 'sixthPan'
    },
    {
    xtype: 'custPan',
    id : 'seventhPan',
    title : 'seventhPan'
    },
    {
    xtype: 'custPan',
    id : 'eightthPan',
    title : 'eightthPan'
    },
    {
    xtype: 'custPan',
    id : 'ninthPan',
    title : 'ninthPan'
    },
    {
    xtype: 'custPan',
    id : 'tenthPan',
    title : 'tenthPan'
    }]
    },
    {
    id: 'main-hbox3',
    xtype: 'panel',
    border : false,
    layout:{ type: 'hbox', align: 'stretch' },
    flex: 1,
    items: [{
    xtype: 'custPan',
    id : 'eleventhPan',
    title : 'eleventhPan'
    },
    {
    xtype: 'custPan',
    id : 'twelvethPan',
    title : 'twelvethPan'
    },
    {
    xtype: 'custPan',
    id : 'thirteenthPan',
    title : 'thirteenthPan'
    },
    {
    xtype: 'custPan',
    id : 'fourteenthPan',
    title : 'fourteenthPan'
    }]
    },{

    id: 'bottomBar',
    xtype: 'panel',
    height : 35,
    bodyStyle: 'padding:5px',
    items:[]

    }]


    });

    the Custom panel Class(xtype : 'custPan')...
    Ext.define('APP.views.customExtPanel' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.custPan',
    margin : '5 5 5 5',
    layout: 'fit',
    flex: 1,
    tools : tools,
    closeAction: 'hide',
    initComponent: function() {
    this.store = {
    fields: ['name', 'email'],
    data : [
    {name: 'Test1', email: 'test1@pft.com'},
    {name: 'Test2', email: 'test2@pft.com'},
    {name: 'Test3', email: 'test3@pft.com'},
    {name: 'Test4', email: 'test4@pft.com'},
    {name: 'Test5', email: 'test5@pft.com'},
    {name: 'Test2', email: 'test2@pft.com'},
    {name: 'Test3', email: 'test3@pft.com'},
    {name: 'Test4', email: 'test4@pft.com'},
    {name: 'Test5', email: 'test5@pft.com'},
    {name: 'Test2', email: 'test2@pft.com'},
    {name: 'Test3', email: 'test3@pft.com'},
    {name: 'Test4', email: 'test4@pft.com'}

    ]
    };


    this.columns = [
    {header: 'Name', dataIndex: 'name', flex: 1},
    {header: 'Email', dataIndex: 'email', flex: 1}
    ];


    this.callParent(arguments);
    }
    });


    My Maximizing tool logic...

    {
    type:'maximize',
    itemId: 'maximize',
    qtip: 'Maximize Panel',
    handler: function(e, target, panelHeader)
    {
    var panelCmp = panelHeader.up("[xtype='custPan']")
    panelCmpIndx = panelCmp.ownerCt.items.indexOf(panelCmp);
    var parentKey = 'parent'+panelCmp.id;
    var parentObj = {};
    parentObj[parentKey] = panelCmp.ownerCt.id;
    parentCmpArr.push(parentObj);

    desiredPanelWidth = Ext.getBody().getViewSize().width;
    desiredPanelHeight = Ext.getBody().getViewSize().height;

    panelCmp.setPosition(0, 0, true);
    panelCmp.floating = true;
    panelCmp.constrainTo = Ext.get('main-content-port');


    panelCmp.setWidth(parseInt(desiredPanelWidth));
    panelCmp.setHeight(parseInt(desiredPanelHeight));
    panelCmp.show();
    panelCmp.doLayout();

    }
    }


    Please help....Thanks in Advance....

  2. #12
    Sencha User
    Join Date
    Sep 2013
    Posts
    4
    Vote Rating
    0
    mrpale is on a distinguished road

      0  

    Default


    Quote Originally Posted by skirtle View Post
    The 20000px thing is to be expected using an hbox layout. It solves a specific problem that occurs in some edge cases. Say, for example, you have a button in a container where all the widths are determined by the text on the button. If the container starts off too narrow then the text will line wrap and measuring the text's width will give the wrong answer. Slipping a very wide element in between isn't the most elegant solution but it does prevent this crushing effect. Unfortunately there isn't a fast way to add and remove this wide element on demand so it ends up being there all the time.
    The 20,000px causes me a serious problem.

    If you have some three panels with controls in each all in an hbox layout panel and then put the mouse in one of the controls and happen to drag the mouse to the extreme right you will get your controls out of view!!!

    is there a way to disable the 20,000 element! this is a serious problem!

    Update:
    I've overridden the renderTpl for Ext.layout.container.Box and the problem is no more!

    as such:
    Code:
    Ext.override(Ext.layout.container.Box, {
        renderTpl: [
            '{%var oc,l=values.$comp.layout,oh=l.overflowHandler;',
            'if (oh.getPrefixConfig!==Ext.emptyFn) {',
                'if(oc=oh.getPrefixConfig())dh.generateMarkup(oc, out)',
            '}%}',
            '<div id="{ownerId}-innerCt" class="{[l.innerCls]} {[oh.getOverflowCls()]}" role="presentation">',
                '<div id="{ownerId}-targetEl" style="position:absolute;left:0px;top:0px;height:1px">',
                    '{%this.renderBody(out, values)%}',
                '</div>',
            '</div>',
            '{%if (oh.getSuffixConfig!==Ext.emptyFn) {',
                'if(oc=oh.getSuffixConfig())dh.generateMarkup(oc, out)',
            '}%}',
            {
                disableFormats: true,
                definitions: 'var dh=Ext.DomHelper;'
            }
        ]
    });
    Now the controls don't go out of view on drag