您的位置:首页 > 编程语言 > ASP

ExtAspNet秘密花园(四) — 每个页面需要一个PageManager

2012-03-02 16:11 459 查看



每一个使用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中用的都是ajax机制,所以在extaspnet和aspnet标签混用的时候有两种方式,第一个是用PageManage中的EnableAjax="fasle"关闭ajax,另外一种就是文中所说的将asp的ID放入AjaxAspnetControls中 特此备用
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