ExtAspNet应用技巧(二十一) - Ext4JSLint之整体框架

原创|其它|编辑:郝浩|2009-09-24 09:35:34.000|阅读 967 次

概述:前一段时间发了一篇文章基于ExtAspNet的开源项目 - Ext4JSLint,这个东东也算是我拿ExtAspNet做的第一个小应用。还是有一些应用方面的技巧,接下来的几篇文章就和大家分享一下。

# 界面/图表报表/文档/IDE等千款热门软控件火热销售中 >>

引子

前一段时间发了一篇文章基于ExtAspNet的开源项目 - Ext4JSLint,这个东东也算是我拿ExtAspNet做的第一个小应用。还是有一些应用方面的技巧,接下来的几篇文章就和大家分享一下。


Ext4JSLint是使用ExtAspNet来展示JSLint-Toolkit的结果。
JSLint-Toolkit是一个使用Rhino和JSLint的小项目,可以对一个文件夹中的所有JavaScript进行语法检查,并显示友好的检查结果。
我曾写了一篇文章来介绍JSLint-Toolkit


界面截图




整体来看,整个页面被分成四个部分:

  • 上面的标题栏,以及工具栏
  • 左侧的树形菜单,显示有哪些JavaScript文件
  • 中间的Table,显示某一个JavaScript文件中找到的错误列表
  • 右侧的IFrame,用来显示JavaScript源代码




ASPX标签定义

01.<ext:PageManager AutoSizePanelID="BorderLayout1" runat="server"></ext:PageManager>
02.<ext:BorderLayout ID="BorderLayout1" ShowBorder="false" runat="server">
03.    <Regions>
04.        <ext:Region ID="Region1" Height="60px" ShowBorder="false" ShowHeader="false"
05.            Position="Top" Layout="Fit" runat="server">
06.            <Toolbars>
07.                <ext:Toolbar ID="Toolbar1" Position="Bottom" runat="server">
08.                    <Items>
09.                        <ext:Button ID="btnExpandAll" IconUrl="~/images/expand-all.gif" Text="Expand All"
10.                            EnablePostBack="false" runat="server">
11.                        </ext:Button>
12.                        <ext:Button ID="btnCollapseAll" IconUrl="~/images/collapse-all.gif" Text="Collapse All"
13.                            EnablePostBack="false" runat="server">
14.                        </ext:Button>
15.                        <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server">
16.                        </ext:ToolbarSeparator>
17.                        <ext:Button ID="btnCriticalErrors" IconUrl="~/images/exclamation.png" Text="Only Critical Errors"
18.                            OnClick="btnCriticalErrors_Click" EnablePress="true" runat="server">
19.                        </ext:Button>
20.                    </Items>
21.                </ext:Toolbar>
22.            </Toolbars>
23.            <Items>
24.                <ext:ContentPanel ShowBorder="false" ShowHeader="false" BodyStyle="background-color:#1C3E7E;"
25.                    ID="ContentPanel1" runat="server">
26.                    <div style="font-size: 20px; color:White; font-weight:bold; padding: 3px 10px; ">
27.                        <a href="./default.aspx" style="color:White;">Ext4JSLint</a>
28.                    </div>
29.                </ext:ContentPanel>
30.            </Items>
31.        </ext:Region>
32.        <ext:Region ID="regionLeft" Split="true" Width="200px" ShowHeader="false" EnableCollapse="true"
33.            Layout="Fit" Position="Left" runat="server">
34.            <Items>
35.                <ext:Tree runat="server" ID="Tree1" ShowBorder="false" ShowHeader="false" AutoScroll="true"
36.                    EnableArrows="true" OnNodeCommand="Tree1_NodeCommand">
37.                </ext:Tree>
38.            </Items>
39.        </ext:Region>
40.        <ext:Region ID="regionCenter" ShowHeader="false" Position="Center" Layout="Fit" runat="server">
41.            <Items>
42.                <ext:Grid ID="Grid1" runat="server" ShowBorder="false" ShowHeader="false" EnableCheckBoxSelect="false"
43.                    EnableRowNumber="false" EnableMultiSelect="false" OnRowDataBound="Grid1_RowDataBound"
44.                    OnPreRowDataBound="Grid1_PreRowDataBound" Title="Grid">
45.                    <Columns>
46.                        <ext:BoundField DataField="line" Width="45px" HeaderText="Line" />
47.                        <ext:BoundField DataField="reason" ExpandUnusedSpace="true" HeaderText="Reason" />
48.                    </Columns>
49.                </ext:Grid>
50.            </Items>
51.        </ext:Region>
52.        <ext:Region ID="regionRight" ShowHeader="false" Split="true" IFrameUrl="./source.htm"
53.            EnableIFrame="true" IFrameName="main" Position="Right" Width="400px" runat="server">
54.        </ext:Region>
55.    </Regions>
56.</ext:BorderLayout>



