博客园_三生石上

[原创]ExtAspNet秘密花园（一） — 为什么选择ExtAspNet？

2012-02-11T15:06:00Z

首先来看看ExtAspNet是什么？

ExtAspNet 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果。
ExtAspNet 是为了创建没有 JavaScript，没有 CSS，没有 UpdatePanel，没有 ViewState，没有 WebServices 的网站应用程序。

从这段官方描述中，我们看到了三个信息点：

基于ExtJS。大家都知道ExtJS是一个很绚丽的JavaScript控件库，非常适合进行各种管理系统的开发。但是对于很多开发者而言，写上一堆一堆的JavaScript代码无疑是一个噩梦。
ASP.NET2.0控件库。大家都知道ASP.NET的WebForm开发的最大优点是快速开发，而ViewState则是这种快速开发的基石，使得我们使用C#代码操作页面上控件的任何属性。它的缺点也很明显，在Web2.0的时代每次都是整个页面回发（PostBack）显然过于落伍，并且默认的控件外观过于简陋。由于ExtAspNet是基于ASP.NET2.0的控件库，所以可以自由地应用到DotnetFramework2.0、3.5、4.0的项目中。
ExtAspNet则是将ExtJS和ASP.NET进行深度整合的产物。大量基于JavaScript和CSS却不需要程序员编写JavaScript和CSS；原生的AJAX支持却不需要依赖ASP.NET AJAX的UpdatePanel；快速的ASP.NET开发模式却不需要ViewState的参与。最终ExtAspNet剩下的只是简单的ASP.NET控件。学习ExtAspNet只需要你有ASP.NET的开发基础，不需要事先学习ExtJS，因为ExtAspNet是一个深度封装的控件库。

最终，我们可以给出如下一个简单的公式：

ExtAspNet控件库 = 绚丽的ExtJS界面 + 快速的ASP.NET开发 + 简单的代码编写

ExtAspNet的设计理念

一切为了简单。

ExtAspNet最初的设计目的就是让ASP.NET开发人员在不需要了解JavaScript和ExtJS的情况下快速开发出漂亮的Web2.0应用。因此每个控件的编写都尽量符合ASP.NET的开发习惯，从控件和属性的命名到复杂的AJAX交互，都让传统的ASP.NET开发人员感到很舒服，这也是ExtAspNet经过四年的风雨历程仍然深受广大开发者喜爱的原因。

用心实现80%的功能。

ExtAspNet最初是项目驱动的管理系统的开发，因此控件的开发优先级都是服务于项目的需要，对常见的80%的功能进行精雕细琢的设计开发，并独创了很多服务于实际需求的功能，比如原生的AJAX支持、轻量级的数据传输以及基于IFrame的页面框架。因此ExtAspNet不会追求对ExtJS进行完全的封装，但是会在80%的常见功能上进行细致入微的设计和思考。

创新所以独一无二。

ExtAspNet能够在高手如林的ASP.NET控件库领域拥有一席之地，靠的不是漂亮的脸蛋或者复杂的功能，而是简单而实用的创新。正如前文提到的那样，原生的AJAX支持使得ASP.NET开发人员根本没有意识到自己开发的程序是Web2.0的无刷新风格，因为编写的代码和传统的ASP.NET代码几乎一样；轻量级的数据传输完全抛弃了不适合AJAX的ViewState，而是自创了XState进行数据传输，从而减少网络流量；基于IFrame的页面框架更是给开发人员一个分而治之的设计模式，弹出窗体不在局限于IFrame框框中。

为什么选择ExtAspNet？

1. 快速的项目开发

基于您熟悉的 C# 和 ASP.NET 2.0 开发模式，不需要 JavaScript 代码就能完成真正的 Web 2.0 应用。不仅能够极大的减少开发时间和降低开发成本，而且方面维护升级。

2. 基于现有的ASP.NET知识

虽然 ExtAspNet 是基于 ExtJS的控件库，但是不需要你事先了解 ExtJS 的知识，因为 ExtAspNet 完全按照 ASP.NET 的命名习惯和开发流程完成，你甚至会发现有些控件的属性，方法和事件和原生的 ASP.NET 控件一模一样。

3. 丰富的控件库

超过 50 个专业的 ASP.NET 控件，不仅帮助您快速实现业务逻辑，而且让页面更加生动和华丽。

4. 跨浏览器支持

ExtAspNet 使用 C# 替代传统的 JavaScript 开发，不仅提高了开发效率，而且确保在所有主流的浏览器下流畅运行。

5. 多皮肤支持

ExtAspNet 不仅内置 3 种不同风格的界面皮肤，而且允许您自定义自己的皮肤，满足项目的个性化需求。

6. 页面无刷新

所有的页面回发都不会导致整个页面重新渲染，而只有部分页面得到更新。而这个 AJAX 过程对开发人员完全透明，您可以向往常一样在服务器端改变控件属性，而这个修改会直接反映更新到前台页面，而不需要任何额外的代码。

7. 轻量级的数据传输

ViewSate 是 WebForm 开发模式的基石，带来便利的同时也增大了数据传输。 ExtAspNet 独创的 XState 实现，不仅保留便利而且极大的减少了数据的传输量。

8. 丰富的示例教程

超过 100 个示例和丰富的教程让你全面掌握 ExtAspNet 的各种用法。

9. 全中文支持

从实例教程，到BBS论坛，再到QQ群，全程中文社区，让你再无语言障碍。

10. 开源免费

ExtAspNet 可以免费应用于任何非商业或者商业性的项目，采用对商业应用友好的Apache License 2.0协议。

ExtAspNet与ExtJS，ExtNet，ExtJsExtender的区别？

ExtJS是纯JavaScript的控件库，所以适用于后台为PHP，ASP.NET或者JSP的项目，并且是ExtAspNet和其他库的基础。

ExtNet是国外一家公司开发的基于ExtJS的ASP.NET控件库，从功能上讲比较完善，不过开发模型相对复杂，如果你喜欢ExtNet的开发风格或者需要使用ASP.NET MVC，可以尝试这个控件库。

