Coolite 基本用法(1)

Coolite 基本用法（1）

最近在学习使用 Coolite.Net控件，网上资料又少得很，没办法只好【死盯着】让人头皮发麻的 E文 文档，一遍一遍的试着各个属性，让人....吐泡泡！随笔记下一些使用Coolite过程中的方法！

---

1.获取一个对象：#{控件的Id} 客户端，和服务端都可以，但服务端必须是 拼装在String里面的！

2.获取值的方式：

<ext:Label 控件： #{控件的Id}.getText(); 反之设置：setText('内容')

<ext:Labelrunat="server"Html="<img src='login/Images/eHR-logo.png' />"></ext:Label>

Label 里面可以写图片！

<ext:TextField 控件： #{控件的Id}.getValue(); 反之设置：setValue('内容')

InputType属性有两种，分别是 Password 和Text 【Password 还不明白么..】

3.对话框

Ext.Msg.confirm('标题', '你想删除','回调函数');

Demo:

4.Window

#{控件的Id}.Show(); #{控件的Id}.Hide();

5.更换皮肤

this.ScriptManager1.Theme = Coolite.Ext.Web.Theme.Slate;【服务端的代码】

6.Toolbar

<ext:Toolbar里使用<ext:ToolbarFill/>标记分割前的 控件 向左靠其|后的 控件 向右靠其 【说的不明白，试一试就看得很清楚了...】

7.TabPanel

<ext:TabPanelID="tabMain"runat="server"Icon="ArrowEw"EnableTabScroll="true">

</ext:TabPanel>粗体的部分只要设置为true Table表选项就有箭头

Ext.Msg.alert('标题', '提醒的信息');

Ext.Msg.confirm('Confirm','你想删除它?',function(btn){if(btn=='yes')window.location.href='Delete.aspx';});

Ext.Msg.confirm('Confirm', '你想删除它?',function(btn){if(btn=='yes')window.location.href='Delete.aspx';});

8、coolite的事件机制

1 首先当然是coolite的事件机制了。把这个基本的原理整明白了，以后用起来也就得心应手了。

coolite 的事件分为两种 ： ajaxevent 和ajaxmethod

ajaxevent 和一般的ajax框架差不多，主要实现了前台对后台代码方法的调用，我们可以将事件通过ajaxevent标签的方式注册到scriptmanager中，也可以分散注册到控件上，然后在后台写好需要实现的代码。

//这是一个服务端方法

protectedvoidUpdateTimeStamp(objectsender, AjaxEventArgs e)
{
this.SetTime();
}
voidSetTime()
{
this.Label1.Text=DateTime.Now.ToLongTimeString();
}
//Html 调用上述方法
<ext:Button ID="Button1" runat="server" Text="Click Me">
<AjaxEvents>
<Click OnEvent="UpdateTimeStamp">
<EventMask ShowMask="true" MinDelay="500" Msg="Updating TimeStamp..." />
</Click>
</AjaxEvents>
</ext:Button>

OnEvent="UpdateTimeStamp" 就是指点击按钮后调用服务端方法UpdateTimeStamp 来更新某个标签的时间

后台代码中 ：UpdateTimeStamp(objectsender, AjaxEventArgs e)这个方法很重要，大家注意他的参数，是ajaxeventargs ，coolite 就是通过这种参数类型的方法来实现对后台代码的调用的。 而且可以对任何的页面元素注册ajaxevent事件，可以通过id 甚至通过css来对coolite控件 ，asp.net控件，以及 html元素进行ajax元素的注册。

ajaxmethod 这种事件机制似乎更直接一步，通过在后台的方法中加入 [AjaxMethod] 这样一个声明，直接将后台写的方法注册到Coolite.AjaxMethods 集合中了。这时，我们只需要在前台通过添加Listenner的方式直接调用后台的方法就可以了。而且调用完毕后 可以通过我们返回的结果和前台进行交互，进行随后的操作。 例如如下的代码在完成需要的操作后返回给前台一个结果，前台可以根据这个结果进行提示或者别的什么操作。
<script runat="server">
[AjaxMethod]
publicstaticstringGetTimeStamp4()
{
returnDateTime.Now.ToLongTimeString();
}
</script>

<ext:Button xrunat="server"Text="Click Me"Icon="Lightning">
<Listeners>
<Click Handler="
Coolite.AjaxMethods.GetTimeStamp4({
success: function(result) {
Ext.Msg.alert('Server Time', result);
}
});"/>
</Listeners>
</ext:Button>

需要强调的一点。。Listenner中注册的都是客户端时间 。我们可以在客户端事件中通过调用Coolite.AjaxMethods 来执行后台的方法。

以上就是coolite的事件机制。 大家对这些有个大概的了解后 应用coolite做一些简单的应用应该就问题不大了。。

第一次用coolite的人基本都会漏掉配置这一至关重要的环节。

如果想开启ajax事件，请记得在web.config 里做以下配置：

<system.web>
<httpHandlers>
<add path="*/coolite.axd" verb="*" type="Coolite.Ext.Web.ResourceManager" validate="false" />
</httpHandlers>
<httpModules>
<add name="AjaxRequestModule" type="Coolite.Ext.Web.AjaxRequestModule, Coolite.Ext.Web" />
</httpModules>
</system.web>

<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules>
<add name="AjaxRequestModule" preCondition="managedHandler" type="Coolite.Ext.Web.AjaxRequestModule, Coolite.Ext.Web" />
</modules>
<handlers>
<add name="AjaxRequestHandler" verb="*" path="*/coolite.axd" preCondition="integratedMode" type="Coolite.Ext.Web.ResourceManager"/>
</handlers>
</system.webServer>