引子

前一段時間發(fā)了一篇文章基于ExtAspNet的開源項目 - Ext4JSLint，這個東東也算是我拿ExtAspNet做的第一個小應(yīng)用。還是有一些應(yīng)用方面的技巧，接下來的幾篇文章就和大家分享一下。


Ext4JSLint是使用ExtAspNet來展示JSLint-Toolkit的結(jié)果。
JSLint-Toolkit是一個使用Rhino和JSLint的小項目，可以對一個文件夾中的所有JavaScript進(jìn)行語法檢查，并顯示友好的檢查結(jié)果。
我曾寫了一篇文章來介紹JSLint-Toolkit。


界面截圖




整體來看，整個頁面被分成四個部分：

• 上面的標(biāo)題欄，以及工具欄
• 左側(cè)的樹形菜單，顯示有哪些JavaScript文件
• 中間的Table，顯示某一個JavaScript文件中找到的錯誤列表
• 右側(cè)的IFrame，用來顯示JavaScript源代碼

ASPX標(biāo)簽定義

    <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>
    

經(jīng)過前幾篇文章對AppBox的介紹，相信大家對這段ASPX標(biāo)簽的聲明并不陌生。

如果你對這里的標(biāo)簽不熟悉，可以參考這一篇文章： ExtAspNet應(yīng)用技巧（十三） - 后臺主頁面（IFrame框架）



展開全部與折疊全部

在以上標(biāo)簽聲明中，大家應(yīng)該注意到btnExpandAll和btnCollapseAll兩個按鈕都定義了屬性EnablePostBack="false"，也就是說點擊這兩個按鈕不會產(chǎn)生PostBack事件。

我們需要在客戶端使用JavaScript完成這一任務(wù)。
---------------慢，你不是號稱“No JavaScript”么？
是的，這個任務(wù)也完全可以回發(fā)頁面來更新左側(cè)樹，因為整個過程是AJAX的所以用戶體驗也很好。
我們這里只是提供實現(xiàn)問題的另一個途徑，因為不需要服務(wù)器交互時，JavaScript實現(xiàn)的效果更好。

來看下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函數(shù)是ExtAspNet的一個命名約定，以這個名稱命名的函數(shù)會在頁面加載完成后執(zhí)行，我們可以看到頁面源代碼中有相關(guān)定義：



Ext.getCmp函數(shù)是extjs中定義的，用于由節(jié)點ID獲取此節(jié)點表示的extjs組件，同樣expandAll和collapseAll是樹示例的方法，這也是在extjs中定義的。


ExtAspNet幫幫忙，我不想寫JavaScript！

------No Problem!
注：這一小節(jié)的內(nèi)容需要ExtAspNet版本大于 v2.1.1，目前可以從SVN下載最新版本并編譯。


不想寫JavaScript，而又想實現(xiàn)在客戶端折疊和展開所有樹的節(jié)點（我可不想因為這個簡單的功能來回發(fā)頁面），好辦：

    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代碼的任務(wù)，看下HTML源代碼你就明白了：



下一章將講述怎么由JSON文件生成左側(cè)樹控件。


下載全部源代碼

• 框架
• asp