ExtJsExtender是一个比较早的基于ExtJS的ASP.NET控件库，但是功能过于简陋，长期没有更新，并且对ASP.NET AJAX有依赖。

ExtAspNet是一组基于ExtJS的ASP.NET控件库，也是本系列文章的主角。最大的优点就是简单实用。基于ASP.NET2.0，项目中只需要引用一个ExtAspNet的DLL，没有其他依赖。还要注意ExtAspNet只适合WebForm的项目，不适合ASP.NET MVC的项目。

ExtAspNet的许可协议

从ExtAspNet v3.1.0开始，ExtAspNet采用对商业应用友好的Apache License 2.0。参考这篇文章

注：

ExtAspNet v3.1.0之前的版本使用的是GPL v2授权协议。
ExtAspNet授权协议仅适用于ExtAspNet应用程序本身。
由于ExtAspNet是基于ExtJS的应用，所以如果您在商业应用中使用了ExtAspNet，请向ExtJS官方购买商业授权。

ExtAspNet社区交流

示例：http://extasp.net/

论坛：http://bbs.extasp.net/

开源：http://extaspnet.codeplex.com/

博客：http://sanshi.cnblogs.com/

小组：http://home.cnblogs.com/group/extaspnet/

你也可以从博客中查找ExtAspNet的QQ交流群。

注：本系列文章由三生石上原创，博客园首发，转载请注明出处。如果你喜欢本系列文章，请一定不要忘记推荐本文或者关注博主。

《ExtAspNet秘密花园》系列文章目录

本文链接

不仅开源，而且对企业应用完全免费！ExtAspNet弃用GPL v2，拥抱Apache License 2.0

2012-02-11T12:05:00Z

提出问题

ExtAspNet开源以来，一直坚持开源免费的原则，但是其GPL v2的协议也让有些开发者感到为难，比如有人提到这个问题：http://www.cnblogs.com/sanshi/archive/2012/02/05/2339242.html

为了进一步明确ExtAspNet开源免费的原则（不仅是对个人开发者开源免费，而且对企业商业应用开源免费），我们查阅了ExtJS的授权协议，并且对比了各种不同的开源协议，最终选择了Apache License 2.0，也为您以后的商业应用免除后顾之忧。

分析问题

首先来看ExtJS的授权协议：

ExtJS Open Source License

Sencha is an avid supporter of open source software. Our open source license is the appropriate option if you are creating an open source application under a license compatible with the GNU GPL license v3. Although the GPLv3 has many terms, the most important is that you must provide the source code of your application to your users so they can be free to modify your application for their own needs.

也就是说，基于ExtJS的开源应用可以使用兼容GPL v3的开源协议，我们查阅了相关文档，发现有很多对商业应用友好的协议：




GNU Lesser General Public License (LGPL) version 3: This is the latest version of the LGPL: a free software license, but not a strong copyleft license, because it permits linking with non-free modules. It is compatible with GPLv3. We recommend it for special circumstances only.

Apache License, Version 2.0: This is a free software license, compatible with version 3 of the GPL.

Modified BSD license: This is the original BSD license, modified by removal of the advertising clause. It is a simple, permissive non-copyleft free software license, compatible with the GNU GPL.

Mozilla Public License (MPL) version 2.0: This is a free software license. Section 3.3 provides indirect compatibility between this license and the GNU GPL version 2.0, the GNU LGPL version 2.1, the GNU AGPL version 3.0, and all later versions of those licenses.

到底该选择哪个呢？关于这几种协议的对比，有一些中文文档：文档一，文档二

这几种协议中，我比较熟悉的还是Apache License 2.0，因为我们身边的很多应用都是使用的Apache License 2.0，比如Http Server、Tomcat、Maven、Subversion、Structs、Hadoop，我们来看看其中文的简单定义：

Apache Licence 2.0

Apache Licence是著名的非盈利开源组织Apache采用的协议。该协议和BSD类似，同样鼓励代码共享和尊重原作者的著作权，同样允许代码修改，再发布（作为开源或商业软件）。需要满足的条件也和BSD类似：

需要给代码的用户一份Apache Licence

如果你修改了代码，需要再被修改的文件中说明。

在延伸的代码中（修改和有源代码衍生的代码中）需要带有原来代码中的协议，商标，专利声明和其他原来作者规定需要包含的说明。

如果再发布的产品中包含一个Notice文件，则在Notice文件中需要带有Apache Licence。你可以在Notice中增加自己的许可，但不可以表现为对Apache Licence构成更改。

Apache Licence也是对商业应用友好的许可。使用者也可以在需要的时候修改代码来满足需要并作为开源或商业产品发布/销售。

到底该选择哪一种呢？一时还拿不定主意。

解决问题

后来，无意中发现的一篇文章（英文版）让我坚定了使用Apache License 2.0的决心。

我们来看下这组数据：

开源开发者首选的授权协议：

1.     GPL (68.9%)
2.     Apache License (7.6%)
3.     LGPL (6.7%)
4.     BSD License (5.3%)
5.     MIT License (4.1%)

被下载最多的开源项目：

1.     Apache License (32.7%)
2.     LGPL (21.0%)
3.     GPL (14.4%)
4.     BSD License (3.8%)
5.     MIT License (1.6%)

企业应用使用最多的授权协议

1.     Apache License (15.3%)
2.     MIT License (10.8%)
3.     BSD License (10.5%)
4.     GPL (9.5%)
5.     LGPL (8.9%)

此时已经很明朗了，ExtAspNet的应用场景大部分都是企业内管理系统，所以选择被企业使用最多的授权协议无疑是明智的选择，这才有了今天的这个决定：

从ExtAspNet v3.1.0开始，ExtAspNet将使用对商业应用友好的Apache License 2.0

ExtAspNet授权协议

注意：

ExtAspNet授权协议仅适用于ExtAspNet应用程序本身。
由于ExtAspNet是基于ExtJS的应用，所以如果您在商业应用中使用了ExtAspNet，请向ExtJS官方购买商业授权。