经过前几篇文章对AppBox的介绍,相信大家对这段ASPX标签的声明并不陌生。

如果你对这里的标签不熟悉,可以参考这一篇文章: ExtAspNet应用技巧(十三) - 后台主页面(IFrame框架)



展开全部与折叠全部

在以上标签声明中,大家应该注意到btnExpandAll和btnCollapseAll两个按钮都定义了属性EnablePostBack="false",也就是说点击这两个按钮不会产生PostBack事件。

我们需要在客户端使用JavaScript完成这一任务。
---------------慢,你不是号称“No JavaScript”么?
是的,这个任务也完全可以回发页面来更新左侧树,因为整个过程是AJAX的所以用户体验也很好。
我们这里只是提供实现问题的另一个途径,因为不需要服务器交互时,JavaScript实现的效果更好。

来看下JavaScript的定义:

01.function onReady() {
02.    expandCollapseTree();
03.}
04.function expandCollapseTree() {
05.    var tree = Ext.getCmp("<%= Tree1.ClientID %>");
06.    var btnExpandAll = Ext.getCmp("<%= btnExpandAll.ClientID %>");
07.    btnExpandAll.on("click", function() {
08.        tree.expandAll();
09.    });
10.    var btnCollapseAll = Ext.getCmp("<%= btnCollapseAll.ClientID %>");
11.    btnCollapseAll.on("click", function() {
12.        tree.collapseAll();
13.    });
14.}



其中onReady函数是ExtAspNet的一个命名约定,以这个名称命名的函数会在页面加载完成后执行,我们可以看到页面源代码中有相关定义:



Ext.getCmp函数是extjs中定义的,用于由节点ID获取此节点表示的extjs组件,同样expandAll和collapseAll是树示例的方法,这也是在extjs中定义的。


ExtAspNet帮帮忙,我不想写JavaScript!

------No Problem!
注:这一小节的内容需要ExtAspNet版本大于 v2.1.1,目前可以从SVN下载最新版本并编译。


不想写JavaScript,而又想实现在客户端折叠和展开所有树的节点(我可不想因为这个简单的功能来回发页面),好办:

01.protected void Page_Load(object sender, EventArgs e)
02.{
03.    if (!IsPostBack)
04.    {
05.        LoadData(true);
06.    }
07.}
08.private void LoadData(bool showAllErrors)
09.{
10.    btnExpandAll.OnClientClick = Tree1.GetExpandAllNodesReference();
11.    btnCollapseAll.OnClientClick = Tree1.GetCollapseAllNodesReference();
12.}


是不是很简单,两句C#代码就把那么长一段JavaScript搞定。

其实这并不神秘,只是ExtAspNet帮你完成了手工写JavaScript代码的任务,看下HTML源代码你就明白了:



下一章将讲述怎么由JSON文件生成左侧树控件。


下载全部源代码


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@evget.com

文章转载自:博客园

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP