May 15, 2015, 9:28 AM
[CLOSED] CardLayout : Call Direct action after click
Hi
i design a CardLayout as per my need.and now I want to call an Action method on last tab of the LayOut .but the method call when its transferring from 2nd tab to 3rd tab .
If you run the sample code ,you can see .
Steps
1. On Tab 2 press next Button text become Save (But as well as the Action method will called ) and If click on save then only Action method will be call.
can you please suggest me how do the validation logic where If click on Save then only Action method will call.
i design a CardLayout as per my need.and now I want to call an Action method on last tab of the LayOut .but the method call when its transferring from 2nd tab to 3rd tab .
If you run the sample code ,you can see .
Steps
1. On Tab 2 press next Button text become Save (But as well as the Action method will called ) and If click on save then only Action method will be call.
can you please suggest me how do the validation logic where If click on Save then only Action method will call.
@{
Layout = null;
var X = Html.X();
}
<script>
var Prev_Click = function (index) {
if ((index - 1) >= 0) {
if (App.WizardPanel.getLayout().setActiveItem) {
App.WizardPanel.getLayout().setActiveItem(index - 1);
CheckButtons(index - 1);
}
}
ChangeButtontext(index, 'prev')
}
var Next_Click = function (index) {
if ((index + 1) < 3) {
if (App.WizardPanel.getLayout().setActiveItem) {
App.WizardPanel.getLayout().setActiveItem(index + 1);
CheckButtons(index + 1);
}
}
ChangeButtontext(index,'nxt')
}
var CheckButtons = function (index) {
Ext.getCmp("btnNext").setDisabled(index == 2);
Ext.getCmp("btnPrev").setDisabled(index == 0);
}
var ChangeButtontext = function (index, dir) {
console.log(index)
if (index == 1 && dir=='nxt') {
Ext.getCmp("btnNext").setText("Save");
}
else {
Ext.getCmp("btnNext").setText("Next");
}
}
</script>
@X.ResourceManager()
@(X.TabPanel()
.ID("WizardPanel")
.Title("Example Wizard")
.BodyPadding(15)
.Height(300)
.Layout(LayoutType.Card)
.ActiveIndex(0)
.Items(
X.Panel()
.ID("Panel1")
.Title("Tab 1")
.Border(false)
.Header(false)
//.ItemsFromPage(this,"Partial1.cshtml")
,
X.Panel()
.ID("Panel2")
.Title("Tab 2")
.Html("<h1>Card 2</h1><p>Step 2 of 3</p>")
.Border(false)
.Header(false),
X.Panel()
.ID("Panel3")
.Title("Tab 3")
.Html("<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>")
.Border(false)
.Header(false)
)
.Buttons(
X.Button()
.ID("btnPrev")
.Text("Prev")
.Disabled(true)
.Icon(Icon.PreviousGreen)
.Listeners(l => {
l.Click.Handler = @"var index = #{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)
Prev_Click(index)
";
})
,
X.Button()
.ID("btnNext")
.Text("Next")
.Icon(Icon.NextGreen)
.Listeners(l => {
l.Click.Handler = @"var index = #{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)
Next_Click(index)
";
})
.DirectEvents(de =>
{
de.Click.Before = @"var index = #{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)
if((index)<2)
{
return false;
}
else
{
return true;
}
";
de.Click.EventMask.ShowMask = true;
de.Click.Url = Url.Action("Next_Click");
de.Click.ExtraParams.Add(new Parameter("index", "#{WizardPanel}.items.indexOf(#{WizardPanel}.layout.activeItem)", ParameterMode.Raw));
})
)
)
public void Next_Click(int index)
{
}
Last edited by Daniil; May 20, 2015 at 6:39 AM.
Reason: [CLOSED]