免费大片黄在线观看,国产成人成人一区二区,国产啪精品视频网站免费尤物

ExtAspNet應(yīng)用技巧（二十一） - Ext4JSLint之整體框架

原創(chuàng)|其它|編輯：郝浩|2009-09-24 09:35:34.000|閱讀 971 次

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

引子

前一段時(shí)間發(fā)了一篇文章，這個(gè)東東也算是我拿ExtAspNet做的第一個(gè)小應(yīng)用。還是有一些應(yīng)用方面的技巧，接下來(lái)的幾篇文章就和大家分享一下。

Ext4JSLint是使用來(lái)展示的結(jié)果。
JSLint-Toolkit是一個(gè)使用Rhino和JSLint的小項(xiàng)目，可以對(duì)一個(gè)文件夾中的所有JavaScript進(jìn)行語(yǔ)法檢查，并顯示友好的檢查結(jié)果。
我曾寫了來(lái)介紹。

界面截圖

整體來(lái)看，整個(gè)頁(yè)面被分成四個(gè)部分：

上面的標(biāo)題欄，以及工具欄
左側(cè)的樹形菜單，顯示有哪些JavaScript文件
中間的Table，顯示某一個(gè)JavaScript文件中找到的錯(cuò)誤列表
右側(cè)的IFrame，用來(lái)顯示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)過(guò)前幾篇文章對(duì)的介紹，相信大家對(duì)這段ASPX標(biāo)簽的聲明并不陌生。

如果你對(duì)這里的標(biāo)簽不熟悉，可以參考這一篇文章：

展開全部與折疊全部

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

我們需要在客戶端使用JavaScript完成這一任務(wù)。
---------------慢，你不是號(hào)稱“No JavaScript”么？
是的，這個(gè)任務(wù)也完全可以回發(fā)頁(yè)面來(lái)更新左側(cè)樹，因?yàn)檎麄€(gè)過(guò)程是AJAX的所以用戶體驗(yàn)也很好。
我們這里只是提供實(shí)現(xiàn)問(wèn)題的另一個(gè)途徑，因?yàn)椴恍枰?wù)器交互時(shí)，JavaScript實(shí)現(xiàn)的效果更好。

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

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

ExtAspNet幫幫忙，我不想寫JavaScript！

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

不想寫JavaScript，而又想實(shí)現(xiàn)在客戶端折疊和展開所有樹的節(jié)點(diǎn)（我可不想因?yàn)檫@個(gè)簡(jiǎn)單的功能來(lái)回發(fā)頁(yè)面），好辦：

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(); 
} 