喜欢ExtAspNet，快来加入官方交流论坛：http://bbs.extasp.net/

本文链接

ExtAspNet官方示例网站和官方论坛速度归来！

2012-02-10T14:31:00Z

鉴于广大网友的强烈要求，ExtAspNet的官方示例网站和官方论坛速度归来：

官方示例：http://extasp.net/

官方论坛：http://bbs.extasp.net/

这次将服务器移到了国内，所以速度大大提升，我这边的访问速度基本维持在4s之内，不知道你们那边的怎么样？

虽然ExtAspNet现在已经有8个QQ群了（总人数在2000人左右），并且每天都有很多用户涌向这些群，但是QQ群有个致命弱点，那就是每个QQ群都有人数限制，导致信息过于分散，很多问题在各个QQ群被重复提及，因此一个无人数限制的论坛也是广大网友一直以来的心愿。

之前虽然也有官方论坛，但是由于服务器在国外，导致速度极慢经常抽风，也形同虚设。

这次，我们特意将服务器移回国内，速度也极大地提升，希望这次的官方论坛能够成为广大ExtAspNet爱好者交流学习的乐园。

再次，我们诚挚地邀请您加入ExtAspNet官方论坛，为ExtAspNet的发展壮大贡献自己的一份力量：

http://bbs.extasp.net/

注：为了防止水文泛滥，官方论坛只能通过QQ账号登陆，这样也免除了大家重新注册账号的麻烦。

本文链接

ExtAspNet v3.0.1

2012-02-05T12:08:00Z

这是一个小版本更新，主要修正IE7，IE8下得兼容性问题。欢迎大家将使用中发现的问题以文章评论的形式反馈给我，我会尽可能快地更新版本。

========================

ExtAspNet - 基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果

ExtAspNet 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果。
ExtAspNet 是为了创建没有 JavaScript，没有 CSS，没有 UpdatePanel，没有 ViewState，没有 WebServices 的网站应用程序。

支持的浏览器: IE 7.0+, Firefox 3.6+, Chrome 3.0+, Opera 10.5+, Safari 3.0+

开源：http://extaspnet.codeplex.com/
博客：http://sanshi.cnblogs.com/
邮箱: sanshi.ustc@gmail.com

发布历史：

+2012-02-05 v3.0.1
   -修正IE7、IE8的兼容性问题（dotnet试验田）。
   -修正BUG - 弹出层如果我点击右上角的关闭按钮，再打开就不能打开（用情）。
   -修正上传控件在IE7下的问题（yfen）。

本文链接

[原创]ExtAspNet秘密花园（五） — 功能强大的按钮

2012-02-05T03:40:00Z

曾经最普普通通的按钮，在ExtAspNet中摇身一变，法力无边，下面就来看看你曾经最熟悉的按钮？

按钮的状态与大小

按钮有启用/禁用，按下/正常几种状态，对应的属性分别为Enabled、EnablePress、Pressed三个属性。显示效果如图所示：

按钮有大中小三个尺寸，对应的属性为Size，显示效果如下所示：

按钮上的图标

按钮上的图标可以通过Icon（枚举类型，ExtAspNet内置了很多图标）或者IconUrl两个属性来指定，图标的位置可以位于文本的上下左右四个位置，通过IconAlign属性来指定。

对于不显示文字的按钮，只需要指定Icon或者IconUrl属性，而不用指定Text属性即可。

按钮的点击事件

默认按钮的点击会触发一次AJAX的回发，典型的代码示例如下：

<ext:Button ID="btnServerClick" Text="服务器端事件" OnClick="btnServerClick_Click" runat="server">
</ext:Button>

protected void btnServerClick_Click(object sender, EventArgs e)
{
    // 事件处理
}

如果希望在客户端通过JavaScript代码来处理按钮的点击事件，需要设置EnablePostBack和OnClientClick两个属性，典型的代码如下所示：

<ext:Button ID="btnClientClick" Text="客户端事件" OnClientClick="alert('这是客户端事件');" EnablePostBack="false" runat="server">
</ext:Button>

有时，我们希望在服务器端通过C#代码注册客户端的事件脚本，典型代码如下所示：

<ext:Button ID="btnClientClick2" Text="服务器端生成的客户端事件" EnablePostBack="false" runat="server">
</ext:Button>

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        btnClientClick2.OnClientClick = Alert.GetShowInTopReference("这是在服务器端生成的客户端事件");
    }
}

按钮点击事件的一个隐藏特性

在使用ASP.NET的按钮编程时，我们经常需要额外处理一个情况：防止按钮的重复提交！

而这个特性已经内置在ExtAspNet的按钮中，并且公开了一个属性DisableControlBeforePostBack（默认已经启用这个功能），是不是很方便，ExtAspNet的细腻之处很多都体现在这些非常实用的功能上，后面你会在Grid、DropDownList、Window等很多控件上看到类似的手笔。

ExtAspNet是怎么做到这一点的呢？

道理也非常简单，在Web.config中打开DebugMode参数，然后查看页面的HTML源代码，你会发现如下的脚本：

在AJAX的响应正文，会再次启用这个按钮：

客户端验证表单

按钮的一个主要用途是提交表单，以前我们或许要写一堆JavaScript代码了验证每个表单控件，然后在点击按钮回发之前弹出错误提示框。在ExtAspNet的应用场景中，我们只需要为每个控件设置验证规则，然后设置按钮需要验证哪个表单或者哪些表单，这是通过ValidateForms属性来实现的。

如果需要验证多个表单，只需要将这些表单的ID以逗号分隔的形式设置到ValidateForms属性即可。可以查看这个示例页面。

<ext:Button ID="btnSubmitAll" Text="验证两个表单并提交" runat="server" OnClick="btnSubmitAll_Click" ValidateForms="extForm1,extForm2" />

在客户端验证失败时，会显示如下的提示框，并阻止本次表单提交：

如果你采用类似示例站点的IFrame框架结构，一定不要错过另一个属性ValidateTarget，它指定了错误提示框显示的位置，可以是本页面也可以是父页面。

