PDA

View Full Version : [CLOSED] creating a portal with splitbar in ext.net 2.0



SymSure
Jul 24, 2012, 6:56 PM
Hi How do you add a splitbar in Ext.net 2.0 portal. In V1 the code below renders a portlet with a splitbar but V2 does not have ColumnLayoutConfig as the layout option



<ext:Portal
runat="server"
Height="400"
Width="400"
Layout="ColumnLayout"
AutoScroll="true"
Cls="my-portal"
BodyCssClass="no-horizontal-scroll">
<LayoutConfig>
<ext:ColumnLayoutConfig FitHeight="false" Split="true" />
</LayoutConfig>
<Items>
<ext:PortalColumn
runat="server"
ColumnWidth=".5"
Layout="AnchorLayout"
DefaultAnchor="-20">
<Items>
<ext:Portlet runat="server" Html="Some content" Height="200" />
<ext:Portlet runat="server" Html="Some content" Height="200" />
<ext:Portlet runat="server" Html="Some content" Height="200" />
</Items>
</ext:PortalColumn>
<ext:PortalColumn
runat="server"
ColumnWidth=".5"
Layout="AnchorLayout"
DefaultAnchor="-20">
<Items>
<ext:Portlet runat="server" Html="Some content" Height="200" />
<ext:Portlet runat="server" Html="Some content" Height="200" />
<ext:Portlet runat="server" Html="Some content" Height="200" />
</Items>
</ext:PortalColumn>
</Items>
</ext:Portal>

Daniil
Jul 25, 2012, 12:31 AM
Hi,

Portal internally uses ColumnLayout and, unfortunately, it doesn't support splitting anymore.

I would try to override the Portal using HBoxLayout which does support splitting.

Though I can't estimate how difficult it might be. At least, I can't see a solution better for now.

Please investigate the Portal sources.

<Ext.NET sources root>\Ext.Net\Build\Ext.Net\ux\portal\portal.js

I would start with this 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">
Ext.app.PortalPanel.override({
initComponent : function () {
var me = this;

// Implement a Container beforeLayout call from the layout to this Container
this.layout = {
type : 'hbox',
align : 'stretch'
};

Ext.app.PortalPanel.superclass.initComponent.call( this);

this.addEvents({
validatedrop : true,
beforedragover : true,
dragover : true,
beforedrop : true,
drop : true
});
this.on('drop', this.doLayout, this);
}
});
</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Portal
ID="Portal1"
runat="server"
Height="400"
Width="400">
<Items>
<ext:PortalColumn runat="server" Flex="1">
<Items>
<ext:Portlet runat="server" Title="Portlet 1" />
<ext:Portlet runat="server" Title="Portlet 2" />
</Items>
</ext:PortalColumn>
<ext:BoxSplitter runat="server" StyleSpec="background-color: green;" />
<ext:PortalColumn runat="server" Flex="1">
<Items>
<ext:Portlet runat="server" Title="Portlet 3" />
<ext:Portlet runat="server" Title="Portlet 4" />
</Items>
</ext:PortalColumn>
</Items>
</ext:Portal>
</body>
</html>


Sure, needs more override to get it all working. Currently, for example, a JS error occurs on dragging. Though not always.

Hope this helps.

Here is the related thread on Sencha.

SymSure
Jul 25, 2012, 1:05 PM
When I tried your code. I get the following error

"Unknown server tag 'ext:BoxSplitter'."

Daniil
Jul 25, 2012, 1:49 PM
Please clarify what Ext.NET sources do you use?

Please use RC2 or update from SVN.

SymSure
Jul 25, 2012, 4:10 PM
Ok. I got the latest release and it shows the splitter now. Can your team implement this feature into Ext.net. I believe it is a good feature to have I don't know why it was removed.

Please let me know if this is something that would be done in a later release of V2. Instead of me poking around and making some changes that could cause other things to break, your team have the faculty to perform a proper testing of any workaround that does not throw JS errors.

Regards

Daniil
Jul 31, 2012, 12:21 PM
We can consider it as a feature request to review in future.

Though, unfortunately, I am not sure it will be implemented and can't provide you with any time frame.

Daniil
Feb 11, 2013, 11:44 AM
Here is a related post.
http://forums.ext.net/showthread.php?20338&p=100765&viewfull=1#post100765