PDA

View Full Version : [CLOSED] Problem with TabStrib BeforetabChange event



Tactem
Jan 24, 2013, 5:36 PM
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('PanelUs erAdmin'));

}
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('PanelUs erAdmin'));
}
}


Thank you in advance.

Baidaly
Jan 24, 2013, 9: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('PanelUs erAdmin'));
}
else {
App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUs erAdmin'));
}
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>

Tactem
Jan 25, 2013, 8:55 AM
Hi, I tried your suggestion but it still doesn't work. I can't active other tab.


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('PanelUs erAdmin'));
}
else {
App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUs erAdmin'));
}
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>

Baidaly
Jan 25, 2013, 9:04 AM
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('PanelUs erAdmin')); // <- Change
}
else {
App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUs erAdmin')); // <- Change
}


I didn't do this because I didn't know you scenario

Tactem
Jan 25, 2013, 9: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('PanelUs erAdmin')); // <- Change
}
else {
App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUs erAdmin')); // <- Change
}


It seems like App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUs erAdmin')) does nothing.


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('PanelUs erAdmin')); // <- Change
}
else {
App.TabStripAdmin.setActiveTab(Ext.getCmp('PanelUs erAdmin')); // <- Change
}


I didn't do this because I didn't know you scenario

Tactem
Jan 25, 2013, 9: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.

Daniil
Jan 25, 2013, 12:02 PM
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>

Tactem
Jan 25, 2013, 1:08 PM
It works great. Thank you guys, I apreciated.


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>