Ext.Net學習筆記02：Ext.Net用法概覽

這兩天越來越覺得Ext.Net很強大，如果運用熟練可以極大的提高編程效率。如果你也要學習Ext.Net，推薦你看一下《Ext.Net Web 應用程序開發教程》。

上一篇介紹了如何在ASP.NET WebForm中使用Ext.Net，這一篇將介紹我今天的學習心得，看看Ext.Net的概覽。

Ext.Net與ExtJS代碼比較

上一篇中我們創建了一個使用Ext.Net創建了一個window窗口，代碼非常簡單：

<ext:Window runat="server"
    ID="win"
    Title="示例窗口"
    Width="300"
    Height="200"
    AutoShow="true">
</ext:Window>

如果我們使用ExtJS代碼來創建這個窗口，代碼會是什么樣的呢？請看下面：

Ext.create("Ext.window.Window", {
    id:"win2",
    title: "示例窗口2",
    height: 200,
    width: 300,
    autoShow: true
});

看這兩段代碼是不是很像，Ext.Net只是將ExtJS的配置屬性進行了封裝，作為空間的屬性，可以在Visual Studio中進行非常友好的智能提示，效率提升不止一倍啊。

另外，Ext.Net還支持控件的嵌套定義，跟ExtJS中的items配置項、buttons配置項一樣，請看下面的代碼：

<ext:Window runat="server"
    ID="win"
    Title="示例窗口"
    Width="300"
    Height="200"
    Layout="FitLayout"
    AutoShow="true">
    <Items>
        <ext:FormPanel runat="server" ID="extForm" BodyPadding="5">
            <Items>
                <ext:TextField runat="server" ID="txtName" FieldLabel="姓名"></ext:TextField>
                <ext:NumberField runat="server" ID="txtAge" FieldLabel="年齡"></ext:NumberField>
            </Items>
            <Buttons>
                <ext:Button runat="server" ID="btnSave"
                    Icon="DatabaseSave" Text="保存">
                </ext:Button>
            </Buttons>
        </ext:FormPanel>
    </Items>
</ext:Window>

這仍然是我們的window，新的效果如下：

很酷吧，接下來我們一起看看它的事件機制。

Ext.Net的事件處理

Ext.Net中的事件分為客戶端事件和服務器端事件，客戶端事件需要頁面中JS來處理，服務器端事件則會無刷新的提交給服務器，在服務器處理完成並將結果顯示在頁面中。

拿我們上面窗口中的保存按鈕為例，我們來介紹一下如何處理客戶端事件。

客戶端事件處理

首先，我們來添加一個客戶端的單擊事件：

<ext:Button runat="server" ID="btnSave"
    Icon="DatabaseSave" Text="保存">
    <Listeners>
        <Click Handler="Ext.MessageBox.alert('提示', '保存按鈕被單擊')" />
    </Listeners>
</ext:Button>

跟ExtJS中的寫法一樣，使用listeners來添加事件。當我們在Listeners標簽中輸入左尖括號以后，visual studio 會提示我們所有可用的事件：

這種編程方式實在是太快了，效率完全可以達到ExtJS熟練的水平（題外話，套用一句廣告詞：根本停不下來……）。

Handler 屬性保存一段JS代碼，如果要添加一個處理方法，則需要使用Fn屬性：

<ext:Button runat="server" ID="btnSave"
    Icon="DatabaseSave" Text="保存">
    <Listeners>
        <Click Fn="fnSave" />
    </Listeners>
</ext:Button>

注意，使用Fn屬性的時候，需要確保我們的頁面中已經定義了fnSave方法：

function fnSave() {
    //此處添加保存的處理邏輯
    Ext.MessageBox.alert('提示', '保存按鈕被單擊')
}

此處只使用了click事件，完整是事件列表可以參考ExtJS API文檔。

 

服務器端事件處理

既然使用了Ext.Net服務器控件，恐怕大家更希望使用服務器端事件吧。Ext.Net服務器事件需要在DirectEvents中定義，它是Ext.Net獨有的。DirectEvents將被回發到服務器進行處理，並將處理結果展示在頁面中（如果有更新頁面的話）。

來看一下DirectEvents

<ext:Button runat="server" ID="btnSave"
    Icon="DatabaseSave" Text="保存">
    <DirectEvents>
        <Click OnEvent="btnSave_DirectClick"></Click>
    </DirectEvents>
</ext:Button>

對應的服務器處理方法如下：

protected void btnSave_DirectClick(object sender, DirectEventArgs e)
{
    X.MessageBox.Alert("提示", "保存按鈕被單擊").Show();
}

如果我們需要在執行服務器端處理的時候顯示遮罩層，可以在Click中添加配置節點：

<ext:Button runat="server" ID="btnSave"
    Icon="DatabaseSave" Text="保存">
    <DirectEvents>
        <Click OnEvent="btnSave_DirectClick">
            <

EventMask ShowMask="true" Msg

="正在加載..." />
        </Click>
    </DirectEvents>
</ext:Button>

另外，Ext.Net Direct Events還可以傳遞自定義參數：

<ext:Button runat="server" ID="btnSave"
    Icon="DatabaseSave" Text="保存">
    <DirectEvents>
        <Click OnEvent="btnSave_DirectClick">
            <ExtraParams>
                <

ext:Parameter Name="param1" Value

="自定義參數值" />
            </ExtraParams>
            <EventMask ShowMask="true" Msg="正在加載..." />
        </Click>
    </DirectEvents>
</ext:Button>

在服務器端的處理方法中，我們可以輕易的獲取到這個參數值：

protected void btnSave_DirectClick(object sender, DirectEventArgs e)
{
    

string param1 = e.ExtraParams["param1"

];
    X.MessageBox.Alert("提示", "保存按鈕被單擊，傳入的參數值：" + param1).Show();
}

Ext.Net中的DirectEvents所支持的事件類型同樣可以參考ExtJS的API文檔。

另外Ext.Net還有一個自定義的MessageBus機制，今天還沒有吃透，明天繼續！