PDA

View Full Version : CardLayout



Lex
Jul 16, 2008, 12:02 PM
Hi there!

this is the first time I write here but I follow this forum for quite a long time.
I want to thank you for this wonderful Control... It is so intuitive that I never needed to write to you... at least... until now! ;)

The question is: what about the CardLayout? How it works?

I have a ViewPort in a MasterPage and into the 'Center' panel of the BorderLayout there's the ContentPlaceHolder. Now, I have to put into a Content Page a structure like a "wizard" (you know... consecutive panels with "next" and "previous" buttons...).

I see ExtJS have a class named CardLayout (Ext.layout.CardLayout) that it works exactly as I want and I found it into the Coolite Toolkit too... but it doesn't seems to work...

Basically when I try to write a code into the tag's control (I prefer write directly html code rather than works in design mode) it doesn't accept anything of my code (like tag "Content" or other controls such as panels, tabPanels etc...) and it doesn't open the intellisense window when I start to write some code ('<ext:...').

What's the problem? There's something wrong in this control or in my head? ehheh ;)

Thank's in advance!

Alessandro.

PS: I'm sorry for my poor english... I hope you understood my post!!! :S

Vladimir
Jul 16, 2008, 2:45 PM
Hi Alessandro,

I wrote sample showing CardLayout functionality

CardLayout.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CardLayout.aspx.cs" Inherits="Coolite.Sandbox.Temp.CardLayout.CardLayout" %>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">

<ext:ScriptManager ID="ScriptManager1" runat="server" />
<ext:Panel runat="server" Title="Example Wizard" ActiveItem="0" BodyStyle="padding:15px" ID="WizardPanel" Height="300" >
<Content>
<ext:CardLayout ID="WizardLayout" runat="server">
<ext:Panel runat="server"
Html="<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>" Border="false"
Header="false" ID="Panel1"></ext:Panel>
<ext:Panel runat="server" Html="<p>Step 2 of 3</p>" Border="false"
Header="false" ID="Panel2"></ext:Panel>
<ext:Panel runat="server"
Html="<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>" Border="false"
Header="false" ID="Panel3"></ext:Panel>
</ext:CardLayout>
</Content>
<Buttons>
<ext:Button ID="btnNext" runat="server" Text="Next" &#111;nclick="Next_Click"></ext:Button>
<ext:Button ID="btnPrev" runat="server" Text="Prev" Disabled="true" &#111;nclick="Prev_Click"></ext:Button>
</Buttons>
</ext:Panel>

</form>
</body>
</html>



CardLayout.cs


public partial class CardLayout : System.Web.UI.Page
{
protected void Next_Click(object sender, EventArgs e)
{
int index = int.Parse(WizardPanel.ActiveItem);
if ((index + 1) < WizardLayout.Items.Count)
{
WizardPanel.ActiveItem = (index + 1).ToString();
}
CheckButtons();
}

protected void Prev_Click(object sender, EventArgs e)
{
int index = int.Parse(WizardPanel.ActiveItem);
if ((index - 1) >= 0)
{
WizardPanel.ActiveItem = (index - 1).ToString();
}
CheckButtons();
}

private void CheckButtons()
{
int index = int.Parse(WizardPanel.ActiveItem);
btnNext.Disabled = index == (WizardLayout.Items.Count - 1);
btnPrev.Disabled = index == 0;
}
}


Please don't hesitate to ask me if you have any question or need additional information

Vladimir

Lex
Jul 18, 2008, 4:32 AM
Thank you very much for your reply Vladimir!
It works perfectly! :D

Alessandro.

Peter P
Jan 26, 2009, 5:27 PM
I have a very similar situation to the above with a treepanel on the left and a detail panel on the right. In my callback, when an item is selected in the tree I want to switch the detail panel to get a new form. You can see that I initialize the detail panel to have ActiveItem="1" and that gives me what I want. However, when I reset the value in the callback nothing changes on the screen. Setting ActiveItem="2" works in the callback but on a subsequent call the ActiveItem starts out being the original value.

Callback function is registered as an AjaxMethod



<ext:Panel runat="server" ID="pnlDetail" Title="Detail" Width="300" ActiveItem="1">
<Body>
<ext:CardLayout ID="clDetail" runat="server" >
<ext:Panel ID="pnlProject" runat="server" Title="Title">
<Body>
<ext:FormLayout ID="FormLayout1" runat="server">
<ext:Anchor>
<ext:TextField ID="TextField1" runat="server" FieldLabel="Project">
</ext:TextField>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
<ext:Panel ID="pnlElement" runat="server" Title="Title">
<Body>
<ext:FormLayout ID="FormLayout2" runat="server">
<ext:Anchor>
<ext:TextField ID="TextField2" runat="server" FieldLabel="Element">
</ext:TextField>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
<ext:Panel ID="pnlMix" runat="server" Title="Title">
<Body>
<ext:FormLayout ID="FormLayout3" runat="server">
<ext:Anchor>
<ext:TextField ID="TextField3" runat="server" FieldLabel="Mix">
</ext:TextField>
</ext:Anchor>
</ext:FormLayout>
</Body>
</ext:Panel>
</ext:CardLayout>
</Body>
</ext:Panel>





pnlDetail.ActiveItem = "2"

Justin_Wignall
Jan 29, 2009, 10:40 AM
The code it looks to be passing back to execute is:



PANELNAME.activeItem=\"1\"


rather than



PANELNAME.layout.setActiveItem(\"1\")


As per the Ext api. I _think_ this is a bug / undeveloped area of the code.

You can use



PANELNAME.AddScript("{0}.layout.setActiveItem(1);", PANELNAME.ClientID)


to achieve this

Peter P
Jan 29, 2009, 2:17 PM
Thank you, that worked just great