[CLOSED] Portlet question

[idrissb]

if I have and ext:Portal with 3 columns - is it possible to have a portlet in column1 span the width of the protal i.e span all 3 columns.
thnak you
idriss

 <ext:Portal ID="Portal2" runat="server" Layout="column" BodyBorder="false" 
                                        Border="false" BodyStyle="padding:2px 2px 2px 2px;">
                                        <Items>
                                            <ext:PortalColumn ID="prtColum1" runat="server" ColumnWidth=".33" Cls="x-column-padding"
                                                Layout="Anchor">
                                                <Items>
                                                    <ext:Portlet ID="prt1" runat="server" Title="Open Claims Summary">
                                                        <Items>
                                                            <ext:Panel ID="prt1Panel" runat="server" Layout="fit">
                                                            </ext:Panel>
                                                        </Items>
                                                    </ext:Portlet>
                                                   <%-- SPAN ACROSS ALL 3 columns --%>
                                                    <ext:Portlet ID="prt3" runat="server" Title="Large Loss Claims">
                                                        <Items>
                                                            <ext:Panel ID="prt3Panel" runat="server" Layout="fit">
                                                            </ext:Panel>
                                                        </Items>
                                                    </ext:Portlet>
                                             </Items>
                                            </ext:PortalColumn>
                                            <ext:PortalColumn ID="prtColum2" runat="server" ColumnWidth=".33" Cls="x-column-padding"
                                                Layout="Anchor">
                                                <Items>
                                                    <ext:Portlet ID="prt2" runat="server" Title="Year Summary">
                                                        <Items>
                                                            <ext:Panel ID="prt2Panel" runat="server" Layout="fit">
                                                            </ext:Panel>
                                                        </Items>
                                                    </ext:Portlet>
                                                    <ext:Portlet ID="prt5" runat="server" Title="Top Claims By Amount Paid">
                                                        <Items>
                                                            <ext:Panel ID="prt5Panel" runat="server" Layout="fit">
                                                            </ext:Panel>
                                                        </Items>
                                                    </ext:Portlet>
                                                    <ext:Portlet ID="Portlet7" runat="server" Title="Incurred By Loss year" >
                                                    </ext:Portlet>
                                                </Items>
                                            </ext:PortalColumn>
                                            <ext:PortalColumn ID="prtColum3" runat="server" ColumnWidth=".33" Cls="x-column-padding1"
                                                Layout="Anchor">
                                                <Items>
                                                    <ext:Portlet ID="prt4" runat="server" Title="Claims by Year">
                                                        <Items>
                                                            <ext:Panel ID="prt4Panel" runat="server" Layout="fit">
                                                            </ext:Panel>
                                                        </Items>
                                                    </ext:Portlet>
                                                    <ext:Portlet ID="prt6" runat="server" Title="Top Claims By Reserve Outstanding">
                                                        <Items>
                                                            <ext:Panel ID="prt6Panel" runat="server" Layout="fit">
                                                            </ext:Panel>
                                                        </Items>
                                                    </ext:Portlet>
                                                    <ext:Portlet ID="prt8" runat="server" Title="Incurred Claims By Loss Month">
                                                        <Items>
                                                            <ext:Panel ID="prt8Panel" runat="server" Layout="fit">
                                                            </ext:Panel>
                                                        </Items>
                                                    </ext:Portlet>
                                                </Items>
                                            </ext:PortalColumn>
                                        </Items>
                                    </ext:Portal>

[Daniil]

Hi,

You can achieve this combining portlets with several portals.

