您的位置：首页 > 其它

那些年，我还在学习Coolit.net

2012-03-03 15:44 288 查看

那些年学了asp.net相关知识后，就觉得差不多了，为什么还要学习这个；原来Coolit.net是一套基于服务器的Ajax第三控件，我们可以像使用asp.net服务器控件那样来使用它，不用写很多javaScript Ajax脚本来完成异步的请求，Coolite控件是包装的EXTJS库，所以它的呈显效果与EXTJS相同，它们有一个共同的好处就是可以不用写很多的CSS布局，但也有一个不好的地方，就是加载文件较多，速度有点慢，适合用来做中小型系统的后台，由于项目中用的就是它，所以又开始了它的学习。

记得学习开始时，还是有点不适应，主要原因是没有文档，只有一个官方的Demo网站，并且是英语的，那才叫一个晕，但是也给自已带来了一个好处，就是开始了看英文资料，当然后来也有一个垢病，就是不太看中文的了，主要原因是可以提高英语。那下面还是通过例子来说明吧。

一、登录示例

使用Coolit.net控件完成一个登录页面，要使用Coolit控件的话，每一个页面都得有一个脚本管理器：ScriptManager，完成页面的脚本管理，没有它页面是不能运行的。登录页面使用了window组伯，以及二个文本框和按钮完成，代码如下：

<form id="form1" runat="server">

<div>

<ext:ScriptManager ID="ScriptManager1" runat="server">

</ext:ScriptManager>

<ext:Window ID="Window1" runat="server" Collapsible="false" Icon="Application"  Title="登录"

Maximizable="false" Minimizable="false" Draggable="false" Closable="false" Width="350"

Height="180" BodyStyle="padding-top:30px;">

<Body>

<ext:FormLayout ID="FormLayout1" runat="server">

<Anchors>

<ext:Anchor>

<ext:TextField ID="TextField1" runat="server" FieldLabel="UserName" AllowBlank="false"

EmptyText="Please input your UserName" Text="xin_ny">

</ext:TextField>

</ext:Anchor>

<ext:Anchor>

<ext:TextField ID="TextField2" runat="server" FieldLabel="UserPassword" AllowBlank="false"

EmptyText="Please input your UserPassword" InputType="Password" Text="xin_ny">

</ext:TextField>

</ext:Anchor>

</Anchors>

</ext:FormLayout>

</Body>

<Buttons>

<ext:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click">

<Listeners>

<Click Handler="self.location='application.aspx';"></Click>

</Listeners>

</ext:Button>

</Buttons>

</ext:Window>

</div>

</form>

效果：

是不是很实用，要是用div+css来完成，不知费好多时，说不定还没有这个好看，当然里面还使用了一些属性，不明白不用担心，到官网上查，哦，对了，好像现在找不到这个版的了吧，现在已改为EXT.NET了。

二、后台管理页面布局示例

Coolit控件提供了很多好用的控件，给我们布局带来了很大的方便，其中一个就是ViewPort,它分为东南西北几个方向，使得布局更轻松，还有就是Panel，Menu等，都是很好用的控件，现在来看一下代码吧：

<form id="form1" runat="server">

<div>

<ext:ScriptManager ID="ScriptManager1" runat="server">

<CustomAjaxEvents>

<ext:AjaxEvent Target="Button1" OnEvent="Button1_Click">

<EventMask ShowMask="true" Msg="waiting!!!" MinDelay="500" />

</ext:AjaxEvent>

</CustomAjaxEvents>

</ext:ScriptManager>

<ext:ViewPort runat="server">

<ToolTips>

<ext:ToolTip runat="server">

<TopBar>

<ext:Toolbar ID="Toolbar1" runat="server">

<Items>

<ext:Button ID="Button1" runat="server" Text="Submit" OnClick="Button1_Click">

<Menu>

<ext:Menu ID="Menu1" runat="server">

<Items>

<ext:MenuItem Text="New">

</ext:MenuItem>

<ext:MenuItem Text="Kew">

</ext:MenuItem>

</Items>

</ext:Menu>

</Menu>

</ext:Button>

<ext:Button ID="Button2" runat="server" Text="编辑">

<Menu>

<ext:Menu ID="Menu2" runat="server">

<Items>

<ext:MenuItem ID="MenuItem1" runat="server" Text="Item1">

</ext:MenuItem>

<ext:MenuItem ID="MenuItem2" runat="server" Text="Item2">

</ext:MenuItem>

<ext:MenuItem ID="MenuItem3" runat="server" Text="Item3">

</ext:MenuItem>

</Items>

</ext:Menu>

</Menu>

</ext:Button>

<ext:Button ID="Button3" runat="server" Text="Submit">

<Menu>

<ext:Menu ID="Menu3" runat="server">

<Items>

<ext:MenuItem ID="MenuItem4" runat="server" Text="Item1">

</ext:MenuItem>

<ext:MenuItem ID="MenuItem5" runat="server" Text="Item2">

</ext:MenuItem>

<ext:MenuItem ID="MenuItem6" runat="server" Text="Item3">

</ext:MenuItem>

</Items>

</ext:Menu>

</Menu>

</ext:Button>

</Items>

</ext:Toolbar>

</TopBar>

</ext:ToolTip>

</ToolTips>

<Body>

<ext:BorderLayout ID="BorderLayout1" runat="server">

<West Collapsible="false" Split="true">

<ext:Panel ID="Panel123" runat="server" Title="West" Width="175">

<Body>

<ext:Accordion ID="Accordion1" runat="server" Animate="true">

<ext:Panel ID="Panel2" runat="server" Border="false" Title="Item 1">

<Body>

</Body>

</ext:Panel>

<ext:Panel ID="Panel3" runat="server" Border="false" Collapsed="true" Title="Item 2">

<Body>

</Body>

</ext:Panel>

</ext:Accordion>

</Body>

</ext:Panel>

</West>

<Center>

<ext:Panel ID="Panel4" runat="server" Title="Center">

</ext:Panel>

</Center>

<East Collapsible="false" Split="true">

<ext:Panel ID="Panel5" runat="server" Title="East" Width="175">

</ext:Panel>

</East>

<South Collapsible="false" Split="true">

<ext:Panel ID="Panel6" runat="server" Height="150" Title="South">

<Body>

</Body>

</ext:Panel>

</South>

</ext:BorderLayout>

</Body>

</ext:ViewPort>

</div>

</form>

登录后的效果：

三、Coolit中常用的控件

除了上面的控件以外，还有很多控件都是非常好用的，比如说Form（表单）、GridPanel（网格面板，有点像GridView）、TabPanel（切换的lab）、TreePanel（以树的形式显示）、Desktop（效果像一个windows桌面），基本掌握这几个控件的使用，那么就可以完成大部分的工用了。

现在Coollit.net已改为Ext.NET了，版本也升级了，当然也从免费变为收费的了，相比较其它控件还是很不错了。

总结

那些年学asp.net时，Coolit是第一个学习的第三方控件，当然也要平时用得最多的，故此文以回忆那些年学习Coolit.Net的日子。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航