What's New?

[CLOSED] Problem with TabStrib BeforetabChange event

  1. #1
    Jan 24, 2013, 4:36 PM

    [CLOSED] Problem with TabStrib BeforetabChange event

    Hi guys,

    I have a tabStrib which contains two tabs. I want to make a control on tab change i.e if I modified data on a tab I want to show messageBox if he wants to save data or not. If yes I call an direct method to do the save, if no i do nothing and then tabchange happen. My problem is that I allways return false in my js BeforeTabChange method and I dont know how to recall it after messageBox.

    Examples of my code
    aspx
                                <ext:TabStrip ID="TabStripAdmin" runat="server">
                                <Items>
                                    <ext:Tab Text="<%$ Resources:Administration, UserRightGroups %>" ActionItemID="PanelGroupRightAdmin" />
                                    <ext:Tab Text="<%$ Resources:Administration, Users %>" ActionItemID="PanelUserAdmin" />
                                </Items>
                                <Listeners>                                    
                                    <BeforeTabChange Fn="BeForeTabChange" />
                                </Listeners>
                            </ext:TabStrip>
    js
    var BeForeTabChange = function (item, newTab, currentTab) {
        App.direct.OnConfirmGroupTabChange();      
        return false;
 }
    cs
            [DirectMethod]
        public void OnConfirmGroupTabChange()
        {
            X.Msg.Confirm(Resources.Administration.Warning, Resources.Administration.TabChangeConfirmation, new JFunction { Fn =          "ConfirmGroupTabChange" }).Show();
        }
    js
    var ConfirmGroupTabChange = function (response) {
          if (response == 'yes') {
             App.direct.SaveMethod();                 
             // here I want to switch to PanelUserAdmin (how can I do ???). I tried this but it doesn't work
             App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin'));

        }
        else {
              // here I want to switch to PanelUserAdmin (how can I do ???). I tried this but it doesn't work
             App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin'));
        }
}
    Thank you in advance.
    Last edited by Daniil; Jan 25, 2013 at 12:12 PM. Reason: [CLOSED]
  2. #2
    Jan 24, 2013, 8:44 PM
    Hello!

    Try the following sample:

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    [DirectMethod]
    public void OnConfirmGroupTabChange()
    {
        X.Msg.Confirm("Warning", "TabChangeConfirmation", new JFunction { Fn = "ConfirmGroupTabChange" }).Show();
    }
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Examples</title>
    <script>
        var BeForeTabChange = function (item, newTab, currentTab) {
            App.direct.OnConfirmGroupTabChange();
            return false;
        };

        var ConfirmGroupTabChange = function (response) {
            App.TabStripAdmin.suspendEvents();
            if (response == 'yes') {
                App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin'));
            }
            else {
                App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin'));
            }
            App.TabStripAdmin.resumeEvents();
        };
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:TabStrip ID="TabStripAdmin" runat="server">
        <Items>
            <ext:Tab Text="UserRightGroups" TabID="PanelGroupRightAdmin" />
            <ext:Tab Text="Users" TabID="PanelUserAdmin" />
        </Items>
        <Listeners>
            <BeforeTabChange Fn="BeForeTabChange" />
        </Listeners>
    </ext:TabStrip>
    </form>
</body>
</html>
  3. #3
    Jan 25, 2013, 7:55 AM
    Hi, I tried your suggestion but it still doesn't work. I can't active other tab.

    Quote Originally Posted by Baidaly View Post
    Hello!
    Try the following sample:

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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    [DirectMethod]
    public void OnConfirmGroupTabChange()
    {
        X.Msg.Confirm("Warning", "TabChangeConfirmation", new JFunction { Fn = "ConfirmGroupTabChange" }).Show();
    }
</script>
<!DOCTYPE html>
<html>
<head runat="server">
    <title>Ext.NET Examples</title>
    <script>
        var BeForeTabChange = function (item, newTab, currentTab) {
            App.direct.OnConfirmGroupTabChange();
            return false;
        };

        var ConfirmGroupTabChange = function (response) {
            App.TabStripAdmin.suspendEvents();
            if (response == 'yes') {
                App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin'));
            }
            else {
                App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin'));
            }
            App.TabStripAdmin.resumeEvents();
        };
    </script>
</head>
<body>
    <form runat="server">
    <ext:ResourceManager runat="server" />
    <ext:TabStrip ID="TabStripAdmin" runat="server">
        <Items>
            <ext:Tab Text="UserRightGroups" TabID="PanelGroupRightAdmin" />
            <ext:Tab Text="Users" TabID="PanelUserAdmin" />
        </Items>
        <Listeners>
            <BeforeTabChange Fn="BeForeTabChange" />
        </Listeners>
    </ext:TabStrip>
    </form>