带有菜单的按钮

按钮也可以拥有自己的菜单，这个示例的效果图如下所示：

ASPX页面的标签也非常干净利落:

   1:  <ext:Button ID="btnMenu" Text="中国科学技术大学" EnablePostBack="false" runat="server">

   2:      <Menu>

   3:          <ext:MenuHyperLink runat="server" Icon="TagGreen" Target="_blank" NavigateUrl="http://scms.ustc.edu.cn/"

   4:              Text="化学与材料科学学院">

   5:          </ext:MenuHyperLink>

   6:          <ext:MenuHyperLink runat="server" Icon="TagBlue" Target="_blank" NavigateUrl="http://business.ustc.edu.cn/zh_CN/"

   7:              Text="管理学院">

   8:              <Menu>

   9:                  <ext:MenuHyperLink runat="server" Icon="TagPink" Target="_blank" NavigateUrl="http://is.ustc.edu.cn/"

  10:                      Text="工商管理系">

  11:                  </ext:MenuHyperLink>

  12:                  <ext:MenuHyperLink runat="server" Icon="TagPurple" Target="_blank" NavigateUrl="http://stat.ustc.edu.cn/"

  13:                      Text="统计与金融系">

  14:                  </ext:MenuHyperLink>

  15:              </Menu>

  16:          </ext:MenuHyperLink>

  17:      </Menu>

  18:  </ext:Button>

工具栏中的按钮

按钮不仅可以单独使用，在表单中作为提交按钮，当放在工具栏中时，它摇身一变成了一个工具栏项。这样我们不仅可以设置按钮工具栏项的状态、添加点击事件、验证表单，而且还可以添加菜单，如下所示：

ASPX页面标签如下：

   1:  <ext:Panel ShowBorder="true" BodyPadding="5px" Height="300px" Width="450px" ShowHeader="false"

   2:      runat="server">

   3:      <Toolbars>

   4:          <ext:Toolbar runat="server">

   5:              <Items>

   6:                  <ext:ToolbarText runat="server" Text="内联项：">

   7:                  </ext:ToolbarText>

   8:                  <ext:ToolbarSeparator runat="server">

   9:                  </ext:ToolbarSeparator>

  10:                  <ext:Button EnablePostBack="false" Text="中国科学技术大学" runat="server">

  11:                      <Menu>

  12:                          <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://scms.ustc.edu.cn/"

  13:                              Text="化学与材料科学学院">

  14:                          </ext:MenuHyperLink>

  15:                          <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://business.ustc.edu.cn/zh_CN/"

  16:                              Text="管理学院">

  17:                              <Menu>

  18:                                  <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://is.ustc.edu.cn/"

  19:                                      Text="工商管理系">

  20:                                  </ext:MenuHyperLink>

  21:                                  <ext:MenuHyperLink runat="server" Target="_blank" NavigateUrl="http://stat.ustc.edu.cn/"

  22:                                      Text="统计与金融系">

  23:                                  </ext:MenuHyperLink>

  24:                              </Menu>

  25:                          </ext:MenuHyperLink>

  26:                      </Menu>

  27:                  </ext:Button>

  28:              </Items>

  29:          </ext:Toolbar>

  30:      </Toolbars>

  31:  </ext:Panel>

点击按钮前的确认对话框

如果我们希望在点击按钮的时候首先弹出确认对话框（类似于JavaScript的window.confirm），在征得用户的同意后再触发按钮的默认行为，该怎么办？

ExtAspNet也考虑到了这种需求，特意提供了如下几个属性：ConfirmText/ConfirmTitle/ConfirmIcon/ConfirmTarget

一个典型的应用是在数据展示表格的工具栏中，放置一个写着“删除选中项”的按钮，用来删除表格中选中的项。为了防止用户误操作，我们一般需要首先提醒用户这个操作是不可恢复的操作，是否确认删除。此时按钮的这些属性就派上用场了，请看这个示例。

小结

这一篇文章没有涉及很多应用技巧，不过介绍的知识都很实用，如果你打算或者正在使用ExtAspNet，一定不要错过按钮的这些功能。

下一篇文章我们会对ExtAspNet中基本的表单控件进行简单的学习。

注：本系列文章由三生石上原创，博客园首发，转载请注明出处。如果你喜欢本系列文章，请一定不要忘记推荐本文或者关注博主。

《ExtAspNet秘密花园》系列文章目录

本文链接

[原创]ExtAspNet秘密花园（四） — 每个页面需要一个PageManager

2012-02-04T03:16:00Z

每一个使用ExtAspNet控件的页面都必须包含一个PageManager控件，我们可以把PageManager控件看做页面级别的参数配置（相对于Web.config站点级别的参数配置）。

页面级别的参数配置

Theme: 控件主题，目前支持三种主题风格（blue/gray/access，默认值：blue）
Language: 控件语言（en/zh_CN/zh_TW/...，默认值：zh_CN）
FormMessageTarget: 表单字段错误提示信息的显示位置（side/qtip，默认值：side）
FormOffsetRight: 表单字段右侧距离边界的宽度（默认值：20px）
FormLabelWidth: 表单字段标签的宽度（默认值：100px）
FormLabelSeparator: 表单字段标签与内容的分隔符（默认值："："）
EnableAjax: 是否启用AJAX（默认值：true）
AjaxTimeout: AJAX超时时间（单位：秒，默认值：60s）
EnableBigFont: 是否启用大字体，将ExtJS默认11px的字体全部改为12px，否则显示的中文字体太小（默认值：false）

上面这些参数和Web.config中的一样，只不过作用域在页面范围内，覆盖Web.config中的同名配置。

还有一些其他配置属性：

EnablePageLoading：是否启用页面第一次加载提示，默认为居中显示的加载图标（默认值：true）
EnableAjaxLoading：是否启用AJAX加载提示，默认为位于页面上方的文字提示（默认值：true）
ExecuteOnReadyWhenPostBack：是否在每次页面回发时都执行onReady脚本（默认值：true）

