Coolite基本教程.docx

Coolite基本教程.docx

《Coolite基本教程.docx》由会员分享，可在线阅读，更多相关《Coolite基本教程.docx（52页珍藏版）》请在冰豆网上搜索。

Coolite基本教程

Coolite基本教程

概念：

CooliteToolkit是一个支持ASP.NETAJAX的Web控件，CooliteToolkit非常适合做web应用程序的开发，它提供了很多专业的A输入/验证/显示控件，和页面布局的框架，同时完全支持ajax，因为它是所有的组件是居于ExtJS上封装出来，让开发人员在可视化的设计器内进行方面的属性配置。

CooliteToolkit是基于跨浏览器的ExtJS库开发而来的，并且简化了开发步骤，并且包含有丰富的Ajax运用。

具体事例请参照其官网：

开发环境：

Vs2008+sq1.netFramework3.5

开发Web项目引用类库：

引用Lib提示

学习前置条件：

1.AJAX原理（Atlas）

2.Json数据格式

3.XML数据格式

其他相关文档

Coolite编码规范.docx（位于Groove共享中“规范类文档”下）

基本控件

一、按扭（Button）控件

      CooliteToolkit里同样提供有四种Button控件，他们分别是Button、ImageButton、LinkButton和SplitButton，其中LinkButton和SplitButton就不做说明了。

1.Button

简单记录一下Button触发同步事件：

Button ID="Button1" runat="server" Text="点我" AutoPostBack="True" onclick="Button1_Click" />

      使用Listeners为控件添加客户端方法：

Button ID="Button2" runat="server" Text="点我">

Button>

    function onClientClick（） {

        alert（"Hello"）;

    }

      使用AjaxEvents为控件添加Ajax处理方法：

Button ID="Button3" runat="server" Text="点我">

Button>

/******************************************************/

protected void Button3_Click（object sender, AjaxEventArgs e）

{

    Ext.Msg.Alert（"标题", "显示的消息内容"）.Show（）;

}

      另外还有一个重要的特性就是按扭菜单项，可以给一个按扭添加菜单选项，使用如下：

Button ID="Button4" runat="server" Text="点我">

Button>

2.ImageButton

其使用得也比较多，通过设置按扭的图片让按扭呈现出不同的风格，不过CooliteToolkit的ImageButton控件和微软的有些不一样，微软的只能设置一张显示图片，如果要做动态交互效果只能通过样式或脚本程序去控制，CooliteToolkit却直接提供了对外属性，只需要简单设置就可以完成一个丰富的界面交互效果的按扭，其功能点和ext:

Button是一样的，如下所示：

ImageButton ID="ImageButton1" 

    runat="server" 

    ImageUrl="button/button.gif" 

    OverImageUrl="button/overButton.gif" 

    DisabledImageUrl="button/disabled.gif" 

    PressedImageUrl="button/pressed.gif">

ImageButton>

二、TextFiled控件

      TextFiled控件等同于ASP.NET里的TextBox控件，主要进行文字数据录入或显示，反之就是NumberFiled控件专们用来进行数字录入的。

TextFiled控件的使用很简单，两个特别属性:

EmptyText：

设置或获取显示输入数据提示信息

Note：

设置或获取静态描述信息，并可以通过NoteAlign属性设置信息的显示位置。

三、DataFiled控件

      这个控件作用比较大，很多地方都用得到。

直接通过其SelectedData属性得到所选择的日期。

效果如下：

四、ComboBox控件

      ComboBox控件的基本功能和.NET标准控件的DropDownList控件相同，不同之处在于DropDownList只能选择，不能进行编辑录入，如果用户需要一个既可手工输入又可以选择的功能来做条件筛选，DropDownList则实现不了，CooliteToolkit正好弥补上了DropDownList的不足。

使用方式两者都相差不大，下面是一个简单的示例：

ComboBox ID="ComboBox1" runat="server">

ListItem Text="电信" Value="电信"/>

ListItem Text="移动" Value="移动"/>

ListItem Text="联通" Value="联通"/>

ComboBox>

      另外CooliteToolkit的ComboxBox还提供了Triggers和Listeners，通过这两个集合可以为ComboBox定制更高级的应用。

根据字面意思就可以猜到，一个触发器一个监听器，那么这两者配合能实现什么样的效果呢？

先看看下图：

      上面表示了ComboxBox的三种状态：

未输入和未选择状态、下拉选择项状态和选中项后的状态，要实现这个效果就需要用到Triggers和Linteners这两个特性了，详细如下代码片段：

ComboBox ID="ComboBox2" runat="server" EmptyText="请选择或输入数据">

ListItem Text="电信" />

