【Ext.Net學習筆記】02：Ext.Net用法概覽、Ext.Net MessageBus用法、Ext.Net布局

Ext.Net用法概覽

Ext.Net還是很強大，如果運用熟練可以極大的提高編程效率。如果你也要學習Ext.Net，原文博主推薦書籍：《Ext.Net Web 應用程序開發教程》，是英文的，有基礎的可以看下，可以百度到PDF文檔的。

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，新的效果如下（未配置ExtJs皮膚，為默認皮膚）：

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方法，不然界面不會顯示出來，使用開發者工具，會發現有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>

對應的服務器處理方法如下（需要引用，using Ext.Net;）：

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

發布和訂閱消息

Ext.Net MessageBus 的本質是一個消息訂閱機制，ExtJS中沒有這種機制，所以MessageBus的Ext.Net實現的，但并不是原創，這種功能在dojo中早就實現了，可以參見原文博主的博客：Dojo入門：dojo中的事件處理

下面的代碼將演示如何使用 MessageBus 發布和訂閱消息：

<ext:Button runat="server" ID="btn2" Text="發布消息" Handler="fnButtonHandler"></ext:Button>

首先定義了一個按鈕，這個按鈕單擊的時候將會執行fnButtonHandler方法，我們在這個方法中發布消息：

function fnButtonHandler() {    Ext.net.Bus.publish("Custom.Event1", { item: this });}

Ext.net.Bus.publish方法的第一個參數是消息名稱，第二個參數是消息的參數。

接下來我們來訂閱這個消息：

Ext.onReady(function () {    Ext.net.Bus.subscribe("Custom.*", function () {        console.log(arguments);    });});

在onReady事件中，添加對消息Custom.*的訂閱，這里使用了通配符，表示訂閱Custom.開頭的所有消息。

代碼完成以后，我們來刷新頁面，然后點擊按鈕，這個時候控制臺顯示如下（這里用的是火狐瀏覽器，開發者工具是FireBug）：

這是我們通過代碼來實現的消息發布和訂閱，除此之外，Ext.Net還允許通過控件來發布和訂閱消息。

通過控件發布和訂閱消息

我這里通過一個現成的例子來演示：

<ext:Panel ID="Panel1"    runat="server"    Title="MessageBus Event Logger"    Width="400"    Height="300"    AutoScroll="true">    <MessageBusListeners>        <ext:MessageBusListener            Name="App.*"            Handler="this.body.createChild({            html: 'Received event from ' + data.item.id,            tag: 'p'            });" />    </MessageBusListeners>    <Buttons>        <ext:Button ID="Button1" runat="server" Text="Publish event 1">            <Listeners>                <Click BroadcastOnBus="App.event1" />            </Listeners>        </ext:Button>    </Buttons></ext:Panel>

在這段代碼中，我們通過按鈕的click事件來發布消息，控件panel則訂閱了這個消息，效果如下：

點擊前：

點擊后：

服務器端的消息發布和訂閱處理

上面的演示都是在客戶端完成的，接下來這個就厲害了，在服務器端的消息發布和訂閱，請看代碼：

<ext:Button runat="server" ID="btnPublish" Text="消息發布者"    OnDirectClick="btnPublish_DirectClick"></ext:Button><ext:Button runat="server" ID="btnSubscribe" Text="消息訂閱者">    <MessageBusDirectEvents>        <ext:MessageBusDirectEvent            Name="App.*"            OnEvent="subscribe_Event">        </ext:MessageBusDirectEvent>    </MessageBusDirectEvents></ext:Button>

首先是兩個按鈕，一個用來發布消息，一個來訂閱消息。

在消息發布者按鈕中， 我們使用了OnDirectClick事件，這是一個服務器端處理的事件，是Direct Click事件的簡寫。

在訂閱者按鈕中，我們添加了訂閱的相關配置，并通過事件處理方法subscribe_Event來處理訂閱到的消息，服務器端的相應代碼如下：

protected void btnPublish_DirectClick(object sender, Ext.Net.DirectEventArgs e){    Ext.Net.MessageBus.Default.Publish("App.Server");}protected void subscribe_Event(object sender, Ext.Net.DirectEventArgs e){    X.MessageBox.Alert("提示", "接收到來自服務器的消息，消息名稱：" + e.Name).Show();}

重新編譯代碼，然后刷新我們的頁面。當點擊消息發布按鈕時，我們會接收到服務器端的消息：

有心的朋友想想這段代碼的執行過程吧。

1.觸發服務器端的按鈕點擊，在按鈕點擊事件中發布消息，并將消息在客戶端發布

2.客戶端訂閱者按鈕接收到消息的發布

3.訂閱者按鈕將消息發送到服務器端進行處理

Ext.Net MessageBus可以方便的完成消息發布和訂閱機制，并能夠在前臺和后臺代碼中結合使用。

Ext.Net布局

ExtJS中的布局功能很強大，常用的布局有border、accordion、fit、hbox、vbox