虽然ExtAspNet希望开发人员尽可能少地编写JavaScript脚本，但有时恰到好处的脚本可以起到事半功倍的效果，比如示例站点就引入了一个外部的default.js来处理用户点击左侧菜单的事件和地址栏#之后的片段：

   1:  <html>

   2:  <body>

   3:      <form>

   4:      </form>

   5:      <script src="./js/default.js" type="text/javascript"></script>

   6:  </body>

   7:  </html>

而default.js中的所有代码都放在一个 functiononReady() {}

的函数体中。

这其实是ExtAspNet的一个约定，ExtAspNet会在ExtJS以及自身的脚本执行完毕后，查找是否存在onReady函数，如果存在就执行此函数。你可以启用Web.config中的DebugMode，观察生成的页面源代码，在最后你会看到这样的脚本：

占据整个页面的面板 - AutoSizePanelID属性

这是一个你一定不会错过的属性，如果希望某个Panel、Window、Tree、TabStrip、RegionPanel或者Form占据整个页面空间，就需要用到这个属性，还是看看示例站点的写法：

让ASP.NET控件也参与ExtAspNet的AJAX回发 - AjaxAspnetControls属性

我们曾在第一篇文章提到，ExtAspNet的一个设计理念是“用心实现80%的功能”，也就是说肯定会遇到一些ExtAspNet提供的控件无法完成的任务，怎么办？我们只好求助于ASP.NET控件，并且ExtAspNet提供了一种优雅的方式让ASP.NET控件也可以参与AJAX回发过程，这就是AjaxAspnetControls属性。

如果想让某个ASP.NET在页面回发时也更新，可以将其ID放在AjaxAspnetControls属性中，多个控件ID以逗号分隔，具体用法请参见示例页面。

那么，ExtAspNet是怎么做到这一点的呢？

道理其实很简单，ExtAspNet会在AJAX响应时查找生成的HTML片段中的那些ASP.NET控件，拿到ASP.NET生成的HTML并生成更新脚本，如果你用Firebug等调试工具查看一下AJAX请求，能够很清楚的看到如下交互过程：

如果你能理解上面提到的ExtAspNet的工作原理，可以尝试一下这个示例。这个示例主要是考察ASP.NET控件Label和Literal在ExtAspNet的AJAX交互过程中的区别，先来看看代码：

   1:  <ext:PageManager ID="PageManager1" AjaxAspnetControls="Label1,Literal1" runat="server" />

   2:  <asp:Label ID="Label1" Text="Label1" runat="server"></asp:Label>

   3:  <br />

   4:  <asp:Literal ID="Literal1" Text="Literal1" runat="server"></asp:Literal>

   5:  <br />

   6:  <ext:Button ID="Button1" runat="server" Text="更新上面几个文本值" OnClick="Button1_Click">

   7:  </ext:Button>

   1:  protected void Button1_Click(object sender, EventArgs e)

   2:  {

   3:      Label1.Text = "Label1 - " + DateTime.Now.ToLongTimeString();

   4:      Literal1.Text = "Literal1 - " + DateTime.Now.ToLongTimeString();

   5:  }

如果只看这段代码，我们可能会想当然地以为asp:Label和asp:Literal在点击按钮时都被更新了，实际情况却不是这样：

为什么只有Label1的值得到更新，而Literal1没有得到更新，看看生成的HTML源代码，再想想ExtAspNet的内部处理过程，你不难发现其中的奥秘。

生成的HTML源代码：

   1:  <span id="Label1">Label1</span>

   2:  <br />

   3:   Literal1

   4:  <br />

   5:  <div id="Button1_wrapper"></div>

原来asp:Label和asp:Literal生成的HTML代码的格式是不同的，asp:Literal生成的HTML代码没有外部的<span>标签，怪不得ExtAspNet不能通过ID值来查找Literal并更新它的HTML值，那么该怎么呢？

对于这种特殊情况，ExtAspNet没有打算费劲周折来弥补这种缺陷，而是提供了一个简单的解决办法：

是不是很好玩……

小结

每个页面都需要一个PageManager控件，它提供了页面级别的参数配置，可以用来覆盖Web.config中的配置。不过最常到的可能是AutoSizePanelID属性，用来将面板扩展到整个页面。

下一篇文章我们会介绍最常用到的Button控件，ExtAspNet为Button提供了非常丰富的功能。

注：本系列文章由三生石上原创，博客园首发，转载请注明出处。如果你喜欢本系列文章，请一定不要忘记推荐本文或者关注博主。

《ExtAspNet秘密花园》系列文章目录

本文链接

[原创]ExtAspNet新春贺岁版 - 文件上传控件、复选框列表控件、完善布局管理、表格的行扩展列、完整的100多个中文示例、30多处BUG修正与功能增强、《ExtAspNet秘密花园》系列文章

2012-01-28T12:19:00Z

ExtAspNet 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库，拥有完善的 AJAX 支持和丰富的界面效果。
ExtAspNet 是为了创建没有 JavaScript，没有 CSS，没有 UpdatePanel，没有 ViewState，没有 WebServices 的网站应用程序。

从2008年4月开始，ExtAspNet一直在默默地坚持，有过骄傲，有过彷徨，但从未放弃。龙年伊始，我们迎来了ExtAspNet的一个重要更新——V3.0。

V3.0包含很多重要的更新，分别列举如下：

姗姗来迟的文件上传控件

虽然之前可以通过ASP.NET的FileUpload控件来实现同样的功能，但是有两个问题也一直困扰着广大的热心网友：

1. 文件上传框风格和整个页面风格不搭配。 2. 上传时是整个页面回发，和ExtAspNet默认的AJAX风格也不搭。