ListItem Text="移动" />

ListItem Text="联通" />

FieldTrigger Icon="Clear" HideTrigger="true" />

 'hide' :

 'show']（）;" />

ComboBox>

五、Menu控件

CooliteToolkit里的Menu控件和其他的.NETWeb控件不一样，如果只是设计好了Menu或是通过程序初始化菜单项，菜单是不会呈现在界面上的，因为CooliteToolkit规定Menu控件需要一个容器来做依托，而这个让Menu依托的控件就是MenuPanel，下面拖拽出的MenuPanel控件所生成的html编码：

      从上面可以明显的看出，MenuPanel里可以放置菜单项（MenuItem），如果有子菜单，那么子菜单则对应于一个Menu控件，子菜单里的菜单项则又是通过菜单项（MenuItem）来体现。

如下是我修改后的一个菜单html编码：

MenuPanel runat="server" Height="300" Title="帐套管理" Width="185">

MenuItem runat="server" Text="新增帐套" Icon="Add">

window.location.href='#';" />

MenuItem>

MenuItem runat="server" Text="维护帐套" Icon="Cmy"/>

MenuItem runat="server" Text="帐套管理" Icon="Database">

MenuItem>

MenuPanel>

    function onItemClick（menuItem） {

        Ext.Msg.alert（"★操作提示★", "当前点击项内容：

" + menuItem.text）;

    }

      像Tree、Menu等类似的控件，我个人认为主要就是弄清楚他们内部的层次结构，不管是通过界面设计还是通过直接Code创建他们，最终得到的结果都是一样，如上菜单显示效果，同样可以通过如下程序代码来创建：

protected void Page_Load（object sender, EventArgs e）

{

    if （!

IsPostBack）

    {

        CreateMenuPanel（）;

    }

}

private void CreateMenuPanel（）

{

    MenuPanel menuPanel = new MenuPanel（）;

    menuPanel.Title = "帐套管理";

    menuPanel.Width = new Unit（180）;

    Coolite.Ext.Web.MenuItem addAccount = new Coolite.Ext.Web.MenuItem（"新增帐套"）;

    addAccount.Icon = Icon.Add;

    addAccount.Listeners.Click.Handler = "JavaScript:

window.location.href='#';";

    Coolite.Ext.Web.MenuItem whAccount = new Coolite.Ext.Web.MenuItem（"维护帐套"）;

    whAccount.Icon=Icon.Cmy;

    Coolite.Ext.Web.MenuItem accountManage = new Coolite.Ext.Web.MenuItem（"帐套管理"）;

    accountManage.Icon = Icon.Database;

    Coolite.Ext.Web.Menu subMenu = new Coolite.Ext.Web.Menu（）;

    Coolite.Ext.Web.MenuItem backMenuItem = new Coolite.Ext.Web.MenuItem（"备份帐套"）;

    backMenuItem.Icon = Icon.DatabaseSave;

    backMenuItem.Listeners.Click.Handler = "JavaScript:

window.open（'#'）";

    subMenu.Items.Add（backMenuItem）;

    Coolite.Ext.Web.MenuItem reMenuItem = new Coolite.Ext.Web.MenuItem（"恢复帐套"）;

    reMenuItem.Icon = Icon.DatabaseGo;

    reMenuItem.Listeners.Click.Handler = "JavaScript:

window.open（'#'）";

    subMenu.Items.Add（reMenuItem）;

    accountManage.Menu.Add（subMenu）;

    menuPanel.Menu.Items.Add（addAccount）;

    menuPanel.Menu.Items.Add（whAccount）;

    menuPanel.Menu.Items.Add（accountManage）;

    menuPanel.Menu.Listeners.ItemClick.Fn = "onItemClick";

    accountDiv.Controls.Add（menuPanel）;

六、Accordion控件

      Accordion的功能非常适用，使用很简单，轻轻松松的就可以构建一个可折叠的界面展示应用效果。

相信大多数做ASP.NET开发的朋友都使用过ASP.NETAJAX ControlToolkit，它里面也提供有Accordion控件，详细可以查看其在线示例。

ColiteToolkit所提供的Accordion控件的使用和ASP.NETAJAXControlToolkit里提供的Accordion差别不大，不同的是CooliteToolkit的控件必须放置在一个容器控件里（比如：

Panel）。

Panel ID="Panel1" runat="server" Height="300" Title="系统菜单" Width="200">

Accordion ID="Accordion1" runat="server" Animate="true">

Panel ID="basePanel" runat="server" Border="false" Title="基础设置">

Panel>

Panel ID="accountPanel" runat="server" Border="false" Collapsed="true" Title="帐套管理">

50px;">

left;">