[OPEN] [#225] Portal and VBoxLayoutConfig

[Akpenob]

Hello members

I am trying to make a Portal witch contains four portlets and want them be able to have the same size
the size they have is used by flex on them all.

When the portal is show they are shown correctly, and when i reorder a portlet in the same column they keep the size correctly.

ex

Portlet1 is in column1
Portlet2 is in column2

Portlet3 is in column1
Portlet4 is in column2

If i move portlet 4 up on to portlet1 place they swap and the size is keept correctly..
If move portlet2 to column1, portlet4 expands as it should and column1 has 3 portlets but one of does not have the correct size

To help under stands this better please take a look on the images that i uploaded to clarify my point.

Read here after you have seen the images

Is this a bug...? or can i control this behaivor better and if so how

Regards

Akpenob

[Daniil]

Hi @Akpenob,

A Portal uses a ColumnLayout for columns and an AnchorLayout for rows within columns.

So, a VBoxLayout is not used by default and it might be complicated to get it working with a VBoxLayout.

Did you override something?

[Akpenob]

Hi @Akpenob,

A Portal uses a ColumnLayout for columns and an AnchorLayout for rows within columns.

So, a VBoxLayout is not used by default and it might be complicated to get it working with a VBoxLayout.

Did you override something?

No not at all..

my setup is as following..

 Portal portelDashBoard = new Portal();
            portelDashBoard.Layout = "Fit";

            PortalColumn portalColumn1 = new PortalColumn()
            {
                ID = this.ID+"_column1",
                Flex = 1
            };
            PortalColumn portalColumn2 = new PortalColumn()
            {
                ID = this.ID + "_column2",
                Flex=1
            };

            portalColumn1.LayoutConfig.Add(new VBoxLayoutConfig()
            {
                Align = VBoxAlign.Stretch
            });

            portalColumn2.LayoutConfig.Add(new VBoxLayoutConfig()
            {
                Align = VBoxAlign.Stretch
            });

            portelDashBoard.Items.Add(portalColumn1);
            portelDashBoard.Items.Add(portalColumn2);

            Portlet portLet = new Portlet();
            portLet.ID = this.ID + "_portletUser";
            portLet.Title = "Users";
            portLet.Flex = 1;
            portLet.Collapsible = false;

            Portlet portLet2 = new Portlet();
            portLet2.ID = this.ID + "_portletPieChart";
            portLet2.Title = "Pie Chart";
            portLet2.Collapsible = false;
            portLet2.Flex = 1;

            Portlet portLet3 = new Portlet();
            portLet3.ID = this.ID + "_portletBarChart";
            portLet3.Title = "Bar Chart";
            portLet3.Collapsible = false;
            portLet3.Flex = 1;


            Portlet portLet4 = new Portlet();
            portLet4.ID = this.ID + "_portletGauge";
            portLet4.Title = "Bar Chart";
            portLet4.Collapsible = false;
            portLet4.Flex = 1;

this is the server code that creates the Portal and its following portlets..

Regards

Akpenob

[Akpenob]

By the way i must say that your framework is realy a joy to work with and very flexiable..

Its been a treat to work in and one off my favorite frameworks :-)

Regards

Akpenob

[Daniil]

Thank you for the kind words!

Regarding the problem.

I am afraid a PortalColumn doesn't support a VBoxLayout.

Could you clarify why you are using a VBoxLayout? An AnchorLayout should suite your needs, doesn't it?

[Akpenob]

Thank you for the kind words!

Regarding the problem.

I am afraid a PortalColumn doesn't support a VBoxLayout.

Could you clarify why you are using a VBoxLayout? An AnchorLayout should suite your needs, doesn't it?

Again thanks for a some great support you have been very kind with your help

The reason i want to use a vbox layout is that i could ensure that every one of the 4 four components had the same size if i used flex.

Meaning that i could be rid of have to set a static height or width..

The idea was if i move one of the porlets from one column to the other it would recalcute the size and adjust accordianly.

the reasult was almost as exscpected, except what i have shown in the images..

i have not tried with an anchorlayout but i will try and see if this suits my need..

Regards

Akpenob

[Daniil]

I am afraid you won't achieve the required with the default ColumnLayout/AnchorLayout.