这次新增的FileUpload控件完美地解决了这两个问题，并且实现代码非常简单：

   1:  <ext:SimpleForm ID="SimpleForm1" BodyPadding="5px" runat="server" EnableBackgroundColor="true"

   2:      ShowBorder="True" Title="表单" Width="350px" ShowHeader="True">

   3:      <Items>

   4:          <ext:TextBox runat="server" Label="用户名" ID="tbxUseraName" Required="true" ShowRedStar="true">

   5:          </ext:TextBox>

   6:          <ext:FileUpload runat="server" ID="filePhoto" EmptyText="请选择一张照片" Label="个人头像" Required="true"

   7:              ShowRedStar="true">

   8:          </ext:FileUpload>

   9:          <ext:Button ID="btnSubmit" runat="server" OnClick="btnSubmit_Click" ValidateForms="SimpleForm1"

  10:              Text="提交">

  11:          </ext:Button>

  12:      </Items>

  13:  </ext:SimpleForm>

   1:  protected void btnSubmit_Click(object sender, EventArgs e)

   2:  {

   3:      string fileName = DateTime.Now.Ticks.ToString() + "_" + filePhoto.FileName;

   4:      if (filePhoto.HasFile)

   5:      {

   6:          filePhoto.SaveAs(Server.MapPath("~/upload/" + fileName));

   7:      }

   8:  }

复选框列表控件

复选框列表控件的使用和单选框列表控件的用法类似，不过V3.0版本增加了必选项客户端验证和竖排复选框的功能。

完善的布局管理

ExtAspNet新增了Table、HBox和VBox三种布局，从而拥有了ExtJS全部的布局管理。这将大大方便开发人员对页面上的控件进行有效地管理。

Table布局：

HBox布局：

VBox布局：

表格的行扩展列

一个看似复杂的功能，对开发人员确实非常简单，只需要向原来的TemplateField增加一个RenderAsRowExpander即可。

完整的100多个中文示例

ExtAspNet的V3.0对全部的示例进行中文化重构，让你不再有语言的烦恼。

30多处BUG修正与功能增强

这里列出ExtAspNet的V3.0完整的更新列表：

+2012-01-28 v3.0
    -修正 TwinTriggerBox 控件输入值后回车出错的问题(李渝川)。
    +Tree 控件增强。
        -Tree 控件增加 EnableIcons 属性。
        -Tree 控件的 AutoLeafIdentification 属性默认为 true（这是常用属性，不应该每次都设置）。
        -Tree 控件增加 SelectedNodeIDArray 属性。
        -简化 TreeNode 的内部结构，现在不需要写 Nodes 节点（土豆丝）。
    +Web.config 增强。
        -为 Web.config 中的 ExtAspNet 配置节增加 EnableBigFont 配置项，适合于显示中文字体（最小字体由11px改为12px）。
        -为 Web.config 中的 ExtAspNet 配置节增加 DebugMode 属性，用于在 ASPX 生成的 HTML 源代码中显示格式化后的 ExtJS 代码，方便调试（vazumi）。
        -为 Web.config 中的 ExtAspNet 配置节增加 FormLabelSeparator 属性，同时 SimpleForm 和 From 控件增加 LabelSeparator 属性。
    -LabelWidth的默认值改为100px，与extjs保持一致（以前默认是80px）。
    +Button 控件增强。
        -修正 Button 设置图标后，CssClass 不起作用的问题。
        -Button 增加 IconAlign 属性。
        -为 Button 增加 Size 属性，可以设置按钮的大小。
    +表单控件增强。
        -HtmlEditor 控件增加 EnableChineseFont 属性，默认为 true（土豆丝）。
        -修正位于表单外面的 CheckBox 控件自动回发时的 JavaScript 错误。
        -表单字段增加 ShowEmptyLabel 属性（默认为 false），用来控制是否显示空白标签（示例在 /basic/login_captcha.aspx）。
        -为 Label HyperLink LinkButton 增加 Tooltip ToolTipTitle ToolTipAutoHide 三个属性，用来显示提示信息。
        -为 HyperLink LinkButton 增加 EncodeText 属性。
        -为 TextArea 增加 AutoGrowHeightMin 属性。
        -为 HyperLinkField 添加属性 DataNavigateUrlFieldsEncode，用来编码地址栏URL。
    -修正 Window 的 ESC 按键事件处理和关闭按钮事件处理不一致的情况（sa）。
    -简化客户端应用内置图标的方式，以前需要这样的代码 <%= IconHelper.GetIconUrl(Icon.Reload) %>（依然有效），现在直接 res.axd?icon=Reload 就可以了（土豆丝）。
    +修正TabStrip以及Window的内容高度异常的问题：AutoWidth和AutoHeight默认为false，ExtAspNet不会默认渲染这个值，除非手工指定。
        -这是extjs3.4引入的特性，如果组件的autoHeight为true，则浏览器会根据组件的内容管理其高度，手工调用setHeight没有效果。
        -典型的案例，如果设置Window的AutoHeight为true，在不能最大化和改变窗体的大小。
    -修正首页打开后不能默认选中左侧第三级树节点的问题。
    +增加FileUpload控件，并增加示例页面form/fileupload.aspx。
        -修正使用文件上传控件后，返回的结果中出现HTML编码问题。
    +Grid控件增强。
        -为 WindowField 和 LinkButtonField 字段增加 Icon 和 IconUrl 两个属性（efrigate43）。
        -为全部表格列字段增加 ToolTip 属性，同时原来的 DataTooltipField 改名为 DataToolTipField。
        -增加示例 grid/grid_centercolumn.aspx，使某列居中显示。
        -为 TemplateField 增加 RenderAsRowExpander 属性，用来显示行扩展。增加示例 /grid/grid_rowexpander.aspx。
    +为所有控件增加 Ajax 属性 CssClass 和 CssStyle（goansonpan）。
        -增加示例 other/cssstyle.aspx。
    -示例工程，在切换示例时同时修改地址栏，以便页面刷新后也能回到最后一次浏览的页面。
    -增加 Table、HBox 和 VBox三种布局，并对所有布局示例进行重构。
    +单选框控件增强。
        -为 RadioButtonList 增加 ColumnVertical、Required 和 RequiredMessage 三个属性。
    -增加 CheckBoxList 控件，并增加示例 /form/checkboxlist.aspx。
    -增加示例 /aspnet/aspnet_literal.aspx。
    +将Button和MenuItem的Menus属性改为Menu属性，毕竟一个按钮只可能有一个菜单，这样也简化了ASPX中的标签。
        -同时更新/button/button_menu.aspx和/other/menu_dynamic.aspx两个示例。

