Coolite简介
Coolite Toolkit 简介
- Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件
- Coolite Toolkit是基于跨浏览器的ExtJS 库开发而来的，并且简化了开发步骤，包含有丰富的Ajax运用
- Coolite Toolkit和ExtJS 都是开源的
- 可能通过SVN直接获取Coolite 的代码
简单的说,就是将之前的纯Js的开源Ajax库,使用asp.net自定义控件技术,将Ext封装成asp.net 控件,简化了开发难度,提高了.net程序员web开发速度.
Coolite Toolkit 使用场景:
Coolite Toolkit非常适合做web应用程序的开发，它提供了很多专业的Asp.net输入/验证/显示控件，和页面布局的框架，同时完全支持ajax，因为它是所有的组件是居于ExtJS上封装出来，让开发人员在可视化的设计器内进行方面的属性配置
Coolite Toolkit 系统要求:
- 自己电脑上经过测试,没有问题:vs2008+vs2008 sp1补丁+.net frameword3.5 + xp system
- vs2005也能使用,不过没有研究
- vs2008在官网有分流下载,sp1补丁800MB+
Coolite Toolkit 官方下载:
Coolite Toolkit 安装方法:
-
安装Coolite.Toolkit.Professional.Edition.0.8.1.msi
-
解压第二个ZIP格式的包,找到Coolite Toolkit Professional v0.8.1下的Coolite.Ext.Web.dll
-
打开vs2008,新建web网站项目,在工具箱添加选项卡Coolite Toolkit,选择项,导入Coolite.Ext.Web.dll
-
开始使用吧,直接拖控件咯
-
在webconfig中添加<httpModules>
<add name="AjaxRequestModule" type="Coolite.Ext.Web.AjaxRequestModule, Coolite.Ext.Web" />
</httpModules>
- 使用Coolite Toolkit基本方法
获得一个对象：
格式：#{控件的Id}，
客户端使用： <ext:Button ID="Button6" runat="server" Text="获得控件对象" OnClientClick="alert(#{Button6})" >
</ext:Button> //返回一个[object,Object]对象组
修改：alert(#{Button6}.id) 返回Button6 修改：alert(#{Button6}.text) 返回 获得控件对象
服务端使用： 必须是 拼装在String里面的！
格式：#{控件的Id}，
客户端使用： <ext:Button ID="Button6" runat="server" Text="获得控件对象" OnClientClick="alert(#{Button6})" >
</ext:Button> //返回一个[object,Object]对象组
修改：alert(#{Button6}.id) 返回Button6 修改：alert(#{Button6}.text) 返回 获得控件对象
服务端使用： 必须是 拼装在String里面的！
控件取值、赋值的方式:
根据控件属性：
可使用 #{控件的Id}.getText() 或 #{控件的Id}.getValue() 获得控件属性值；
反之使用#{控件的Id}.setText('内容') 或 #{控件的Id}.setText('内容') 设置控件属性值；
-----------------------------------------------------------------------------------------------------
<ext:Button>控件:
<ext:Button ID="Button1" runat="server" Text="获得控件对象" OnClientClick="alert(#{Button1}.getText())" >//返回获得控件对象
</ext:Button>
<ext:Button ID="Button1" runat="server" Text="获得控件对象" OnClientClick="#{Button1}.setText('设置控件对象内容')" >
</ext:Button> //Text="设置控件控件对象内容"
<ext:Label 控件： #{控件的Id}.getText(); 反之设置：setText('内容')
<ext:TextField 控件： #{控件的Id}.getValue(); 反之设置：setValue('内容')
根据控件属性：
可使用 #{控件的Id}.getText() 或 #{控件的Id}.getValue() 获得控件属性值；
反之使用#{控件的Id}.setText('内容') 或 #{控件的Id}.setText('内容') 设置控件属性值；
-----------------------------------------------------------------------------------------------------
<ext:Button>控件:
<ext:Button ID="Button1" runat="server" Text="获得控件对象" OnClientClick="alert(#{Button1}.getText())" >//返回获得控件对象
</ext:Button>
<ext:Button ID="Button1" runat="server" Text="获得控件对象" OnClientClick="#{Button1}.setText('设置控件对象内容')" >
</ext:Button> //Text="设置控件控件对象内容"
<ext:Label 控件： #{控件的Id}.getText(); 反之设置：setText('内容')
<ext:TextField 控件： #{控件的Id}.getValue(); 反之设置：setValue('内容')
客户端对话框
confirm使用：
格式：Ext.Msg.confirm('标题', '你想删除','回调函数');
prompt使用：
格式：Ext.Msg.prompt('title','message',callback);
-------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
var showResultText = function(btn, text) {
Ext.Msg.alert('Button Click', 'You clicked the ' + btn + ' button and entered the text "' + text + '".');
};
</script>
<ext:Button ID="Button3" runat="server" Text="获得控件对象" OnClientClick="Ext.Msg.prompt('Title', 'Please enter your name:',showResultText)">
</ext:Button>
---------------------------------------------------------------------------------------------------------------------------
show使用：
<ext:Button ID="Button2" runat="server" Text="获得控件对象" OnClientClick="Ext.Msg.show({title:'Save Changes?',msg: 'Would you like to save your changes?',buttons: Ext.MessageBox.YESNOCANCEL,icon: Ext.Msg.QUESTION});">
</ext:Button>
操作与ext 3.0相同，
alert使用：
格式：Ext.Msg.alert('标题',‘内容’,'回调函数')；alert使用：
confirm使用：
格式：Ext.Msg.confirm('标题', '你想删除','回调函数');
prompt使用：
格式：Ext.Msg.prompt('title','message',callback);
-------------------------------------------------------------------------------------------------------------------------
<script type="text/javascript">
var showResultText = function(btn, text) {
Ext.Msg.alert('Button Click', 'You clicked the ' + btn + ' button and entered the text "' + text + '".');
};
</script>
<ext:Button ID="Button3" runat="server" Text="获得控件对象" OnClientClick="Ext.Msg.prompt('Title', 'Please enter your name:',showResultText)">
</ext:Button>
---------------------------------------------------------------------------------------------------------------------------
show使用：
<ext:Button ID="Button2" runat="server" Text="获得控件对象" OnClientClick="Ext.Msg.show({title:'Save Changes?',msg: 'Would you like to save your changes?',buttons: Ext.MessageBox.YESNOCANCEL,icon: Ext.Msg.QUESTION});">
</ext:Button>
