Coolite 基本用法（1）

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

---

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

2.获取值的方式：

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

<ext:Label runat="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:TabPanel ID="tabMain" runat="server" Icon="ArrowEw" EnableTabScroll="true">

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

 

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

 

1. 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中，也可以分散注册到控件上，然后在后台写好需要实现的代码。

//这是一个服务端方法

  protected void UpdateTimeStamp(object sender, AjaxEventArgs e)
{
        this.SetTime();
}
void SetTime()
{
        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(object sender, AjaxEventArgs e) 这个方法很重要，大家注意他的参数，是ajaxeventargs ，coolite 就是通过这种参数类型的方法来实现对后台代码的调用的。 而且可以对任何的页面元素注册ajaxevent事件，可以通过id 甚至通过css来对coolite控件 ，asp.net控件，以及 html元素进行ajax元素的注册。

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

 

原文：http://hi.baidu.com/haofz1983/blog/item/1d77dc7b594d80fd0bd18756.html