《ExtAspNet秘密花园》系列文章

在未来的3个月，我会在博客园逐步发布《ExtAspNet秘密花园》系列文章，预计在30篇以上，敬请关注我的博客。

ExtAspNet秘密花园（一） — 为什么选择ExtAspNet？
ExtAspNet秘密花园（二） — 一切从头开始
ExtAspNet秘密花园（三） — 深入Web.config
ExtAspNet秘密花园（四） — 每个页面都需要一个PageManager
ExtAspNet秘密花园（五） — 功能强大的按钮
ExtAspNet秘密花园（六） — 常用的表单控件
ExtAspNet秘密花园（七） — 姗姗来迟的上传控件
ExtAspNet秘密花园（八） — 下拉列表控件
ExtAspNet秘密花园（九） — 表单控件的客户端验证
……

ExtAspNet交流社区

示例：http://extasp.net/
论坛：http://bbs.extasp.net/
开源：http://extaspnet.codeplex.com/
博客：http://sanshi.cnblogs.com/
小组：http://home.cnblogs.com/group/extaspnet/

QQ交流群:

ExtAspNet技术交流群1：158028499(已满)，100人，创始人：sanshi
ExtAspNet技术交流群2：111870015(已满)，200人，创始人：爱淘课
ExtAspNet技术交流群3：102333298(已满)，200人，创始人：爱淘课
ExtAspNet技术交流群4：123899180(已满)，200人，创始人：爱淘课
ExtAspNet技术交流群5：105052447(已满)，500人，创始人：╰☆阿波◆罗
ExtAspNet技术交流群6：124527804(已满)，200人，创始人：爱淘课
ExtAspNet技术交流群7：161370746(已满)，200人，创始人：真心小騙子
ExtAspNet技术交流群8：166649916(未满)，200人，创始人：AT

也欢迎广大热心网友为ExtAspNet贡献QQ技术交流群。

如果你喜欢ExtAspNet，请推荐这篇文件或者关注博主，以便更多的网友了解和熟悉ExtAspNet，谢谢！

==========================================================

鉴于广大网友的强烈要求，ExtAspNet的官方示例网站和官方论坛速度归来：

官方示例：http://extasp.net/

官方论坛：http://bbs.extasp.net/

这次将服务器移到了国内，所以速度大大提升，我这边的访问速度基本维持在4s之内，不知道你们那边的怎么样？

虽然ExtAspNet现在已经有8个QQ群了（总人数在2000人左右），并且每天都有很多用户涌向这些群，但是QQ群有个致命弱点，那就是每个 QQ群都有人数限制，导致信息过于分散，很多问题在各个QQ群被重复提及，因此一个无人数限制的论坛也是广大网友一直以来的心愿。

之前虽然也有官方论坛，但是由于服务器在国外，导致速度极慢经常抽风，也形同虚设。

这次，我们特意将服务器移回国内，速度也极大地提升，希望这次的官方论坛能够成为广大ExtAspNet爱好者交流学习的乐园。

再次，我们诚挚地邀请您加入ExtAspNet官方论坛，为ExtAspNet的发展壮大贡献自己的一份力量：

http://bbs.extasp.net/

注：为了防止水文泛滥，官方论坛只能通过QQ账号登陆，这样也免除了大家重新注册账号的麻烦。

本文链接

ExtAspNet更新计划

2012-01-28T08:32:00Z

【2012-1-28更新】

计划在近期发布V3.0。
不再维护extasp.net和bbs.extasp.net网站，国外主机速度太不给力，国内的主机价格太给力。
将在博客园发布《ExtAspNet秘密花园》系列文章，预计会有30多篇文章，三个月内连载完毕。
V3.0的主要更新包括：全中文的示例站点，增加上传控件、复选框列表、完善的布局管理，以及30多个的BUG修正或功能增强。
希望热心网友继续贡献QQ交流群，目前有8个ExtAspNet技术交流群，只有一个未满。

本文链接

[原创][开源]跨浏览器的JavaScript性能检测工具 - 至于你信不信，我反正信了

2011-08-02T15:58:00Z

提出问题

如果识别出页面中JavaScript函数的性能问题，在不同浏览器下有不同的测试工具：

Firefox下使用Firebug的Profile工具
Chrome下使用内置的Profile工具
IE9下也有Profile工具

虽然大家的功能一个比一个炫，但是始终解决不了两个问题：

如何只检测指定命名空间下的函数性能，否则会产生大堆的无用数据。
不能跨浏览器使用，没有统一的参照物。同时不同工具之间还有一定差异的背景噪音影响。

还有一点就是仍然占据主流的IE7和IE8没有内置的JavaScript性能检测工具。

寻求解决方案

首先在网上找到的一篇文章是John Resig在2008年6月发表的一篇文章，是够古老的了，不过还是非常有借鉴意义，它的输入结果如下所示：

我们来看一下它的核心代码，这段代码用来处理jQuery.fn下的所有函数：

for (var method in jQuery.fn)(function (method) {
    if (method == "init") return;

    var old = jQuery.fn[method];

    jQuery.fn[method] = function () {
        if (!internal && curEvent) {
            internal = true;
            var m = curEvent.methods[curEvent.methods.length] = {
                name: method,
                inLength: this.length,
                args: formatArgs(arguments)
            };
            var start = (new Date).getTime();
            var ret = old.apply(this, arguments);
            m.duration = (new Date).getTime() - start;

            if (curEvent.event == "inline") curEvent.duration += m.duration;

            if (ret && ret.jquery) m.outLength = ret.length;
            internal = false;
            return ret;
        } else {
            return old.apply(this, arguments);
        }
    };
})(method);

从这段代码中，我们看到如下一些步骤：

