Coolite Toolkit 学习总结1
Coolite Toolkit(ExtJS可视化控件)是一个支持ASP.NET AJAX的Web控件，是一个基于AJAX技术的ASP.NET的一整套第三方控件，非常适合做web应用程序，尤其在界面设计上功能丰富，效果专业显著。看到介绍对Coolite就爱不释手了，但是用起来才知道不是那么简单，还真得好好学习一下。
下载整套控件文件，在VS中添加引用，在工具面板选项添加以后工具栏的HTML控件明显增多，这些就是Coolit的控件。
要想学好Coolite，首先要先学习一下用Coolite Toolkit布局。先理解几个关键词Panel，Field，Layout。只有学会这几个，才能学好布局。Panel 是面板的意思，这类空间是容器类空间，它可以包含很多个控件，Field有域的意思，Layout就好理解了，就是布局。比较常用的就是FormLayout、FormPanel、MultiField控件。
很多人用DIV+CSS布局，有的用Table布局，有时候是很简单的，但是用Coolit就比较麻烦了，真是需要学习一下。
用FormLayout控件布局方式是按照行优先的原则，它有个Anchor标记，可以有多个Anchor标记，一对Anchor标记就可以把它的父控件分成上下两个部分，例如这样一对：<Fields></Fields>
通过这个代码，就可以看出Coolite布局的方法了。
接下来就学习Coolite的事件。
一、AjaxEvent
AjaxEvent在很多的控件中，实现异步提交等功能。例如在Coolite的Button控件中就可以方便的使用。
在CooliteToolkit 的Button控件中使用：
MyEvent.aspx页面源码：（网上搜集的代码，用于调试。）
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server"></ext:ScriptManager>
<div class="msg x-box-mc">
服务器时间:
<em><ext:Label ID="Label1" runat="server" /></em>
</div>
<ext:Button ID="btnAjaxEvents" runat="server" Text="ext:AjaxEvents" Icon="ApplicationOsxLink">
<AjaxEvents>
<Click OnEvent="UpdateTimeStamp">
<EventMask ShowMask="true" Msg="下载中..." MinDelay="300" />
//时间根据情况，不能延时太长，够用就行。
</Click>
</AjaxEvents>
</ext:Button>
Test.cs
protected void Page_Load(object sender, EventArgs e)
{
if (!Ext.IsAjaxRequest)
{
if (!IsPostBack)
{
SetTime();
//设置时间，后面有函数
}
}
}
protected void UpdateTimeStamp(object sender, AjaxEventArgs e)
{
SetTime();
}
void SetTime()
{
this.Label1.Text = DateTime.Now.ToLongTimeString();
}
二、AjaxMethod
AjaxMethod提供从客户端JavaScript代码能够调用服务器端的.NET方法。[AjaxMethod]属性修饰服务器端公众或公众的静态方法服务器方法供客户端JavaScript使用。值得注意的是，同时它提供了调用母版页(MasterPage)和用户自定义控件(UserControl)里的方法。
AjaxEvent连接到[WebMethod] Web服务使用：
MyEvent.aspx页面中添加：
<ext:Panel
runat="server"
Title="Say Hello"
Width="320"
Height="180"
Frame="true"
ButtonAlign="Center">
<Body>
<ext:FormLayout runat="server">
<Anchors>
<ext:Anchor Horizontal="100%">
<ext:TextField ID="txtName" runat="server" FieldLabel="Name" EmptyText="Your name here..." />
</ext:Anchor>
</Anchors>
</ext:FormLayout>
</Body>
<Buttons>
<ext:Button runat="server" Text="测试调用Web服务">
<AjaxEvents>
<Click
Url="TestService.asmx/SayHello1"
Type="Load"
Method="POST"
CleanRequest="true">
<ExtraParams>
<ext:Parameter Name="name" Value="#{txtName}.getValue()" Mode="Raw" />
</ExtraParams>
</Click>
</AjaxEvents>
</ext:Button>
</Buttons>
</ext:Panel>
TestService.asmx 中：
using System.Web.Services;
using Coolite.Ext.Web;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
// [System.Web.Script.Services.ScriptService]
public class TestService : System.Web.Services.WebService
{
[WebMethod]
public AjaxResponse SayHello1(string name)
{
AjaxResponse response = new AjaxResponse();
// Return a script to be executed on the client
response.Script = string.Concat("alert('Hello, ", name, "');");
return response;
}
}
}
三、Listeners
Listeners的Click事件 <ext:MenuPanel runat="server" Title="Menu panel with selection saving" Icon="ArrowSwitch">
<Menu runat="server">
<Items>
<ext:MenuItem runat="server" Text="Point 1" Icon="ArrowRight" />
<ext:MenuItem runat="server" Text="Point 2" Icon="ArrowRight" />
</Items>
<Listeners>
<ItemClick Fn="MenuItemClick" />
</Listeners>
</Menu>
</ext:MenuPanel>
<ext:Panel ID="CenterPanel" runat="server" Title="Center" BodyStyle="padding:16px;" />
1：通过Listeners给Ext按扭（或Ext Control）添加了一个客户端方法Handler
<ext:Button ID="Button1" runat="server" Text="Click Me #1" >
<Listeners>
<Click Handler="Ext.Msg.alert('Confirm', 'You Clicked Button1');" />
</Listeners>
</ext:Button>
or
<script type="text/javascript" >
function test() {
Ext.Msg.alert('Confirm', 'You Clicked Button1');
}
</script>
<Click Handler="test" />
or
<Click Fn="test" />
2:通过代码隐藏给Ext按扭添加了一个客户端方法
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
// Define a generic JavaScript function to use later
string fn = "Ext.Msg.alert('Confirm', String.format('You Clicked {0}', el.id));";
// 2. Click Listener from Code-Behind
this.Button2.Listeners.Click.Handler = fn;
}
</script>
<ext:Button ID="Button2" runat="server" Text="Click Me #2" />
//或者用以下方式添加:
// 3. Click Listener using .On() method
this.Button2.On("click", "function(el){" + fn + "}");
// 4. Click Listener using .AddListener() method
this.Button2.AddListener("click", "function(el){" + fn + "}");
// 5. Click Listener which only fires once (set from code-behind)
this.Button2.Listeners.Click.Handler = fn;
this.Button2.Listeners.Click.Single = true;
3：添加一组客户端Click事件
<script type="text/javascript">
function MenuItemClick(menuItem) {
CenterPanel.body.update(String.format("Clicked: {0}", menuItem.text)).highlight();
}
</script>