Results 1 to 9 of 9

Thread: lost vertical gap between the panels in viewport

  1. #1
    Ext User KSagar's Avatar
    Join Date
    Oct 2009
    Location
    Pune, India
    Posts
    39

    Question lost vertical gap between the panels in viewport

    I am using view-port. I am trying to create new panels dynamically in view-port. After creation of these panels, I found that the vertical gap between the newly added panels is lost. Please help.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    What do you mean "lost"?

    You have to ASK for margins

  3. #3
    Ext User KSagar's Avatar
    Join Date
    Oct 2009
    Location
    Pune, India
    Posts
    39

    Question

    In my view-port, I have small horizontal gap between the view-port columns but there no gap between the two panels from the same column. It looks like these panel are stick to each other one above without a fraction of gap.

    Where and how to specify margin?

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    It depends on the layout. Which layout does the container of these 2 panels have?

  5. #5
    Ext User KSagar's Avatar
    Join Date
    Oct 2009
    Location
    Pune, India
    Posts
    39

    Question

    My code for viewport is as,

    var viewport = new Ext.Viewport({
    layout:'border',
    items:[{
    xtype: 'tbbutton',
    text: 'Configure Viewport',
    handler: function()
    {
    configWindow.show();
    }
    },{
    xtype:'portal',
    id: 'portalmain',
    region:'center',
    margins:'35 5 5 0',
    items:[{
    columnWidth:.33,
    id:'portal1',
    style:'padding:10px 0 10px 10px'
    },{
    columnWidth:.33,
    id:'portal2',
    style:'padding:10px 0 10px 10px'
    },{
    columnWidth:.33,
    id:'portal3',
    style:'padding:10px'
    }]
    }]
    });

    Where I need to change?

    I have edited already available portal sample from examples by extjs. I think portal coloumn layout is 'anchor'

  6. #6
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    That should be:
    Code:
    var viewport = new Ext.Viewport({
        layout: 'fit',
        items: {
            xtype: 'portal',
            tbar: [{
                text: 'Configure Viewport',
                handler: function () {
                    configWindow.show();
                }
            }],
            id: 'portalmain',
            margins: '35 5 5 0',
            items: [{
                columnWidth: .33,
                id: 'portal1',
                style: 'padding:10px 0 10px 10px'
            },{
                columnWidth: .33,
                id: 'portal2',
                style: 'padding:10px 0 10px 10px'
            },{
                columnWidth: .33,
                id: 'portal3',
                style: 'padding:10px'
            }]
        }
    });

  7. #7
    Ext User KSagar's Avatar
    Join Date
    Oct 2009
    Location
    Pune, India
    Posts
    39

    Default

    It is not working. It is just making layout change for view port.

    I think this problem is related to the layout of portal column.

    Screen-shot is attached with this reply.
    Attached Images Attached Images

  8. #8
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,245

    Default

    Are you adding Panels? You should be adding Portlets!

    ps. It doesn't need to be a Portlet, but in that case your panel should be configured with:
    Code:
    anchor : '100%',
    frame : true,
    collapsible : true,
    draggable : true,
    cls : 'x-portlet'

  9. #9
    Ext User KSagar's Avatar
    Join Date
    Oct 2009
    Location
    Pune, India
    Posts
    39

    Smile

    Hey...it helps. Now it is showing proper distance between the panels.
    Scrrenshot is attached.

    Thanks Condor.
    Attached Images Attached Images

Posting Permissions

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