</body>
</html>
  4. #4
    Jan 25, 2013, 8:04 AM
    Quote Originally Posted by Tactem View Post
    Hi, I tried your suggestion but it still doesn't work. I can't active other tab.
    What do you mean? If you mean that you can set active only second tab it's correct, because you have to change name of panels in the following piece of code:

    if (response == 'yes') {
	App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin')); // <- Change 
}
else {
	App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin')); // <- Change 
}
    I didn't do this because I didn't know you scenario
  5. #5
    Jan 25, 2013, 8:29 AM
    My scenario is when I launch my appli, PanelGroupRightAdmin tab is activated and I want to change the tab from PanelGroupRightAdmin to PanelUserAdmin

                                <ext:TabStrip ID="TabStripAdmin" runat="server">
                                <Items>
                                    <ext:Tab Text="<%$ Resources:Administration, UserRightGroups %>" ActionItemID="PanelGroupRightAdmin" />
                                    <ext:Tab Text="<%$ Resources:Administration, Users %>" ActionItemID="PanelUserAdmin" />
                                </Items>
                                <Listeners>                                    
                                    <BeforeTabChange Fn="BeForeTabChange" />
                                </Listeners>
                            </ext:TabStrip>
    And when I choose yes or no, the tab doesn't change.

    if (response == 'yes') {
	App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin')); // <- Change 
}
else {
	App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin')); // <- Change 
}
    It seems like App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUs erAdmin')) does nothing.

    Quote Originally Posted by Baidaly View Post
    What do you mean? If you mean that you can set active only second tab it's correct, because you have to change name of panels in the following piece of code:

    if (response == 'yes') {
	App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin')); // <- Change 
}
else {
	App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUserAdmin')); // <- Change 
}
    I didn't do this because I didn't know you scenario
    Last edited by Tactem; Jan 25, 2013 at 8:32 AM.
  6. #6
    Jan 25, 2013, 8:38 AM
    I just want to change a tabstrip from tab a to tab b with a messageBox control. If messageBox (Do you want to save tab a before exit ?) == yes, I save tab a before activate tab b.
    Last edited by Tactem; Jan 25, 2013 at 9:27 AM.
  7. #7
    Jan 25, 2013, 11:02 AM
    Hello,

    The setActiveTab method "does nothing", because you return false from the BeforeTabChange listener:)

    Needs to lock this listener.

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

<script runat="server">
    [DirectMethod]
    public void Confirm()
    {
        X.Msg.Confirm("Save?", "Save?", "onConfirm").Show();
    }

    [DirectMethod]
    public void Save()
    {
        X.Msg.Alert("Saved", "Saved").Show();
    }
</script>

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

    <script>
        var onBeforeTabChange = function (tabStrip, newTab, currentTab) {
            if (!tabStrip.locked) {
                tabStrip.tabToactive = newTab;

                if (true) { // if the currentTab has been changed
                    App.direct.Confirm();
                }

                return false;
            }
        };
 
        var onConfirm = function (btnId) {
            var tabStrip = App.TabStrip1;

            if (btnId === "yes") {
                App.direct.Save();
            } else {
                tabStrip.locked = true;
                tabStrip.setActiveTab(tabStrip.tabToactive);
                tabStrip.locked = false;
            }

            delete tabStrip.tabToactive;
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:TabStrip ID="TabStrip1" runat="server">
        <Items>
            <ext:Tab Text="Tab 1" TabID="Tab1" />
            <ext:Tab Text="Tab 2" TabID="Tab2" />
        </Items>
        <Listeners>
            <BeforeTabChange Fn="onBeforeTabChange" />
        </Listeners>
    </ext:TabStrip>
</body>
</html>
  8. #8
    Jan 25, 2013, 12:08 PM
    It works great. Thank you guys, I apreciated.

    Quote Originally Posted by Daniil View Post
    Hello,

    The setActiveTab method "does nothing", because you return false from the BeforeTabChange listener:)

    Needs to lock this listener.

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

<script runat="server">
    [DirectMethod]
    public void Confirm()
    {
        X.Msg.Confirm("Save?", "Save?", "onConfirm").Show();
    }

    [DirectMethod]
    public void Save()
    {
        X.Msg.Alert("Saved", "Saved").Show();
    }
</script>

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

    <script>
        var onBeforeTabChange = function (tabStrip, newTab, currentTab) {
            if (!tabStrip.locked) {
                tabStrip.tabToactive = newTab;

                if (true) { // if the currentTab has been changed
                    App.direct.Confirm();
                }

                return false;
            }
        };
 
        var onConfirm = function (btnId) {
            var tabStrip = App.TabStrip1;

            if (btnId === "yes") {
                App.direct.Save();
            } else {
                tabStrip.locked = true;
                tabStrip.setActiveTab(tabStrip.tabToactive);
                tabStrip.locked = false;
            }

            delete tabStrip.tabToactive;
        };
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" />

    <ext:TabStrip ID="TabStrip1" runat="server">
        <Items>
            <ext:Tab Text="Tab 1" TabID="Tab1" />
            <ext:Tab Text="Tab 2" TabID="Tab2" />
        </Items>
        <Listeners>
            <BeforeTabChange Fn="onBeforeTabChange" />
        </Listeners>
    </ext:TabStrip>
</body>
</html>

Similar Threads

  1. How to user Beforetabchange event for tabpanel?
    By masudcseku in forum 1.x Help
    Replies: 0
    Last Post: Oct 25, 2010, 11:12 PM
  2. Event Mask Problem
    By Ganesh3.shirsath in forum 1.x Help
    Replies: 0
    Last Post: Oct 20, 2010, 2:14 PM
  3. Event Mask Problem
    By Ganesh3.shirsath in forum 1.x Help
    Replies: 2
    Last Post: Oct 19, 2010, 10:52 PM
  4. BeforeTabChange event
    By wzietek in forum 1.x Help
    Replies: 1
    Last Post: Aug 27, 2009, 6:15 AM
  5. ajax event problem
    By snoutoz in forum 1.x Help
    Replies: 10
    Last Post: Mar 04, 2009, 6:08 PM

Posting Permissions