What's New?

[CLOSED] Split Action Event

Page 1 of 2 12 LastLast
  1. #1
    Nov 06, 2015, 8:46 AM

    [CLOSED] Split Action Event

    Hi ,

    Good Morning, Please let me know is there any event when split button pressed by the user.

    I need to call some other function when split button pressed. 

    <ext:Viewport ID="extViewPort1" runat="server" Layout="BorderLayout">
        <Items>
            <ext:Panel ID="HeaderPanel" runat="server" Region="North" Split="true" Collapsible="true"
                Header="false" CollapseMode="Mini" Layout="FitLayout" BodyPadding="6" />
            <ext:Panel runat="server" Region="West" Split="true" Collapsible="true" Layout="FitLayout"
                Header="false" CollapseMode="Mini">
            </ext:Panel>
            <ext:Panel runat="server" Region="Center" ID="CenterPanel" Header="false" CollapseMode="Mini">
            </ext:Panel>
            <ext:Panel runat="server" Region="East" Collapsible="true" Split="true" Layout="FitLayout"
                ID="EastPanel" Header="false" CollapseMode="Mini">
            </ext:Panel>
            <ext:Panel runat="server" Region="South" Split="true" Collapsible="true" BodyPadding="6"
                ID="FooterPanel" Header="false" CollapseMode="Mini" />
        </Items>
            </ext:Viewport>

    Thanks,
    Vamsi.
    Last edited by fabricio.murta; Dec 31, 2015 at 1:14 PM. Reason: [CLOSED]
  2. #2
    Nov 06, 2015, 2:30 PM
    Hi @Vamsi,

    I don't see such an API possibility, but I can suggest the following solution.

    Key points are:

    1. Ext.resizer.Splitter.override({ ... })

    2. SplitterConfig's CustomConfig

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

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script>
        Ext.resizer.Splitter.override({
            onRender: function () {
                this.callParent(arguments);

                if (this.onClick && this.collapseEl) {
                    this.mon(this.collapseEl, "click", this.onClick, this);
                }
            }
        });
    </script>

    <script>
        var myOnClick = function () {
            var cmp = this.getCollapseTarget();

            alert("myOnClick: " + cmp.id);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel 
                    ID="PanelNorth" 
                    runat="server" 
                    Region="North" 
                    Header="false" 
                    Collapsible="true"
                    CollapseMode="Mini" 
                    Height="100">
                    <SplitterConfig runat="server">
                        <CustomConfig>
                            <ext:ConfigItem Name="onClick" Value="myOnClick" Mode="Raw" />
                        </CustomConfig>
                    </SplitterConfig>
                </ext:Panel>

                <ext:Panel 
                    ID="PanelWest" 
                    runat="server" 
                    Region="West" 
                    Header="false" 
                    Collapsible="true"
                    CollapseMode="Mini"
                    Width="100">
                    <SplitterConfig runat="server">
                        <CustomConfig>
                            <ext:ConfigItem Name="onClick" Value="myOnClick" Mode="Raw" />
                        </CustomConfig>
                    </SplitterConfig>
                </ext:Panel>

                <ext:Panel 
                    runat="server" 
                    Region="Center" 
                    Header="false" />
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
  3. #3
    Dec 16, 2015, 8:19 AM
    Thanks for the update,

    Please let me know how we can above mentioned code at server side/code behind.

    Thanks,
    Vamsi.
  4. #4
    Dec 16, 2015, 6:54 PM
    There is no way to call Ext.resizer.Splitter.override({ ... }); on server side.

    As for the myOnClick function, you could call a DirectMethod.
  5. #5
    Dec 21, 2015, 6:07 AM
    Hi ,

    I have to create time panel along with custom config :

    I'm unable to fire the click event please let me know your suggestion below:


    
Ext.resizer.Splitter.override({
            onRender: function () {
                this.callParent(arguments);

                if (this.onClick && this.collapseEl) {
                    this.mon(this.collapseEl, "click", this.onClick, this);
                }
            }
        });

        var myOnClick = function () {
            var cmp = this.getCollapseTarget();

            alert("myOnClick: " + cmp.id);
        }; 

Panel pnl1= new Panel();
pnl1.Collapsible = true;
                                    pnl1.HideCollapseTool = true;
                                    pnl1.CollapseMode = CollapseMode.Mini;
                                    pnl1.Split = true;

                                    Ext.Net.ConfigItem ccc = new ConfigItem();
                                    ccc.Value = "myOnClick";
                                    ccc.Name = "onClick";
                                    ccc.Mode = ParameterMode.Raw;
                                    BoxSplitter ee = new BoxSplitter();
                                    ee.Collapsible = true;
                                    ee.CustomConfig.Add(ccc);
                                    pnl1.SplitterConfig = ee;
    Thanks,
    Vamsi.
  6. #6
    Dec 21, 2015, 11:42 AM
    I am not sure what is going on. Could you, please, provide a full test case to reproduce the problem?
  7. #7
    Dec 22, 2015, 4:54 AM
    Hi ,

    Please find the below code as static and same I'm expecting in code behind or at runtime.
    <%@ Page Language="C#" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script>
        Ext.resizer.Splitter.override({
            onRender: function () {
                this.callParent(arguments);

                if (this.onClick && this.collapseEl) {
                    this.mon(this.collapseEl, "click", this.onClick, this);
                }
            }
        });
    </script>

    <script>
        var myOnClick = function () {
            var cmp = this.getCollapseTarget();

            alert("myOnClick: " + cmp.id);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Viewport runat="server" Layout="BorderLayout">
            <Items>
                <ext:Panel 
                    ID="PanelNorth" 
                    runat="server" 
                    Region="North" 
                    Header="false" 
                    Collapsible="true"
                    CollapseMode="Mini" 
                    Height="100">
                    <SplitterConfig runat="server">
                        <CustomConfig>
                            <ext:ConfigItem Name="onClick" Value="myOnClick" Mode="Raw" />
                        </CustomConfig>
                    </SplitterConfig>
                </ext:Panel>

                <ext:Panel 
                    ID="PanelWest" 
                    runat="server" 
                    Region="West" 
                    Header="false" 
                    Collapsible="true"
                    CollapseMode="Mini"
                    Width="100">
                    <SplitterConfig runat="server">
                        <CustomConfig>
                            <ext:ConfigItem Name="onClick" Value="myOnClick" Mode="Raw" />
                        </CustomConfig>
                    </SplitterConfig>
                </ext:Panel>

                <ext:Panel 
                    runat="server" 
                    Region="Center" 
                    Header="false" />
            </Items>
        </ext:Viewport>
    </form>
</body>
</html>
    Now I'm Looking the same in codebehind instead of aspx page like below : 

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

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script>
        Ext.resizer.Splitter.override({
            onRender: function () {
                this.callParent(arguments);

                if (this.onClick && this.collapseEl) {
                    this.mon(this.collapseEl, "click", this.onClick, this);
                }
            }
        });
    </script>

    <script>
        var myOnClick = function () {
            var cmp = this.getCollapseTarget();

            alert("myOnClick: " + cmp.id);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Viewport  ID="Viewport1" runat="server" Layout="BorderLayout">
                    </ext:Viewport>
    </form>
</body>
</html>
    Below is page_Load :
    Panel pnl1= new Panel();
pnl1.Collapsible = true;
                                    pnl1.HideCollapseTool = true;
                                    pnl1.CollapseMode = CollapseMode.Mini;
                                    pnl1.Split = true;

                                    Ext.Net.ConfigItem ccc = new ConfigItem();
                                    ccc.Value = "myOnClick";
                                    ccc.Name = "onClick";
                                    ccc.Mode = ParameterMode.Raw;
                                    BoxSplitter ee = new BoxSplitter();
                                    ee.Collapsible = true;
                                    ee.CustomConfig.Add(ccc);
                                    pnl1.SplitterConfig = ee;

Viewport1.Items.Add(pnl1);
    I'm unable to fire the click event please let me know your suggestion on the same:


    Thanks,
    Vamsi
    Last edited by Daniil; Dec 22, 2015 at 8:04 AM.
  8. #8
    Dec 22, 2015, 8:10 AM
    Below is page_Load :
    Please post the full code of Page_Load adding it directly to .aspx page wrapping in:
    <script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        /// Your code
    }
</script>
    So, a full sample will be looking as follows:
    <%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        /// your code
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script>
        Ext.resizer.Splitter.override({
            onRender: function () {
                this.callParent(arguments);

                if (this.onClick && this.collapseEl) {
                    this.mon(this.collapseEl, "click", this.onClick, this);
                }
            }
        });
    </script>

    <script>
        var myOnClick = function () {
            var cmp = this.getCollapseTarget();

            alert("myOnClick: " + cmp.id);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" />
    </form>
</body>
</html>
  9. #9
    Dec 22, 2015, 9:24 AM 
    <%@ Page Language="C#" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Panel pnl1= new Panel();
pnl1.Collapsible = true;
                                    pnl1.HideCollapseTool = true;
                                    pnl1.CollapseMode = CollapseMode.Mini;
                                    pnl1.Split = true;

                                    Ext.Net.ConfigItem ccc = new ConfigItem();
                                    ccc.Value = "myOnClick";
                                    ccc.Name = "onClick";
                                    ccc.Mode = ParameterMode.Raw;
                                    BoxSplitter ee = new BoxSplitter();
                                    ee.Collapsible = true;
                                    ee.CustomConfig.Add(ccc);
                                    pnl1.SplitterConfig = ee;

Viewport1.Items.Add(pnl1);
    }
</script>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET v3 Example</title>

    <script>
        Ext.resizer.Splitter.override({
            onRender: function () {
                this.callParent(arguments);

                if (this.onClick && this.collapseEl) {
                    this.mon(this.collapseEl, "click", this.onClick, this);
                }
            }
        });
    </script>

    <script>
        var myOnClick = function () {
            var cmp = this.getCollapseTarget();

            alert("myOnClick: " + cmp.id);
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />

        <ext:Viewport ID="Viewport1" runat="server" Layout="BorderLayout" />
    </form>
</body>
</html>
  10. #10
    Dec 22, 2015, 9:57 AM
    Please clarify does the sample render anything to the browser?

    Running it I don't see anything on the screen.

    I think you should apply a Region for the Panel.

    Also a BorderLayout requires a Center Region to be defined.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] Split bar questions
    By vadym.f in forum 3.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 15, 2015, 6:11 PM
  2. button click event action is adding extra controller to url
    By fporrata in forum 2.x Help
    Replies: 0
    Last Post: Oct 24, 2013, 2:53 PM
  3. [CLOSED] RowExpander Split
    By alanflores in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Aug 07, 2013, 12:16 AM
  4. [CLOSED] ColumnLayout w/Split
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Jan 25, 2010, 12:49 PM
  5. [CLOSED] [1.0] BorderLayout Split
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jan 04, 2010, 8:08 AM

Posting Permissions