[CLOSED] Up Down Splitter

**legaldiscovery** · Nov 10, 2011, 4:15 PM

Hello, We arr trying to create splitter such that it be moved UP or Down. Right now we can display only one options i.e UP. Can we make it such that we can also move this to down.

Click image for larger version.

Name: Splitter.png
Views: 123
Size: 11.3 KB
ID: 3432

**Daniil** · Nov 10, 2011, 7:24 PM

Hi,

I totally don't know how you implemented an UP splitter, so, I can't suggest anything.

I'm not sure why it's a problem for you to implement a DOWN splitter if you have already implemented an UP one.

Though I would highly recommend to use a ready solution - BorderLayout.

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" 
            Width="400" 
            Height="400" 
            Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" Region="Center" />
                <ext:Panel 
                    runat="server" 
                    Region="South" 
                    Height="200" 
                    Split="true" />
            </Items>
        </ext:Panel>
    </form>
</body>
</html>

**amitpareek** · Nov 10, 2011, 8:04 PM

Hi Daniil,
I think he meant to have both Up And Down one above other on same splitter bar. Not a different panel. Like a UpDown arrow.

**legaldiscovery** · Nov 11, 2011, 8:31 AM

Originally Posted by amitpareek

Hi Daniil,
I think he meant to have both Up And Down one above other on same splitter bar. Not a different panel. Like a UpDown arrow.

we want both in same panel

**legaldiscovery** · Nov 11, 2011, 8:55 AM

Originally Posted by legaldiscovery

we want both in same panel

Refer following Image

Click image for larger version.

Name: Splitter[1].png
Views: 101
Size: 13.4 KB
ID: 3434

**Daniil** · Nov 11, 2011, 1:42 PM

Well, a BorderLayout splitting allow to split in both directions.

As far as I can understand you need these icons to allow a user easily understand there is splitting.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="Ext.Net.Utilities" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            string miniBottomUrl = this.ResourceManager1.GetWebResourceUrl(ResourceManager.ASSEMBLYSLUG + ".extjs.resources.images.default.layout.mini-bottom.gif"),
                   miniTopUrl = this.ResourceManager1.GetWebResourceUrl(ResourceManager.ASSEMBLYSLUG + ".extjs.resources.images.default.layout.mini-top.gif");
            this.MiniBottomUrl.Value = miniBottomUrl;
            this.MiniTopUrl.Value = miniTopUrl;
        }
    }
</script>

<!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>

    <script type="text/javascript">
        var onReady = function () {
            var tpl = ".{0} \{ background-image: url('{1}');\}";
            Ext.net.ResourceMgr.registerCssClass("mini-bottom", String.format(tpl, "mini-bottom", MiniBottomUrl.getValue()));
            Ext.net.ResourceMgr.registerCssClass("mini-top", String.format(tpl, "mini-top", MiniTopUrl.getValue()));
            
        };

        var applyIcons = function (region) {
            var splitEl = region.splitEl,
                bottom = splitEl.createChild({
                    cls  : "my-split mini-bottom", 
                    html : "&#160;"
                }),
                top = splitEl.createChild({
                    cls  : "my-split mini-top", 
                    html : "&#160;"
                });

            splitEl.addClassOnOver("my-split-over");
        };
    </script>

    <style type="text/css">
        .my-split {
            width: 35px;
            height: 5px;
            position: absolute;
            top: 0px;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        
        .mini-bottom {
            left: 42%;
        }
        
        .mini-top {
            left: 52%;
        }
        
        .my-split-over .mini-bottom, .my-split-over .mini-top {
            opacity: 1;
            -moz-opacity: 1;
            filter: none;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
            <Listeners>
                <DocumentReady Handler="onReady();" />
            </Listeners>
        </ext:ResourceManager>
        <ext:Hidden ID="MiniBottomUrl" runat="server" />
        <ext:Hidden ID="MiniTopUrl" runat="server" />
        <ext:Panel
            runat="server"
            Width="400"
            Height="400"
            Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" Region="Center" />
                <ext:Panel
                    runat="server"
                    Region="South"
                    Height="200"
                    Split="true" />
            </Items>
            <Listeners>
                <AfterLayout 
                    Handler="applyIcons(this.layout.south);" 
                    Single="true" />
            </Listeners>   
        </ext:Panel>
    </form>
</body>
</html>

**legaldiscovery** · Nov 12, 2011, 3:55 AM

Originally Posted by Daniil

Well, a BorderLayout splitting allow to split in both directions.

As far as I can understand you need these icons to allow a user easily understand there is splitting.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Import Namespace="Ext.Net.Utilities" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            string miniBottomUrl = this.ResourceManager1.GetWebResourceUrl(ResourceManager.ASSEMBLYSLUG + ".extjs.resources.images.default.layout.mini-bottom.gif"),
                   miniTopUrl = this.ResourceManager1.GetWebResourceUrl(ResourceManager.ASSEMBLYSLUG + ".extjs.resources.images.default.layout.mini-top.gif");
            this.MiniBottomUrl.Value = miniBottomUrl;
            this.MiniTopUrl.Value = miniTopUrl;
        }
    }