Something like this:

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Viewport runat="server" Layout="vbox">
        <LayoutConfig>
            <ext:VBoxLayoutConfig Align="Stretch"/>
        </LayoutConfig>
        <Items>
            <ext:Portal runat="server" Layout="column">
                <Items>
                    <ext:PortalColumn runat="server" ColumnWidth=".5">
                        <Items>
                            <ext:Portlet runat="server" Title="Portal1" />
                        </Items>
                    </ext:PortalColumn>
                    <ext:PortalColumn runat="server" ColumnWidth=".5">
                        <Items>
                            <ext:Portlet runat="server" Title="Portal2" />
                        </Items>
                    </ext:PortalColumn>
                </Items>
            </ext:Portal>
            <ext:Portal runat="server" Layout="column">
                <Items>
                    <ext:PortalColumn runat="server" ColumnWidth="1">
                        <Items>
                            <ext:Portlet runat="server" Title="Portal3" />
                        </Items>
                    </ext:PortalColumn>
                </Items>
            </ext:Portal>
            <ext:Portal runat="server" Layout="column">
                <Items>
                    <ext:PortalColumn runat="server" ColumnWidth=".33">
                        <Items>
                            <ext:Portlet runat="server" Title="Portal4" />
                        </Items>
                    </ext:PortalColumn>
                    <ext:PortalColumn runat="server" ColumnWidth=".33">
                        <Items>
                            <ext:Portlet runat="server" Title="Portal5" />
                        </Items>
                    </ext:PortalColumn>
                    <ext:PortalColumn runat="server" ColumnWidth=".33">
                        <Items>
                            <ext:Portlet runat="server" Title="Portal6" />
                        </Items>
                    </ext:PortalColumn>
                </Items>
            </ext:Portal>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

[idrissb]

thank you. that will work
idriss

[idrissb]

my layout is getting close but I can not get scrolling to work for the entire panel so that users do not have to scroll for each portal. may be you can suggest solution.

my problem is - I have 3 portals within my center region each a number of PortalColumns. the Third portal is not visible on page so I would like scrolling to happen on the Panel called Panel1. Also trying to have portal collapse/Expand but rendering is correct. portal comes in collapse. Once I click on collapse icon, it expands and then I can expand it anymore. Also, I try to expand first portal called Portal5, it is expanding second portal called Portal4.

I have update from SVN this morning so running latest. Thanks for any help you can offer.
idriss

