PDA

View Full Version : [CLOSED] Dynamically adding portal columns



SymSure
Oct 10, 2012, 3:14 PM
Hi,

I have a portlet with portlet columns and portals. However, I want to be able to add a new column at runtime. But the added column is not coming into focus as the width of the existing portal columns are not been adjusted. I wrote code to adjust the with of the column but the width is not adjusting. below is my code snippet. please advice. I was of the opinion, that setWidth will adjust the portal columns



var newwidth = 1 / (App.theportal.items.length + 1);
for (var i = 0; i < App.theportal.items.length; i++) {
App.theportal.items.items[i].setWidth(newwidth);
}
App.theportal.doLayout();
var newcolumn= App.theportal.add(GetPortalColumnConfig());



GetPortalColumnConfig: function (defaultAnchor) {


if (!defaultAnchor) {
defaultAnchor = "-5";
}
var portalColumn =
{
defaultAnchor: defaultAnchor,
style: "position:relative;",
layout: "anchor",
maskDisabled: false,
cls: "x-column-padding",
items: []
}


return portalColumn;
}

Daniil
Oct 10, 2012, 5:07 PM
Hi @SymSure,

I think you should call "doLayout" after "add". Does it help?

SymSure
Oct 10, 2012, 6:16 PM
That did not help. still they same. I can only see like 2 inches of the newly added column and the portlet inserted inside it by the edge of the portal.

Daniil
Oct 11, 2012, 10:32 AM
Please provide a sample to reproduce and test with.

SymSure
Oct 11, 2012, 4:28 PM
The code below is the sample to reproduce the issue




<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ 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 id="Header" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" />
<script type="text/javascript">
function AddPortalColumn() {
var newwidth = 1 / (App.LogPortal.items.length + 1);
for (var i = 0; i < App.LogPortal.items.length; i++) {
App.LogPortal.items.items[i].setWidth(newwidth);
}
var portalcol = App.LogPortal.add(GetPortalColumnConfig());
App.LogPortal.doLayout();
portalcol.add({
title: "newly added portlet",
closable: true,
height:200
});


}


function GetPortalColumnConfig(defaultAnchor) {


if (!defaultAnchor) {
defaultAnchor = "-5";
}
var portalColumn =
{
defaultAnchor: defaultAnchor,
style: "position:relative;",
layout: "anchor",
maskDisabled: false,
cls: "x-column-padding",
items: []
}


return portalColumn;
}
</script>
</head>
<body>
<ext:ResourceManager runat="server">
</ext:ResourceManager>
<ext:Viewport runat="server" Layout="Fit" IDMode="Static">
<Items>
<ext:Panel runat="server" Layout="Fit">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add Column">
<Listeners>
<Click Handler="AddPortalColumn()">
</Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Portal ID="LogPortal" runat="server">
<Items>
<ext:PortalColumn ID="PortalColumn1" runat="server" Flex="1">
<Items>
<ext:Portlet ID="Portlet1" Title="Panel 3" runat="server" Height="200"/>
<ext:Portlet ID="Portlet2" Title="Another Panel 3" runat="server" Height="200" />
</Items>
</ext:PortalColumn>
<ext:PortalColumn ID="PortalColumn2" runat="server" Flex="1">
<Items>
<ext:Portlet ID="Portlet4" Title="Panel 3" runat="server" Height="200"/>
<ext:Portlet ID="Portlet5" Title="Another Panel 3" runat="server" Height="200" />
</Items>
</ext:PortalColumn>
</Items>
</ext:Portal>
</Items>
<Listeners>
<Render Handler="parent.Common.UnMask()"/>
</Listeners>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>

Daniil
Oct 11, 2012, 5:17 PM
Thank you, but, unfortunately, I am getting this JavaScript error when run the sample.

parent.Common is undefined

SymSure
Oct 11, 2012, 8:16 PM
Just take that line off. below is the new code



<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<%@ 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 id="Header" runat="server">
<title></title>
<meta content="NO-CACHE" http-equiv="CACHE-CONTROL" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" />
<script type="text/javascript">
function AddPortalColumn() {
var newwidth = 1 / (App.LogPortal.items.length + 1);
for (var i = 0; i < App.LogPortal.items.length; i++) {
App.LogPortal.items.items[i].setWidth(newwidth);
}
var portalcol = App.LogPortal.add(GetPortalColumnConfig());
App.LogPortal.doLayout();
portalcol.add({
title: "newly added portlet",
closable: true,
height:200
});


}


function GetPortalColumnConfig(defaultAnchor) {


if (!defaultAnchor) {
defaultAnchor = "-5";
}
var portalColumn =
{
defaultAnchor: defaultAnchor,
style: "position:relative;",
layout: "anchor",
maskDisabled: false,
cls: "x-column-padding",
items: []
}


return portalColumn;
}
</script>
</head>
<body>
<ext:ResourceManager runat="server">
</ext:ResourceManager>
<ext:Viewport runat="server" Layout="Fit" IDMode="Static">
<Items>
<ext:Panel runat="server" Layout="Fit">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Add Column">
<Listeners>
<Click Handler="AddPortalColumn()">
</Click>
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Items>
<ext:Portal ID="LogPortal" runat="server">
<Items>
<ext:PortalColumn ID="PortalColumn1" runat="server" Flex="1">
<Items>
<ext:Portlet ID="Portlet1" Title="Panel 3" runat="server" Height="200"/>
<ext:Portlet ID="Portlet2" Title="Another Panel 3" runat="server" Height="200" />
</Items>
</ext:PortalColumn>
<ext:PortalColumn ID="PortalColumn2" runat="server" Flex="1">
<Items>
<ext:Portlet ID="Portlet4" Title="Panel 3" runat="server" Height="200"/>
<ext:Portlet ID="Portlet5" Title="Another Panel 3" runat="server" Height="200" />
</Items>
</ext:PortalColumn>
</Items>
</ext:Portal>
</Items>
<Listeners>

</Listeners>
</ext:Panel>
</Items>
</ext:Viewport>
</body>
</html>

Daniil
Oct 12, 2012, 5:52 AM
Thank you. Please always simplify your samples and ensure they are runnable before posting.

Here is a working example.

Example

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

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

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script type="text/javascript">
var addColumn = function () {
var portal = App.Portal1;
newColumn = {
items: [{
title: "Portlet 5"
}, {
title: "Portlet 6"
}]
};

/* to reset previously calculated columnWidths for proper layouting */
portal.items.each(function (c) {
delete c.columnWidth;
});

portal.add(newColumn);
portal.doLayout();
};
</script>
</head>
<body>
<ext:ResourceManager runat="server" />

<ext:Button runat="server" Text="Add a column">
<Listeners>
<Click Fn="addColumn" />
</Listeners>
</ext:Button>

<ext:Portal
ID="Portal1"
runat="server"
Width="500"
Height="200">
<Items>
<ext:PortalColumn>
<Items>
<ext:Portlet Title="Portlet 1" />
<ext:Portlet Title="Portlet 2" />
</Items>
</ext:PortalColumn>

<ext:PortalColumn>
<Items>
<ext:Portlet Title="Portlet 3" />
<ext:Portlet Title="Portlet 4" />
</Items>
</ext:PortalColumn>
</Items>
</ext:Portal>
</body>
</html>

Please note that Portal uses ColumnLayout. So, it ignores Flex settings that you set.

SymSure
Oct 12, 2012, 2:32 PM
Thanks. its working