每一个使用FineUI控件的页面都必须包含一个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）
虽然FineUI希望开发人员尽可能少地编写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() {}
的函数体中。
这其实是FineUI的一个约定，FineUI会在ExtJS以及自身的脚本执行完毕后，查找是否存在onReady函数，如果存在就执行此函数。你可以启用Web.config中的DebugMode，观察生成的页面源代码，在最后你会看到这样的脚本：
占据整个页面的面板 - AutoSizePanelID属性
这是一个你一定不会错过的属性，如果希望某个Panel、Window、Tree、TabStrip、RegionPanel或者Form占据整个页面空间，就需要用到这个属性，还是看看示例站点的写法：
让ASP.NET控件也参与FineUI的AJAX回发 - AjaxAspnetControls属性
我们曾在第一篇文章提到，FineUI的一个设计理念是“用心实现80%的功能”，也就是说肯定会遇到一些FineUI提供的控件无法完成的任务，怎么办？我们只好求助于ASP.NET控件，并且FineUI提供了一种优雅的方式让ASP.NET控件也可以参与AJAX回发过程，这就是AjaxAspnetControls属性。
如果想让某个ASP.NET在页面回发时也更新，可以将其ID放在AjaxAspnetControls属性中，多个控件ID以逗号分隔，具体用法请参见示例页面。
那么，FineUI是怎么做到这一点的呢？
道理其实很简单，FineUI会在AJAX响应时查找生成的HTML片段中的那些ASP.NET控件，拿到ASP.NET生成的HTML并生成更新脚本，如果你用Firebug等调试工具查看一下AJAX请求，能够很清楚的看到如下交互过程：
如果你能理解上面提到的FineUI的工作原理，可以尝试一下这个示例。这个示例主要是考察ASP.NET控件Label和Literal在FineUI的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源代码，再想想FineUI的内部处理过程，你不难发现其中的奥秘。
生成的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>标签，怪不得FineUI不能通过ID值来查找Literal并更新它的HTML值，那么该怎么呢？
对于这种特殊情况，FineUI没有打算费劲周折来让Literal和Label的行为一致，而是提供了一个简单的解决办法（在Literal外面嵌套一层span或者div标签）：
是不是很好玩……
小结
每个页面都需要一个PageManager控件，它提供了页面级别的参数配置，可以用来覆盖Web.config中的配置。不过最常到的可能是AutoSizePanelID属性，用来将面板扩展到整个页面。
下一篇文章我们会介绍最常用到的Button控件，FineUI为Button提供了非常丰富的功能。
扫一扫
145
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