</script>

<!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>

    <script type="text/javascript">
        var onReady = function () {
            var tpl = ".{0} \{ background-image: url('{1}');\}";
            Ext.net.ResourceMgr.registerCssClass("mini-bottom", String.format(tpl, "mini-bottom", MiniBottomUrl.getValue()));
            Ext.net.ResourceMgr.registerCssClass("mini-top", String.format(tpl, "mini-top", MiniTopUrl.getValue()));
            
        };

        var applyIcons = function (region) {
            var splitEl = region.splitEl,
                bottom = splitEl.createChild({
                    cls  : "my-split mini-bottom", 
                    html : "*"
                }),
                top = splitEl.createChild({
                    cls  : "my-split mini-top", 
                    html : "*"
                });

            splitEl.addClassOnOver("my-split-over");
        };
    </script>

    <style type="text/css">
        .my-split {
            width: 35px;
            height: 5px;
            position: absolute;
            top: 0px;
            opacity: 0.5;
            filter: alpha(opacity=50);
        }
        
        .mini-bottom {
            left: 42%;
        }
        
        .mini-top {
            left: 52%;
        }
        
        .my-split-over .mini-bottom, .my-split-over .mini-top {
            opacity: 1;
            -moz-opacity: 1;
            filter: none;
        }
    </style>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server">
            <Listeners>
                <DocumentReady Handler="onReady();" />
            </Listeners>
        </ext:ResourceManager>
        <ext:Hidden ID="MiniBottomUrl" runat="server" />
        <ext:Hidden ID="MiniTopUrl" runat="server" />
        <ext:Panel
            runat="server"
            Width="400"
            Height="400"
            Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" Region="Center" />
                <ext:Panel
                    runat="server"
                    Region="South"
                    Height="200"
                    Split="true" />
            </Items>
            <Listeners>
                <AfterLayout 
                    Handler="applyIcons(this.layout.south);" 
                    Single="true" />
            </Listeners>   
        </ext:Panel>
    </form>
</body>
</html>

i have check above example and run also and i see that both up and down icons are their
but when i try to click on them for Up or down splitter then its not work
Refer below link, I want something like this

http://demos.telerik.com/aspnet-ajax...defaultcs.aspx

http://demos.telerik.com/aspnet-ajax...defaultcs.aspx

**Daniil** · Nov 14, 2011, 5:28 AM

Then you just need to set up CollapseMode="Mini" for a BorderLayout Region.

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"
            Width="400"
            Height="400"
            Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" Region="Center" />
                <ext:Panel
                    runat="server"
                    Region="South"
                    Height="200"
                    Split="true"
                    CollapseMode="Mini" />
            </Items>
        </ext:Panel>
    </form>
</body>
</html>

**legaldiscovery** · Nov 14, 2011, 10:22 AM

Originally Posted by Daniil

Then you just need to set up CollapseMode="Mini" for a BorderLayout Region.

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"
            Width="400"
            Height="400"
            Layout="BorderLayout">
            <Items>
                <ext:Panel runat="server" Region="Center" />
                <ext:Panel
                    runat="server"
                    Region="South"
                    Height="200"
                    Split="true"
                    CollapseMode="Mini" />
            </Items>
        </ext:Panel>
    </form>
</body>
</html>

We need two button in splitter, One for Collapse panel 1 and second for Collapse panel 2
In above code sample , we only get one button in splitter bar which collapse only panel 2
Presently we already use above code but we want two button in splitter (up and down)
Up for collapse upper panel
Down for collapse lower panel

**legaldiscovery** · Nov 14, 2011, 10:27 AM

Originally Posted by legaldiscovery

We need two button in splitter, One for Collapse panel 1 and second for Collapse panel 2
In above code sample , we only get one button in splitter bar which collapse only panel 2
Presently we already use above code but we want two button in splitter (up and down)
Up for collapse upper panel
Down for collapse lower panel

Please refer following link
http://demos.telerik.com/aspnet-ajax...defaultcs.aspx

In this link check middle panel splitter, it has two button in same splitter one for left and second for right
so when i click on left button then it collapse left panel
same for Right button

Thread: [CLOSED] Up Down Splitter

Thread Tools

Search Thread

Display

[CLOSED] Up Down Splitter

Yes daniil is right

Example Image

Thanx for quick reply but we want upand down click functionality also

Feture Request

Similar Threads

[CLOSED] RowLayout with Splitter inside BorderLayout

[CLOSED] ColumnLayoutConfig splitter moving issue

[CLOSED] Splitter In Column Layout IE7 Issue

[CLOSED] Splitter Bar Height Problem with ColumnLayout

RowLayout Splitter Issue

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Up Down Splitter

[CLOSED] Up Down Splitter

Yes daniil is right

Example Image

Thanx for quick reply but we want upand down click functionality also

Feture Request

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us