1、Coolite基本教程Coolite基本教程概念:Coolite Toolkit 是一个支持ASP.NET AJAX的Web控件,Coolite Toolkit非常适合做web应用程序的开发,它提供了很多专业的A输入/验证/显示控件,和页面布局的框架,同时完全支持ajax,因为它是所有的组件是居于ExtJS上封装出来,让开发人员在可视化的设计器内进行方面的属性配置。 Coolite Toolkit是基于跨浏览器的ExtJS 库开发而来的,并且简化了开发步骤,并且包含有丰富的Ajax运用。具体事例请参照其官网:开发环境:Vs2008+sq1 .netFramework 3.5开发Web项目引用类
2、库: 引用Lib提示 学习前置条件:1. AJAX原理(Atlas)2. Json数据格式3. XML数据格式其他相关文档Coolite编码规范.docx (位于Groove共享中“规范类文档”下)基本控件一、按扭(Button)控件Coolite Toolkit里同样提供有四种Button控件,他们分别是Button、ImageButton、LinkButton和SplitButton ,其中LinkButton和SplitButton就不做说明了。1.Button简单记录一下Button触发同步事件: 使用Listeners为控件添加客户端方法: functiononClientClick
3、()alert(Hello);使用AjaxEvents为控件添加Ajax处理方法: /*/protectedvoidButton3_Click(objectsender,AjaxEventArgse)Ext.Msg.Alert(标题,显示的消息内容).Show();另外还有一个重要的特性就是按扭菜单项,可以给一个按扭添加菜单选项,使用如下: 2.ImageButton其使用得也比较多,通过设置按扭的图片让按扭呈现出不同的风格,不过Coolite Toolkit的ImageButton控件和微软的有些不一样,微软的只能设置一张显示图片,如果要做动态交互效果只能通过样式或脚本程序去控制,Cooli
4、te Toolkit却直接提供了对外属性,只需要简单设置就可以完成一个丰富的界面交互效果的按扭,其功能点和ext:Button是一样的,如下所示: 二、TextFiled控件TextFiled控件等同于ASP.NET里的TextBox控件,主要进行文字数据录入或显示,反之就是NumberFiled控件专们用来进行数字录入的。TextFiled控件的使用很简单,两个特别属性:EmptyText:设置或获取显示输入数据提示信息Note:设置或获取静态描述信息,并可以通过NoteAlign属性设置信息的显示位置。三、DataFiled控件这个控件作用比较大,很多地方都用得到。直接通过其Selecte
5、dData属性得到所选择的日期。效果如下:四、ComboBox控件ComboBox控件的基本功能和.NET标准控件的DropDownList控件相同,不同之处在于DropDownList只能选择,不能进行编辑录入,如果用户需要一个既可手工输入又可以选择的功能来做条件筛选,DropDownList则实现不了,Coolite Toolkit正好弥补上了DropDownList的不足。使用方式两者都相差不大,下面是一个简单的示例:另外Coolite Toolkit的ComboxBox还提供了Triggers和Listeners,通过这两个集合可以为ComboBox定制更高级的应用。根据字面意思就可以
6、猜到,一个触发器一个监听器,那么这两者配合能实现什么样的效果呢?先看看下图:上面表示了ComboxBox的三种状态:未输入和未选择状态、下拉选择项状态和选中项后的状态,要实现这个效果就需要用到Triggers和Linteners这两个特性了,详细如下代码片段: 五、Menu控件 Coolite Toolkit里的Menu控件和其他的.NET Web控件不一样,如果只是设计好了Menu或是通过程序初始化菜单项,菜单是不会呈现在界面上的,因为Coolite Toolkit规定Menu控件需要一个容器来做依托,而这个让Menu依托的控件就是MenuPanel,下面拖拽出的MenuPanel控件所生成
7、的html编码: 从上面可以明显的看出,MenuPanel里可以放置菜单项(MenuItem),如果有子菜单,那么子菜单则对应于一个Menu控件,子菜单里的菜单项则又是通过菜单项(MenuItem)来体现。如下是我修改后的一个菜单html编码: functiononItemClick(menuItem)Ext.Msg.alert(操作提示,当前点击项内容:+menuItem.text);像Tree、Menu等类似的控件,我个人认为主要就是弄清楚他们内部的层次结构,不管是通过界面设计还是通过直接Code创建他们,最终得到的结果都是一样,如上菜单显示效果,同样可以通过如下程序代码来创建:prote
8、ctedvoidPage_Load(objectsender,EventArgse)if(!IsPostBack)CreateMenuPanel();privatevoidCreateMenuPanel()MenuPanelmenuPanel=newMenuPanel();menuPanel.Title=帐套管理;menuPanel.Width=newUnit(180);Coolite.Ext.Web.MenuItemaddAccount=newCoolite.Ext.Web.MenuItem(新增帐套);addAccount.Icon=Icon.Add;addAccount.Listener
9、s.Click.Handler=JavaScript:window.location.href=#;Coolite.Ext.Web.MenuItemwhAccount=newCoolite.Ext.Web.MenuItem(维护帐套);whAccount.Icon=Icon.Cmy;Coolite.Ext.Web.MenuItemaccountManage=newCoolite.Ext.Web.MenuItem(帐套管理);accountManage.Icon=Icon.Database;Coolite.Ext.Web.MenusubMenu=newCoolite.Ext.Web.Menu()
10、;Coolite.Ext.Web.MenuItembackMenuItem=newCoolite.Ext.Web.MenuItem(备份帐套);backMenuItem.Icon=Icon.DatabaseSave;backMenuItem.Listeners.Click.Handler=JavaScript:window.open(#);subMenu.Items.Add(backMenuItem);Coolite.Ext.Web.MenuItemreMenuItem=newCoolite.Ext.Web.MenuItem(恢复帐套);reMenuItem.Icon=Icon.Databas
11、eGo;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
12、.Controls.Add(menuPanel);六、Accordion控件Accordion的功能非常适用,使用很简单,轻轻松松的就可以构建一个可折叠的界面展示应用效果。相信大多数做ASP.NET开发的朋友都使用过ASP.NET AJAXControl Toolkit,它里面也提供有Accordion控件,详细可以查看其在线示例。Colite Toolkit所提供的Accordion控件的使用和ASP.NET AJAX Control Toolkit里提供的Accordion差别不大,不同的是Coolite Toolkit的控件必须放置在一个容器控件里(比如:Panel)。 新增帐套维护帐套帐套备份帐套恢复得到的效果如下,这个界面相比ASP.NET AJAX Control Toolkit的Accordion要好看得多。全部自己去定义里面的菜单项好象很麻烦,这里可以利用上一篇文章中介绍的MenuPanel来实现,个人感觉效果更好,更方便快速。新增帐套维护帐套帐套备份帐套恢复ext:PanelID=userPanelrunat=serverBorder=falseCollapsed=trueTitle=用户
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1