CooliteToolkit学习笔记1-9.doc

Coolite Toolkit学习笔记一：AjaxEvent、AjaxMethod和Listeners一：AjaxEventCoolite Toolkit所提供的AjaxEvent可以应用在很多的控件中，实现异步提交等相关功能。比如使用在Coolite Toolkit的Button控件中，通过该控件提供的机制就可以方便的使用。12protectedvoidOnAjaxEvent_Click(objectsender,AjaxEventArgse)34567891011如果需要使用在标准控件或是其他的html标签元素上，则需要通过Coolite Toolkit所提供的ScriptManager来实现了，下面简单演示将AjaxEvent使用在官方的Button控件上。protectedvoidOnAjaxEvent_Click(objectsender,AjaxEventArgse)通过上面这种方式，可以把AjaxEvent添加到任何的html元素上（比如：input,div,p,span等等）。二：AjaxMethodCoolite Toolkit所提供的AjaxMethod功能和ASP.NET AJAX的PageMethod是一样的，使用非常简单，详细可参考下面的简单示例： AjaxMethodpublicstringPageMethod()return调用了页面后置方法：PageMethod(); functionRequestMethod()Coolite.AjaxMethods.PageMethod(success:function(result)Ext.Msg.alert(返回提示,result););通过Coolite Toolkit提供的Coolie.AjaxMethods.方法名直接调用后置方法。相互之间传递数据（简单文本串,对象,JSON）支持多种格式，这点和ASP.NET AJAX是一样的。除此之外，Coolite Toolkit还提供了更强大的页面方法调用功能，就是他可以调用母版页(MasterPage)和用户自定义控件(UserControl)里的方法。如果要调用母版页的方法，则需要在对应的母版页里提供AjaxMethod方法接口，并为其通过AjaxMethodProxyIDAttribute配置代理生成策略，如所示：AjaxMethodProxyID(IDMode=AjaxMethodProxyIDMode.None)publicpartialclassMyMaster:System.Web.UI.MasterPageAjaxMethodpublicstringPageMethod()return调用了母版页的后置方法：PageMethod();前台页面调用：functionRequestMethod()Coolite.AjaxMethods.PageMethod(success:function(result)Ext.Msg.alert(返回提示,result););如果是调用用户自定义控件里的方法，方式和母版页相差不大，不同的是UserControl需要设置别名才能成功调用。如下示例：AjaxMethodProxyID(IDMode=AjaxMethodProxyIDMode.Alias,Alias=UC)publicpartialclassTimeControl:System.Web.UI.UserControlAjaxMethodpublicstringPageMethod()returnDateTime.Now.ToString();客户端使用别名调用如下：三：ListenersListeners在本文前面就用到过，通过Listeners给Ext按扭添加了一个客户端方法Handler，用得多的也就是他的Click事件，其他的我现在也还没用到，这里小记一下。以后用到了他的其他特性后在补充上来。Coolite Toolkit学习笔记二：服务器端Alert,Confirm,Prompt一：AlertAlert组件最简单的用法就是直接弹出一个消息提示框：protectedvoidButton_Click(objectsender,AjaxEventArgse)Ext.Msg.Alert(标题内容,消息内容).Show();如果我们需要在弹出的提示框点了“确定”以后要执行其他操作怎么办呢？这时候可以使用Alert方法的重载方法，通过JFunction指定一个客户端方法，点了“确定”后就指定相应的客户端JavaScript方法，使用如下：protectedvoidButton_Click(objectsender,AjaxEventArgse)Ext.Msg.Alert(标题内容,消息内容,newJFunctionFn=JsMethod).Show();functionJsMethod()alert(ClientJsMethod);Coolite Toolkit还为Alert提供了四中图标UI效果，他们分别是问题(Question)、警告(Warning)、错误(Error)和信息(Informational)，使用不同的参数将构建出不同的Alert显示风格。使用方法如下：protectedvoidButton_Alert(objectsender,AjaxEventArgse)Ext.Msg.Show(newMessageBox.ConfigTitle=图标提示框,Message=这个框带个图标,Buttons=MessageBox.Button.OK,Icon=MessageBox.Icon.INFO,AnimEl=this.btnAlert.ClientID);图标的取值可以直接通过MessageBox.Icon枚举设置，分别定义有：NONE、ERROR、INFO、QUESTION和WARNING。除了上面的应用外，还可以通过Message.ButtonConfigs来配置Alert的高级应用，比如配置确认对话框，根据不同选择执行不同的AjaxMethod方法（下面代码里的NS为通过ScriptManager指定的客户端名称空间，其功能等同于Coolite.AjaxMethods）。protectedvoidButton_Click(objectsender,AjaxEventArgse)Ext.Msg.Alert(标题内容,消息内容,newMessageBox.ButtonsConfigYes=newMessageBox.ButtonConfigHandler=NS.DoYes(),Text=确定,No=newMessageBox.ButtonConfigHandler=NS.DoNo(),Text=取消).Show();AjaxMethodpublicvoidDoYes()Ext.Msg.Alert(操作提示,你刚刚点了-确定).Show();AjaxMethodpublicvoidDoNo()Ext.Msg.Alert(操作提示,你刚刚点了-取消).Show();注：点了“确定”后直接执行服务端的另一方法没有实现出来，还望实现过的朋友指点，谢谢。二：Confirm上面通过Coolite Toolkit的扩展功能将Alert组件实现了Confirm的效果，其实Confirm自身的功能也是非常强大的，同Alert一样，最简单的使用则是直接弹出确认对话框。protectedvoidButton_Confirm(objectsender,AjaxEventArgse)Ext.Msg.Confirm(操作提示,消息内容).Show();如果要知道是点击了那一个操作按扭，则同样可以通过JFunction指定一个客户端的JavaScript方法用来接收操作结果。protectedvoidButton_Confirm(objectsender,AjaxEventArgse)Ext.Msg.Confirm(操作提示,消息内容,newJFunctionFn=ShowResult).Show();functionShowResult(btn)Ext.Msg.alert(你刚刚点了按扭：+btn);Confirm同样也可以定制根据操作调用AjaxMethod，实现方式和本文前面的Alert实现方式一样。三：PromptPrompt可应用于简单的是数据录入，Coolite Toolkit里的服务端Prompt使用非常简单，同上面Alert和Confirm一样通过JFunction指定客户端方法处理操作结果。protectedvoidButton_Prompt(objectsender,AjaxEventArgse)Ext.Msg.Prompt(数据录入,请在下面录入数据,newJFunctionFn=showResultText).Show();functionshowResultText(button,text)alert(你录入的数据为：+text);以上实现的是单行的Prompt，Coolite Toolkit也提供了多行支持，使用如下：protectedvoidButton_Prompt(objectsender,AjaxEventArgse)Ext.Msg.Show(newMessageBox.ConfigTitle=数据录入,Message=请在下面录入数据：,Width=300,Buttons=MessageBox.Button.OKCANCEL,Multiline=true,AnimEl=this.btnPrompt.ClientID,Fn=newJFunctionFn=showResultText);上图效果主要是通过Ext.Msg.Show()方法，通过该方法还可以定制许多我们需要的UI效果，比如说定制一个进度条效果，其实现为如下代码片段：protectedvoidButton_Wait(objectsender,AjaxEventArgse)Ext.Msg.Show(newMessageBox.ConfigTitle=请等待,Message=系统正在加载，请等待,ProgressText=系统加载中,Width=300,Progress=true,Closable=false,AnimEl=this.btnWait.ClientID);this.StartLongAction();privatevoidStartLongAction()this.SessionTask1=0;ThreadPool.QueueUserWorkItem(LongAction);this.TaskManager1.StartTask(Task1);privatevoidLongAction(objectstate)for(inti=0;i10;i+)Thread.Sleep(1000);this.SessionTask1=i+1;this.Session.Remove(Task1);protectedvoidRefreshProgress(objectsender,AjaxEventArgse)objectprogress=this.SessionTask1;if(progress!=null)Ext.MessageBox.UpdateProgress(int)progress)/10f,);elsethis.TaskManager1.StopTask(Task1);Ext.MessageBox.Hide();this.ScriptManager1.AddScript(ProgressResult(););CodefunctionProgressResult()alert(进度条走完了);Coolite Toolkit学习笔记三：基本控件之Button、TextField、DataField、ComBoxButton、TextField、DataField、ComBox这些控件好象也没什么好学的，任何一个学过ASP.NET的朋友都应该会使用这些控件，Coolite Toolkit里的这些控件相比标准的ASP.NET控件提供了需要特殊的功能，比如DataFiled控件在.NET Framework里则是没有的，这些控件在系统开发中是非常有用的。一、按扭(Button)控件Coolite Toolkit里同样提供有四种Button控件，他们分别是Button、ImageButton、LinkButton和SplitButton。Button在前两篇笔记里都有使用到，这里就简单记录一下，触发同步事件： 使用Listeners为控件添加客户端方法： functiononClientClick()alert(Hello);使用AjaxEvents为控件添加Ajax处理方法： /*/protectedvoidButton3_Click(objectsender,AjaxEventArgse)Ext.Msg.Alert(标题,显示的消息内容).Show();另外还有一个重要的特性就是按扭菜单项，可以给一个按扭添加菜单选项，使用如下： 关于按扭(Button)控件，目前我也就了解了这些，也只用到了这些，更多高级的内容待需要的时候在研究。ImageButton使用得也比较多，通过设置按扭的图片让按扭呈现出不同的风格，不过Coolite Toolkit的ImageButton控件和微软的有些不一样，微软的只能设置一张显示图片，如果要做动态交互效果只能通过样式或脚本程序去控制，Coolite Toolkit却直接提供了对外属性，只需要简单设置就可以完成一个丰富的界面交互效果的按扭，其功能点和ext:Button是一样的，如下所示： SplitButton没感觉到有什么特别之处，可能我学艺未深吧二、TextFiled控件TextFiled控件等同于ASP.NET里的TextBox控件，主要进行文字数据录入或显示，反之就是NumberFiled控件专们用来进行数字录入的。TextFiled控件的使用在简单不过了，这里我想提的是他的几个特性属性:EmptyText属性用来设置或获取显示输入数据提示信息。Note属性用来设置或获取静态描述信息，并可以通过NoteAlign属性设置信息的显示位置。三、DataFiled控件这个控件作用比较大，很多地方都用得到。直接通过其SelectedData属性得到所选择的日期。效果如下：四、ComboBox控件ComboBox控件的基本功能和.NET标准控件的DropDownList控件相同，不同之处在于DropDownList只能选择，不能进行编辑录入，如果用户需要一个既可手工输入又可以选择的功能来做条件筛选，DropDownList则实现不了，Coolite Toolkit正好弥补上了DropDownList的不足。使用方式两者都相差不大，下面是一个简单的示例：另外Coolite Toolkit的ComboxBox还提供了Triggers和Listeners，通过这两个集合可以为ComboBox定制更高级的应用。根据字面意思就可以猜到，一个触发器一个监听器，那么这两者配合能实现什么样的效果呢？先看看下图：上面表示了ComboxBox的三种状态：未输入和未选择状态、下拉选择项状态和选中项后的状态，要实现这个效果就需要用到Triggers和Linteners这两个特性了，详细如下代码片段： 五、其他出了上面所提到的常用控件外，还有如TriggerField、TimeFiled、MultiField、DatePiker等等一系列的控件作用也是非常大的，现在没用到先标记于此，日后需要的时候在研究研究他们的特性功能点。Coolite Toolkit学习笔记四：容器控件之FiledSet、Panel和Window一、FieldSet控件FieldSet控件在开发中使用率还是很高的，毕竟Web中微软没有提供Group控件，通常都是使用FieldSet来进行表单等界面布局分组。在Coolite Toolkit中则专门提供了这样一个控件，同时还为其附加了很多其他的功能属性和方法。日期：Title、Height以及Width这些最基本的属性完全可以不去记忆，Collapsible属性是用来设置FieldSet是可折叠状态。上面代码片段的远行效果如下所示： 二、Panel控件前面分析了FieldSet控件，可以用来做界面布局的分组，以及通过相关属性设置使其成为更为高级的应用操作。FieldSet所具备的这些特性对于Panel来说也是同样具备的。在ASP.NET里也提供得有Panel控件，那么Coolite Toolit所提供的相比ASP.NET里的Panel有什么特色呢？呵呵，特色可多了，请你继续看下面. Panel控件我个人理解就是一个容器控件，不用它我自己随便通过一个html标签然后设置其runat=server一样的可以达到等同的效果。Coolite Toolkit所提供的Panel同样如此，只是他在ASP.NET的Panel基础上扩展了一些常用的功能点，包括动态设值，外嵌其他的Web也面等多项功能。 %-%同FieldSet控件一样直接提供了公开属性设置是否允许折叠。如上html代码片段，在标签里可以放置我们需要在界面上呈现是元素，除此之外它还提供了一个属性(Html)，通过该属性也可以设置其显示内容，如下： ext:PanelID=Panel2runat=serverHeight=100Title=TitleCollapsible=trueWidth=300Html=通过HTML属性设置其显示的内容在使用该控件的时候需要注意，虽然标签和Html属性都可以设置控件所呈现的内容，但是这里有一定的约束，标签和Html属性不能同时使用。通过属性设置其要呈现的内容，控件还提供了属性用来设置其将自动加载的数据(比如一个页面，类似与IFrame的功能)。 protectedvoidPage_load(objectsender,EventArgse)this.Panel3.AutoLoad.Url=;this.Panel3.AutoLoad.NoCache=true;除了上面的实现方式外，也可以通过公开的方法LoadContent()实现动态加载一个页面呈现出来。 protectedvoidPage_load(objectsender,EventArgse)this.Panel3.LoadContent(,true);前面提到iframe，这个东西在我们平时开发中的使用率也是非常高的，Coolite Toolkit那当然也不会遗忘他的存在，对Panel控件也提供了iframe的支持，Panel控件加载一个外部web页面也是可以以iframe的形式呈现的。 protectedvoidPage_load(objectsender,EventArgse)this.Panel3.AutoLoad.Url=;this.Panel3.AutoLoad.Mode=LoadMode.IFrame;this.Panel3.AutoLoad.NoCache=true;同样可以在LoadContent()方法中设置加载模式： this.Panel3.LoadContent(newLoadCo