Coolite Toolkit的布局篇.docVIP

Coolite Toolkit的布局篇 日期：2010-10-14 作者：/worldxa Coolite Toolkit是一个基于AJAX技术的ASP.NET的第三方控件，功能丰富，集成度高，可以用它来替换相应的系统控件。 但要学好Coolite Toolkit的使用也不是件容易的事，如果不用DIV+CSS方式和Table方式进行控件的布局就很困难，如果没有一定的基础，很难把握它的布局技巧，在此笔者就谈谈如何用Coolite Toolkit进行布局。 先了解几个单词：Layout、Panel、Field，这几个单词应该要好好理解，如果没有理解清楚，那就不好用Coolite Toolkit进行布局了。Layout的本意就有布局的意思，比较好理解，这类控件是把它包含的内容按行优先进行布局。Panel是板、面板的意思，这类控件是容器类控件，它可以包含多个控件。Field有域的意思，就好像是一块块区域。 Layout类控件：AnchorLayout、FitLayout、FormLayout等。 Panel类控件：TabPanel、Panel、FormPanel等。 Field类控件：MultiField、TimeField等。 其中比较经常使用的是FormLayout、FormPanel、MultiField控件，FitLayout控件内只能包含一个控件，至于具体用法请教参考相关文档。 本篇文档以注册页面为例子介绍怎样用Coolite Toolkit控件进行布局，注册页面如下： 看到如上的界面，应该有不少读者会用Table方式布局进行实现，Table方式确实是很容易实现如上的效果，如果一定要用Coolite Toolkit控件进行实现，那就不容易了。 在这里，读者应该也看到了笔者是用Window控件实现一个总体框架。容器类控件，如Window、Panel、FormPanel等控件内都有定义Body和Buttons标记，按钮部分（注册、取消）放在Buttons标记内，其他控件放入Body标记内即可,使用方法如下： Body /Body Buttons /Buttons FormLayout控件的布局方式是按行优先的原则，它有个Anchor标记，可以有多个Anchor标记，一对Anchor标记就可以把它的父控件分成上下两部分，用法如下： ext:Anchor /ext:Anchor MultiField控件的布局方式是按列优先的原则，它有个Fileds标记，可以有多个Fields标记，一对Fields标记就可以把它的父控件分成左右两部分，用法如下： Fields /Fields 通过这几个控件的正确使用可以设计出复杂的界面来。 下面是注册页面的前台页面代码（版本：Visual Studio 2008,Coolite Toolkit 8.0版）： %@ Page Language=C# AutoEventWireup=true CodeFile=Default.aspx.cs Inherits=_Default % %@ Register Assembly=Coolite.Ext.Web Namespace=Coolite.Ext.Web TagPrefix=ext % !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlns=/1999/xhtml head runat=server title注册页布局示例/title style type=text/css .star { color: Red; } /style /head body form id=form1 runat=server div ext:ScriptManager ID=ScriptManager1 runat=server /ext:ScriptManager ext:Window runat=server Width=530 Height=350 ShowOnLoad=true Title=注册新用户 ButtonAlign=Center BodyStyle=background-color:#ffffff; padding-top:20px; Resizable=false Body ext:FormLayout runat=server H