将需要处理的函数备份起来：var old = jQuery.fn[method];
使用一个新的函数覆盖此函数：jQuery.fn[method] = function () {
在新函数内，调用备份的原始函数，并在调用前后添加计时代码，以确定本次调用这个原始函数的时间：

var start = (new Date).getTime(); var ret = old.apply(this, arguments); m.duration = (new Date).getTime() - start;

有了这个核心概念，我们可以写个自己的JavaScript的Profile功能，而不仅仅是局限于检测jQuery代码，我们要让用户自己指定要检测的JavaScript命名空间！

我的开源实现

我的开源实现：http://code.google.com/p/jprofile/

它的最大特点：

可以指定测试的命名空间
可以跨浏览器使用

使用起来非常方便，只需要如下几个步骤：

在页面的最后引入jprofile.js。（这也是安装jprofile开源解决方案的全部步骤！）
打开页面，可以看到右上角的那个Enable jProfile按钮：
点击那个按钮，会弹出一个对话框，输入你要检测的命名空间，比如"jQuery"：
点击确定，页面会自动刷新，并显示jProfile工具条。点击Display按钮显示结果：

跨浏览器测试jQueryUI

下面就让我们使用jProfile测试一下jQueryUI首页JavaScript的性能，以下是测试数据。你可以自己试一下，在线示例地址。

Firefox
IE7
IE8

这是个跨浏览器JavaScript性能检测的奇迹，至于你信不信，我反正信了。

本文链接

[翻译]OAuth入门指南 - 2. 协议工作流

2011-06-17T15:33:00Z

作者：Eran Hammer-Lahav

译者：三生石上

原文：Beginner's Guide to OAuth – Part II : Protocol Workflow

声明：此中文翻译由三生石上独立完成，博客园首发，转载请注明出处。

通过实际的案例学习OAuth有助于加深理解。规范文档的附录A中包含了一个类似的示例，只不过它聚焦HTTP请求响应的结构。这里对这个典型的OAuth会话应用重新进行演示，并从用户、消费者和服务提供商的角度看待问题。文中提到的网站和人员都是虚构的。不过提到的苏格兰人名是真的。我们的故事是这样开始的…

Jane刚结束她的苏格兰之旅。她花了2周的时间在Islay岛上欣赏美景。当她回到家里，Jane想和朋友们分享一些她在旅行中的照片。Jane使用Faji，一个照片分享网站，来分享旅途中的照片。她登录faji.com的帐号，上传了2张照片并把它们标记为私有的。

在OAuth的术语中，Jane是一个用户，而Faji是服务提供商。Jane上传的2张照片是受保护的资源。

Jane和一些在线的朋友分享了她的照片，之后她还想把照片拿给她的祖母看。她不想和其他人分享她的苏格兰之旅。但是祖母不会上网，因此Jane决定打印一些照片并把这些照片邮寄给她的祖母。Jane选择了Beppa（一个界面友好的在线照片打印服务商）来打印这些照片。

在OAuth的术语中，Beppa是一个消费者。由于Jane把这些照片设为私有资源，Beppa在打印前必须通过OAuth来获取对这些照片的访问权限。

Jane访问beppa.com网站，开始下订单。Beppa支持从很多照片分享网站导入照片，包括Faji。Jane选择照片来源并点击继续按钮。

当Beppa添加对Faji的照片导入支持时，Beppa开发人员（在OAuth中称为Consumer Developer）从Faji获得了一个Consumer Key和一个Consumer Secret，这些信息用来配合Faji的OAuth API使用。

Jane点击继续按钮的时候， Beppa和Faji之间在后台发生了一件重要的事情。Beppa向Faji请求一个Request Token。此时，Request Token是不含用户信息的，之后用户可以授权Beppa使用此信息访问她的私有照片。

Jane点击继续按钮，然后等待她的屏幕发生变化。等待页面加载的过程中，她悠闲地喝了一小口Black Bowmore（一种威士忌）。

当Beppa接收到Request Token，它把Jane重定向到Faji的OAuth用户认证页面，请求中包含了Request Token信息以及在获得用户授权Faji之后返回的页面地址http://beppa.com/order。

Jane已经被重定向到Faji页面，并请求登录网站。OAuth要求服务提供商首先认证用户，然后请求他们将资源授权给消费者。

通过查看地址栏的URL，Jane注意到她被带到了Faji页面，她输入了用户名和密码登录Faji网站。

OAuth允许Jane不公开用户名和密码，无需和Beppa或者其他任何网站分享用户名和密码。Jane也没有在beppa.com输入登录凭证。

成功登录Faji后，Jane被询问是否授权给消费者Beppa。Faji会提示Jane是谁在请求访问权限（本例中是Beppa）以及需要哪些访问权限。Jane可以批准或者拒绝这个请求。

Jane确认Beppa只有有限的访问权限。她不想Beppa修改她的照片或者对它们进行其他操作。她也注意到这是一次性的授权，并且只在接下来的1个小时内有效，这个时间足够Beppa获取她的照片了。

一旦Jane批准了这个请求，Faji就标识这个Request Token已经被Jane授权。Jane的浏览器会被重定向到Beppa的页面http://beppa.com/order，此页面地址之前和Request Token一道作为请求信息传递。这就告诉Beppa可以继续获取Jane的照片了。

Jane等待Beppa显示从Faji帐号中获取的照片。

在Jane等待的时候，Beppa使用认证过的Request Token来换取Access Token。Request Token仅仅用来获取用户的批准，而Access Token可以用来访问受保护的资源（在这个例子中是Jane的照片）。所以第一个请求，Beppa使用Request Token换取了Access Token，第二个请求（可能是多次请求，一个用来获取照片列表，其他的用来获取每张照片的详细信息）用来获取照片。

当Beppa完成的时候，Jane的浏览器会刷新以完成订单。

Beppa成功的获取了Jane的照片。照片以缩略图的形式呈现出来，供Jane挑选出来打印。

Jane对于Beppa不需要她的用户名密码就能获取她的照片的行为印象深刻。她很喜欢这一切，并高兴地完成了打印照片的订单。

====

HTML版本 PDF版本

本文链接