As with anything in programming there are a number of ways to do any operation, sending data to server side code in Coolite is no exception. One of the ways that I have found very useful is via the OnEvent configuration for an AjaxEvent.
To begin with one needs to understand that a FormPanel is not a representation of the tag from HTML, but rather similar to the UpdatePanel control from ASP .NET Ajax. AjaxEvents are then like triggers. However, since this trigger could reside anywhere on the page we need a way to “link” the panel viewstate to the trigger so the ViewState is transmitted and we get the desired information that we need. This is done via the FormID attribute on both the AjaxEvent and the FormPanel. In addition, fields that are to be transmitted seem to require a Layout, meaning they cannot simply be placed adhoc on the page. Thus the initial HTML fragment looks something like this:
<ext:FormPanel ID="fpMain" runat="server" FormID="mainForm" ButtonAlign="Right" Title="My Form"> <Body> </Body> </ext:FormPanel>.csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }
I am only defining a few of the essential properties here. As I said earlier, FormID helps Coolite identify which ViewState set to submit as part of the AjaxEvent. All Panels in Coolite have a section dedicated for buttons, we can use the ButtonAlign property align those buttons as we wish.
For the next segment I will define a could fields using the FormLayout control. Understand that this Layout in particular has a lot of extra functionality and uses, I am not going to show case all of them here. I will talk about it later on, for now I would advise visiting http://examples.coolite.com and looking under the ‘Layouts’ section.
<ext:FormPanel ID="fpMain" runat="server" FormID="mainForm"
ButtonAlign="Right" Title="My Form">
<Body>
<ext:FormLayout runat="server" LabelSeparator=":"
LabelAlign="Left">
<ext:Anchor Horizontal="95%">
<ext:TextField ID="txtName" runat="server"
FieldLabel="Name" />
</ext:Anchor>
<ext:Anchor Horizontal="95%">
<ext:NumberField ID="nbrAge" runat="server"
FieldLabel="Age" MaxLength="3" />
</ext:Anchor>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button ID="btnSubmit" runat="server" Text="Submit"
Icon="Accept">
<AjaxEvents>
<Click OnEvent="btnSubmit_Click" FormID="mainForm">
<EventMask ShowMask="true" Msg="Submitting Data"
CustomTarget="fpMain" Target="CustomTarget" />
</Click>
</AjaxEvents>
</ext:Button>
</Buttons>
</ext:FormPanel>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
So I have defined here two form fields within FormLayout one holds a normal textfield and the other a numbers only field. To finish this implementation we need to define the btnSubmit_Click event handler in the code behind file. The implementation I will use is:
protected void btnSubmit_Click(object sender, AjaxEventArgs ev) { Ext.Msg.Alert("Alert", string.Format("Welcome {0} (Age {1}). Today is {2:d}", txtName.Text, nbrAge.Text, DateTime.Now)) .Show(); }
Admitting, this is a very simple concept of what a server side event could do; it simply shows a Coolite style modal that is designed to substitute the standard JavaScript alert window. Here we are basically telling the user the information they entered as well as attaching a server side piece of data (the current date). You can image business logic being here for adding this data to a persistent store, such as a database. I will save another blog entry to talk about validating this data since Coolite can take care of a great deal of that for you.
One other interesting thing to note, and is something that I have observed. When you start getting into these sorts of scenarios where you are using these events, you will want to be conscious of the fact that even though Coolite states the tag is not needed in the little docs they have, this is false. You will find this very true when you start trying to submit changes to a grid or pick up what rows of a grid where selected. I will have an example of this next.
The key thing here is to understand the connection between FormPanel and how to send data from the client to the server is a way that is more familiar to ASP .NET web programmers. Remember to mindful of the view state you are including and you can always validate things are working by checking the state of form fields on the server, I still do this at the onset, just to be sure I know what I am submitting.
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Random Blurbs and Things of this Nature 