the reasult was almost as exscpected, except what i have shown in the images..

Please provide a test case to work with. Maybe, I will able to come up with a solution.

[Akpenob]

I am afraid you won't achieve the required with the default ColumnLayout/AnchorLayout.



Please provide a test case to work with. Maybe, I will able to come up with a solution.

sure

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Portal.aspx.cs" Inherits="LIA.APP.WEB.LinkItAll.Portal"
ValidateRequest="false" Async="true" EnableViewState="false" ViewStateMode="Disabled" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title></title>
</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" ViewStateMode="Disabled"
        EnableViewState="false" />
    <ext:Window ID="Window1" runat="server" Closable="true" Resizable="false" Height="600"
        Icon="Lock" Title="LinkItAll - Login" Draggable="false" Width="800" Modal="true"
        BodyPadding="5" Layout="FitLayout">
        <Items>
            <ext:Panel BodyPadding="0" ID="mainBody" Layout ="FitLayout" runat="server">
                <Items>
                    <ext:Portal ID="mainPortal" Layout="FitLayout" runat="server">
                        <Items>
                            <ext:PortalColumn ID="column1" Flex="1" runat="server">
                              <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align ="Stretch">
                                    </ext:VBoxLayoutConfig>
                                </LayoutConfig>
                             <Items>
                                <ext:Portlet ID="portlet1" Flex="1" runat="server">
                                </ext:Portlet>
                                <ext:Portlet ID="portlet2" Flex="1" runat="server">
                                </ext:Portlet>
                             </Items>
                            </ext:PortalColumn>
                            <ext:PortalColumn ID="column2" Flex="1" runat="server">
                                <LayoutConfig>
                                    <ext:VBoxLayoutConfig Align ="Stretch">
                                    </ext:VBoxLayoutConfig>
                                </LayoutConfig>
                                <Items>
                                <ext:Portlet ID="portlet3" Flex="1" runat="server">
                                </ext:Portlet>
                                <ext:Portlet ID="portlet4" Flex="1" runat="server">
                                </ext:Portlet>
                             </Items>
                            </ext:PortalColumn>
                        </Items>
                    </ext:Portal>
                </Items>
            </ext:Panel>
        </Items>
    </ext:Window>
    </form>
</body>
</html>

[Daniil]

Thank you.

Please try the following override.

Fix

Ext.app.PortalDropZone.override({
    notifyDrop : function (dd, e, data) {
        delete this.grid;

        if (!this.lastPos) {
            return;
        }

        var c = this.lastPos.c,
            col = this.lastPos.col,
            pos = this.lastPos.p,
            panel = dd.panel,
            dropEvent = this.createEvent(dd, e, data, col, c, pos !== false ? pos : c.items.getCount());

        Ext.suspendLayouts();

        if (this.portal.fireEvent('validatedrop', dropEvent) !== false && this.portal.fireEvent('beforedrop', dropEvent) !== false) {

            // make sure panel is visible prior to inserting so that the layout doesn't ignore it
            panel.el.dom.style.display = '';
            panel.margin = "0 0 10 0"; // added

            if (pos !== false) {
                c.insert(pos, panel);
            } else {
                c.add(panel);
            }

            dd.proxy.hide();
            this.portal.fireEvent('drop', dropEvent);

            // scroll position is lost on drop, fix it
            var st = this.scrollPos.top;

            if (st) {
                var d = this.portal.body.dom;
                setTimeout(function() {
                    d.scrollTop = st;
                },
                10);
            }

        }
        
        Ext.resumeLayouts(true);

        delete this.lastPos;
        return true;
    }
});

But this is still actual.

A Portal uses a ColumnLayout for columns and an AnchorLayout for rows within columns.

So, a VBoxLayout is not used by default and it might be complicated to get it working with a VBoxLayout.

So, using a Portal in non-standard mode can make it broken with the next Ext.NET release. For example, the Portlets' height in your example is not stretched with Ext.NET v2.2. So, be careful.

[Akpenob]

Hi Danill

Thanks for the override..

Unfortunaly i cant seem to find this in the Ext.app

Ext.app.PortalDropZone = undefinded

any idea where to look for it..?

Regards

Akpenob