ExtAspNet应用技巧（二十一） - Ext4JSLint之整体框架

引子

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


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


界面截图




整体来看，整个页面被分成四个部分：

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

ASPX标签定义

    <ext:PageManager AutoSizePanelID="BorderLayout1" runat="server"></ext:PageManager>
    <ext:BorderLayout ID="BorderLayout1" ShowBorder="false" runat="server">
        <Regions>
            <ext:Region ID="Region1" Height="60px" ShowBorder="false" ShowHeader="false"
                Position="Top" Layout="Fit" runat="server">
                <Toolbars>
                    <ext:Toolbar ID="Toolbar1" Position="Bottom" runat="server">
                        <Items>
                            <ext:Button ID="btnExpandAll" IconUrl="~/images/expand-all.gif" Text="Expand All"
                                EnablePostBack="false" runat="server">
                            </ext:Button>
                            <ext:Button ID="btnCollapseAll" IconUrl="~/images/collapse-all.gif" Text="Collapse All"
                                EnablePostBack="false" runat="server">
                            </ext:Button>
                            <ext:ToolbarSeparator ID="ToolbarSeparator1" runat="server">
                            </ext:ToolbarSeparator>
                            <ext:Button ID="btnCriticalErrors" IconUrl="~/images/exclamation.png" Text="Only Critical Errors"
                                OnClick="btnCriticalErrors_Click" EnablePress="true" runat="server">
                            </ext:Button>
                        </Items>
                    </ext:Toolbar>
                </Toolbars>
                <Items>
                    <ext:ContentPanel ShowBorder="false" ShowHeader="false" BodyStyle="background-color:#1C3E7E;"
                        ID="ContentPanel1" runat="server">
                        <div style="font-size: 20px; color:White; font-weight:bold; padding: 3px 10px; ">
                            <a href="./default.aspx" style="color:White;">Ext4JSLint</a>
                        </div>
                    </ext:ContentPanel>
                </Items>
            </ext:Region>
            <ext:Region ID="regionLeft" Split="true" Width="200px" ShowHeader="false" EnableCollapse="true"
                Layout="Fit" Position="Left" runat="server">
                <Items>
                    <ext:Tree runat="server" ID="Tree1" ShowBorder="false" ShowHeader="false" AutoScroll="true"
                        EnableArrows="true" OnNodeCommand="Tree1_NodeCommand">
                    </ext:Tree>
                </Items>
            </ext:Region>
            <ext:Region ID="regionCenter" ShowHeader="false" Position="Center" Layout="Fit" runat="server">
                <Items>
                    <ext:Grid ID="Grid1" runat="server" ShowBorder="false" ShowHeader="false" EnableCheckBoxSelect="false"
                        EnableRowNumber="false" EnableMultiSelect="false" OnRowDataBound="Grid1_RowDataBound"
                        OnPreRowDataBound="Grid1_PreRowDataBound" Title="Grid">
                        <Columns>
                            <ext:BoundField DataField="line" Width="45px" HeaderText="Line" />
                            <ext:BoundField DataField="reason" ExpandUnusedSpace="true" HeaderText="Reason" />
                        </Columns>
                    </ext:Grid>
                </Items>
            </ext:Region>
            <ext:Region ID="regionRight" ShowHeader="false" Split="true" IFrameUrl="./source.htm"
                EnableIFrame="true" IFrameName="main" Position="Right" Width="400px" runat="server">
            </ext:Region>
        </Regions>
    </ext:BorderLayout>
    

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

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



展开全部与折叠全部

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

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

来看下JavaScript的定义：

    function onReady() {
        expandCollapseTree();
    }
    function expandCollapseTree() {
        var tree = Ext.getCmp("<%= Tree1.ClientID %>");
        var btnExpandAll = Ext.getCmp("<%= btnExpandAll.ClientID %>");
        btnExpandAll.on("click", function() {
            tree.expandAll();
        });
        var btnCollapseAll = Ext.getCmp("<%= btnCollapseAll.ClientID %>");
        btnCollapseAll.on("click", function() {
            tree.collapseAll();
        });
    }
    

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



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


ExtAspNet帮帮忙，我不想写JavaScript！

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


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

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadData(true);
        }
    }
    private void LoadData(bool showAllErrors)
    {
        btnExpandAll.OnClientClick = Tree1.GetExpandAllNodesReference();
        btnCollapseAll.OnClientClick = Tree1.GetCollapseAllNodesReference();
    }
    

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

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



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


下载全部源代码