What's New?

[CLOSED] Hide show Split bar

  1. #1
    Aug 08, 2013, 8:41 PM

    [CLOSED] Hide show Split bar

    How to Hide and show split bar of a region in viewport?

    I have one viewport,in that i have west panel,center panel and east panel regions
    Now on one button click i want to hide and collapse the west panel region,it does happens but after the west panel is hidden and collapsed,i still see the split bar which i don't want it to be visible after the panel is collapsed and hidden.The split bar should only be visible only after the panel is again showed,expanded

    I tried the following code but it din't turned up

    westpanel.collapse();
westpanel.hide();
Viewport1.layout.west.getSplitBar().el.hide();
Viewport1.layout.west.getCollapsedEl().hide();
    Please help me

    Thanks
    Last edited by Baidaly; Aug 09, 2013 at 6:47 PM. Reason: [CLOSED]
  2. #2
    Aug 09, 2013, 2:29 AM
    Hello!

    Please, try the following:

    <ext:Panel 
    ID="SouthPanel"
    runat="server"
    Title="South"
    Region="South"
    Split="true"
    Collapsible="true"
    Height="150"
    BodyPadding="6"
    Html="South"
    >
    <Listeners>
        <Collapse Handler="Ext.get(this.id + '-xcollapsed').hide();" Delay="10"></Collapse>
    </Listeners>
</ext:Panel>
  3. #3
    Aug 09, 2013, 5:17 PM
    Quote Originally Posted by Baidaly View Post
    Hello!

    Please, try the following:

    <ext:Panel 
    ID="SouthPanel"
    runat="server"
    Title="South"
    Region="South"
    Split="true"
    Collapsible="true"
    Height="150"
    BodyPadding="6"
    Html="South"
    >
    <Listeners>
        <Collapse Handler="Ext.get(this.id + '-xcollapsed').hide();" Delay="10"></Collapse>
    </Listeners>
</ext:Panel>
    Hi Baidaly thanks for the solution,Your solution did worked but i want the split bar to be hidden and shown on button click as i have mentioned in my above question,Because here what will happen is that if i manually collapse with panel then the split bar will get hidden but what if i want to show it back again then?That's why i mentioned above in my question that i want on a button click

    Please provide me solution on a button click to hide and show split bar
  4. #4
    Aug 09, 2013, 5:55 PM
    Look at this sample:

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

<%@ Register assembly="Ext.Net" namespace="Ext.Net" tagprefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET Examples</title>
</head>
<body>
    <ext:ResourceManager runat="server" SourceFormatting="True" />
    
    <ext:Viewport runat="server" Layout="BorderLayout" ID="Viewport1">
        <Items>
            <ext:Panel 
                runat="server"
                Title="North" 
                Region="North"
                Split="true"
                Height="150"
                BodyPadding="6"
                Html="North"
                Collapsible="true"
                />
            <ext:Panel 
                runat="server" 
                Title="West" 
                Region="West"
                Layout="AccordionLayout"
                Width="225" 
                MinWidth="225" 
                MaxWidth="400" 
                Split="true" 
                Collapsible="true">
                <Items>
                    <ext:Panel 
                        runat="server" 
                        Title="Navigation" 
                        Border="false" 
                        BodyPadding="6"
                        Icon="FolderGo"
                        Html="West"
                        />
                    <ext:Panel 
                        runat="server" 
                        Title="Settings" 
                        Border="false" 
                        BodyPadding="6"
                        Icon="FolderWrench"
                        Html="Some settings in here"
                        />
                </Items>
            </ext:Panel>
            <ext:Panel runat="server" Region="Center">
                <Items>
                    <ext:Button runat="server" Text="Hide Split bar for South Panel">
                        <Listeners>
                            <Click Handler="
                            if (!SouthPanel.collapsed) {
                                SouthPanel.tools.toggle.hide();
                                Ext.get('SouthPanel' + '-xsplit').hide();
                            } else {
                                Ext.get('SouthPanel' + '-xcollapsed').hide();
                            }
                            "></Click>
                        </Listeners>
                    </ext:Button>
                    <ext:Button runat="server" Text="Show Split bar for South Panel">
                        <Listeners>
                            <Click Handler="
                            if (!SouthPanel.collapsed) {
                                SouthPanel.tools.toggle.show();
                                Ext.get('SouthPanel' + '-xsplit').show();
                            } else {
                                Ext.get('SouthPanel' + '-xcollapsed').show();
                            }
                            "></Click>
                        </Listeners>
                    </ext:Button>
                </Items>
            </ext:Panel>
            <ext:Panel 
                runat="server" 
                Title="East" 
                Region="East"
                Collapsible="true" 
                Split="true" 
                MinWidth="225"
                Width="225" 
                Layout="Fit">
                <Items>
                    
                </Items>
            </ext:Panel>
            <ext:Panel 
                ID="SouthPanel"
                runat="server"
                Title="South"
                Region="South"
                Split="true"
                Collapsible="true"
                Height="150"
                BodyPadding="6"
                Html="South">
            </ext:Panel>
        </Items>
    </ext:Viewport>
</body>
</html>
  5. #5
    Aug 09, 2013, 6:32 PM
    I did the same thing but in different manner.Sorry i did not update you.
    You can mark this thread as solved

Similar Threads

  1. Show/Hide fieldset
    By JosefTrbusek in forum 2.x Help
    Replies: 2
    Last Post: Aug 03, 2012, 7:04 AM
  2. How to Hide & Show a CommandColumn in a Grid ??
    By RonaldR in forum 1.x Help
    Replies: 1
    Last Post: Dec 28, 2011, 6:36 PM
  3. [CLOSED] [1.0] Window show / hide from JS
    By Patrick in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 25, 2010, 10:44 AM
  4. Show/Hide tabs
    By stone216 in forum 1.x Help
    Replies: 2
    Last Post: Oct 01, 2009, 8:21 PM
  5. How to hide/show ImageButton in JavaScript?
    By dbassett74 in forum 1.x Help
    Replies: 2
    Last Post: Jun 16, 2009, 3:47 PM

Posting Permissions