here is my page

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="dashboard.aspx.cs" Inherits="IFG.Portal.dashboard" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="webparts/site/NavControls.ascx" TagName="NavControls" TagPrefix="uc2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Dashboards</title>
    <style type="text/css">
        .x-column-padding
        {
            padding: 6px 0px 6px 6px;
        }
        .x-column-padding1
        {
            padding: 6px;
        }
        body
        {
            font-size: 12px;            
            font-family: "Trebuchet MS" ,sans-serif;
        }
        #settingsWrapper
        {
            border-bottom: 1px solid #111;
            background-color: #323232;
            padding-left: 4px;
        }
        #settings
        {
            padding: 2px;
            border-bottom: 1px solid #3B3B3B;
        }
        #settings ul li
        {
            display: inline;
            color: #fff;
            margin-right: 8px;
            line-height: 24px;
            padding: 2px;
            padding-left: 19px;
        }
        #settings ul li a, #settings ul li a:link
        {
            color: #fff;
            text-decoration: none;
            font-family: tahoma,sans-serif;
            font-size: 14px;
            font-weight: bold;
        }
        #settings ul li a:hover
        {
            text-decoration: underline;
        }
        #pageTitle
        {
            font-family: "Trebuchet MS" ,sans-serif;
            font-size: 18px;
            font-weight: bold;
            text-align: left;
            color: #c6c6c6;
            padding-left: 10px;
            margin-top: 15px;
        }
        
        #pagecontent
        {
        }
        
        #itemAddWidget
        {
        }
        
        .PortletStyle1 .x-panel .MyIconClass{        
            background-image:url("images/acc_dashboard_large.gif") !important;   
        }
        
        .PortletStyle1 .x-panel .x-panel-header .MyIconClass{
            overflow: visible !important;
            padding-left: 6px;
        }
         
        label, legend, .label {
         color: #111010;
         font-family: Verdana,Tahoma,Helvetica,sans-serif;
        }
        label {
         font-size: .7em;
         display: block;
        }
        .dialog-text {
         color: #000;
         overflow-x: hidden;
         overflow-y: auto;
         padding: 6px;
         padding-left: 5px;
         line-height: 125%;
        }
        .dashboardHeader {
         font-weight: bold;
        }
        
        .centerImage {
         text-align:center;
        }
        
        .chartPopup {
         font-size : 0.8em;
         color:#111010;
         padding-top: 8px;
         position : absolute;
         height : 187px;
         width : 203px;
         background : transparent url("images/widgets/DrillDownPopupBg.png");
         text-align : center;
         vertical-align : middle;
         visibility : hidden;
         z-index : 9999999;
        }
    </style>  
    
    <ext:ResourcePlaceHolder ID="ScriptContainer1" runat="server" Mode="ScriptFiles">
        <script src='<%= ResolveUrl("~/JavaScript/jquery-1.3.2.min.js") %>'  type="text/javascript"></script>
        <script src='<%= ResolveUrl("~/JavaScript/jquery-json-1.3.min.js") %>'  type="text/javascript"></script>
        <script src='<%= ResolveUrl("~/JavaScript/value.format.js") %>'  type="text/javascript"></script>
    </ext:ResourcePlaceHolder>
    
    <script type="text/javascript">
        var setVisiblePortletTools = function(portlet, visible) {
            for (var tool in portlet.tools) {
                portlet.tools[tool].setVisible(visible);
            }
        }
        var closeHandler = function(event, toolEl, panel) {
            alert('Hello from close handler!');
        }
        function callEdit(panel) {
            //var panelId = e.panel.id;
            Ext.net.DirectMethods.CallEdit(panel);
        }
    </script>
    <script type="text/javascript">
    // When DOM loads, init the page.
    $(InitPage);
    // Init the page.
    function InitPage() {
    }
    var NumberToCurrency = function(num, scale) {
        // temp hack
        scale = 0;
        var per = 1;
        for (var i = 1; i <= scale; i++)
            per = per * 10;
        num = num.toString().replace(/\$|\,/g, '');
        if ((num.substr(0, 1) == '(' && num.substr(num.length - 1, 1) == ')'))
            num = '-' + num.substr(1, num.length - 2);
        if (isNaN(num))
            num = "0";
        sign = (num == (num = Math.abs(num)));
        num = Math.floor(num * per + 0.50000000001);
        cents = (num % per);
        num = Math.floor(num / per).toString();
        var temp = cents.toString().length;
        for (var cenlen = 1; cenlen <= (scale - temp); cenlen++)
            cents = "0" + cents;
        for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
            num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
        if (scale == null || scale == 0)
            return (((sign) ? '' : '(') + '$' + num + ((sign) ? '' : ')'));
        else
            return (((sign) ? '' : '(') + '$' + num + '.' + cents + ((sign) ? '' : ')'));
    }
    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
   
    <ext:Menu ID="Menu1" runat="server">
        <Items>
            <ext:MenuItem ID="MenuItem1" runat="server" Text="Item 1" Icon="Add" />
            <ext:MenuItem ID="MenuItem2" runat="server" Text="Item 2" Icon="Accept" />
            <ext:MenuItem ID="MenuItem3" runat="server" Text="Item 3" Icon="Decline" />
        </Items>
    </ext:Menu>
   
   <div id="chartContextPopup" class="label dialog-text chartPopup" style="visibility: hidden;">
   </div>
       
   <ext:Viewport ID="Viewport1" runat="server" StyleSpec="background-color: transparent;">
        <Items>
            <ext:BorderLayout ID="BorderLayout1" runat="server">
                <North>
                    <ext:Panel ID="pnlNorth" runat="server" Height="95" Border="false" Header="false" Layout="Fit"
                        BodyStyle="background-color: transparent;">
                        <Content>
                            <div id="settingsWrapper">
                                <div id="settings">
                                    <ul>
                                        <li id="itemAddWidget"><a href="#">Add Widget</a></li>
                                    </ul>
                                </div>
                            </div>
                           <uc2:NavControls runat="server" ID="nav1" />
                        </Content>
                    </ext:Panel>
                </North>
                <Center MarginsSummary="2 2 2 2">
                    <ext:Panel ID="Panel1" runat="server" Border="false" Layout="VBox" AutoScroll="true">
                        <LayoutConfig>
                            <ext:VBoxLayoutConfig Padding="5" Align="Stretch" />
                        </LayoutConfig>
                        <Items>
                            <ext:Portal ID="Portal5" runat="server" Layout="column">
                                 <LayoutConfig>
                                    <ext:ColumnLayoutConfig FitHeight="false" />
                                </LayoutConfig>
                                <Items>
                                    <ext:PortalColumn ID="PortalColumn6" runat="server" ColumnWidth=".33">
                                        <Items>
                                            <ext:Portlet ID="Portlet6" runat="server" Title="Portal4" />
                                        </Items>
                                    </ext:PortalColumn>
                                    <ext:PortalColumn ID="PortalColumn10" runat="server" ColumnWidth=".33">
                                        <Items>
                                            <ext:Portlet ID="Portlet8" runat="server" Title="Portal5" />
                                        </Items>
                                    </ext:PortalColumn>
                                    <ext:PortalColumn ID="PortalColumn11" runat="server" ColumnWidth=".33">
                                        <Items>
                                            <ext:Portlet ID="Portlet9" runat="server" Title="Portal6" />
                                        </Items>
                                    </ext:PortalColumn>
                                </Items>
                            </ext:Portal>
                            <ext:Portal ID="Portal4" runat="server" Layout="column" Border="true" BodyBorder="true"
                                BodyStyle="padding:2px 2px 2px 2px;">
                                <LayoutConfig>
                                    <ext:ColumnLayoutConfig FitHeight="false" />
                                </LayoutConfig>
                                <Items>
                                    <ext:PortalColumn ID="PortalColumn7" runat="server" ColumnWidth=".33" Cls="x-column-padding">
                                        <Items>
                                            <ext:Portlet ID="prt1" runat="server" Title="Open Claims Summary">
                                                <Items>
                                                    <ext:Panel ID="prt1Panel" runat="server" Layout="fit">
                                                    </ext:Panel>
                                                </Items>
                                            </ext:Portlet>
                                            <ext:Portlet ID="prt3" runat="server" Title="Large Loss Claims">
                                                <Items>
                                                    <ext:Panel ID="prt3Panel" runat="server" Layout="fit">
                                                    </ext:Panel>
                                                </Items>
                                            </ext:Portlet>
                                            <ext:Portlet ID="Portlet7" runat="server" Title="Portlet Custom" Html="Some content">
                                                <Listeners>
                                                    <Render Handler="   setVisiblePortletTools(this, false);
                                                            var mouseoverHandler = function() {
                                                                        setVisiblePortletTools(this, true);
                                                                    },
                                                                    mouseoutHandler = function() {
                                                                        setVisiblePortletTools(this, false);
                                                                    };
                                                            this.header.on('mouseover', mouseoverHandler, this);
                                                            this.header.on('mouseout', mouseoutHandler, this);" />
                                                </Listeners>
                                                <Tools>
                                                    <ext:Tool Type="Gear" Handler="#{Menu1}.show(toolEl);">
                                                    </ext:Tool>
                                                </Tools>
                                            </ext:Portlet>
                                        </Items>
                                    </ext:PortalColumn>
                                    <ext:PortalColumn ID="PortalColumn8" runat="server" ColumnWidth=".33" Cls="x-column-padding">
                                        <Items>
                                            <ext:Portlet ID="prt2" runat="server" Title="Summary">
                                                <Items>
                                                    <ext:Panel ID="prt2Panel" runat="server" Layout="fit">
                                                    </ext:Panel>
                                                </Items>
                                            </ext:Portlet>
                                            <ext:Portlet ID="prt5" runat="server" Title="Top Claims By Amount Paid">
                                                <Items>
                                                    <ext:Panel ID="prt5Panel" runat="server" Layout="fit">
                                                    </ext:Panel>
                                                </Items>
                                            </ext:Portlet>
                                            <ext:Portlet ID="prt7" runat="server" Title="Incurred By Loss year">
                                                <Items>
                                                    <ext:Panel ID="prt7Panel" runat="server" Layout="fit">
                                                    </ext:Panel>
                                                </Items>
                                            </ext:Portlet>
                                        </Items>
                                    </ext:PortalColumn>
                                    <ext:PortalColumn ID="PortalColumn9" runat="server" ColumnWidth=".33" Cls="x-column-padding1">
                                        <Items>
                                            <ext:Portlet ID="prt4" runat="server" Title="Claims by Year">
                                                <Items>
                                                    <ext:Panel ID="prt4Panel" runat="server" Layout="fit">
                                                    </ext:Panel>
                                                </Items>
                                            </ext:Portlet>
                                            <ext:Portlet ID="prt6" runat="server" Title="Top Claims By Reserve Outstanding">
                                                <Items>
                                                    <ext:Panel ID="prt6Panel" runat="server" Layout="fit">
                                                    </ext:Panel>
                                                </Items>
                                            </ext:Portlet>
                                            <ext:Portlet ID="prt8" runat="server" Title="Incurred Claims By Loss Month">
                                                <Items>
                                                    <ext:Panel ID="prt8Panel" runat="server" Layout="fit">
                                                    </ext:Panel>
                                                </Items>
                                            </ext:Portlet>
                                        </Items>
                                    </ext:PortalColumn>
                                </Items>
                            </ext:Portal>
                            <ext:Portal ID="Portal7" runat="server" Layout="column">
                                <LayoutConfig>
                                    <ext:ColumnLayoutConfig FitHeight="false" />
                                </LayoutConfig>
                                <Items>
                                    <ext:PortalColumn ID="PortalColumn3" runat="server" ColumnWidth=".5">
                                        <Items>
                                            <ext:Portlet ID="Portlet3" runat="server" Title="Portal1" />
                                        </Items>
                                    </ext:PortalColumn>
                                    <ext:PortalColumn ID="PortalColumn4" runat="server" ColumnWidth=".5">
                                        <Items>
                                            <ext:Portlet ID="Portlet4" runat="server" Title="Portal2" />
                                        </Items>
                                    </ext:PortalColumn>
                                </Items>
                            </ext:Portal>
                          
                            
                        </Items>
                    </ext:Panel>
                </Center>
            </ext:BorderLayout>
        </Items>
    </ext:Viewport>
    </form>
</body>
</html>

[Daniil]

Hi,

Unfortunately vbox layout doesn't support vertical scrolling. It sets container's height to parent container's height.

This simple example demonstrates it.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:Panel 
        runat="server" 
        Title="With vbox"
        Width="200" 
        Height="200" 
        Layout="vbox" 
        AutoScroll="true">
        <Items>
            <ext:Panel runat="server" Width="600" Height="600" />
        </Items>
    </ext:Panel>
    <ext:Panel 
        runat="server" 
        Title="Without vbox"
        Width="200" 
        Height="200"  
        AutoScroll="true">
        <Items>
            <ext:Panel runat="server" Width="600" Height="600" />
        </Items>
    </ext:Panel>
    </form>
</body>
</html>

Concerning to expand/collapse.

Either I can't reproduce it or misunderstanding what is wrong there. Could you provide us with screen-shots and (or) exactly steps to reproduce the issue.

NOTE: Marked as solved. No more information was provided.