• 那些年,我还在学习Coolit.net


    那些年学了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的日子。

  • 相关阅读:
    每日一水 POJ8道水题
    编译和使用 MySQL C++ Connector
    j2ee model1模型完成分页逻辑的实现 详解!
    DB查询分析器访问EXCEL时,要在表名前后加上中括弧或双引号
    指向结构体变量的指针
    EOSS V3.0 企业运营支撑系统(基于RBAC原理的权限管理)
    MybatisGen1.0 Mybatis JavaBean Mapper生成工具
    The table name must be enclosed in double quotation marks or sqare bracket while accessing EXCEL by
    资源-Android:Android
    软件-开发软件:Android Studio
  • 原文地址:https://www.cnblogs.com/xin_ny/p/2378381.html
Copyright © 2020-2023  润新知