原文：Extjs 強大的WEB窗體開發庫

作為一個javascript程序員，必須時刻關注JS的最新發展，想了解JS最新動態，可以關注我們的 Javascript教程網。

最近幾年比較火的前端js框架extjs 算是其中的佼佼者。統一的UI設計，強悍的組件及豐富的插件，對瀏覽器良好的兼容性等優點使得許多公司使用Extjs，同時也使得無數程序猿開始研究這個玩意也包括我在內。廢話不多說，我們來看看extjs和extnet 是什么東東。

用過的extjs 的程序猿，恐怕都有五味雜陳的感受。有時為了一個特殊的功能，不知耗費多少心血。甚至一不小心少寫了括號找了半天，讓人抓狂。當然這里排除那些代碼天才。平心而論extjs開發是有難度的。要用好它，要學的東西真不少。CSS，html，js，服務器腳本語言(php,java,asp.net)。不要以為有js框架就不用關注那些css，html了，等哪天老板說”我要這種功能，這種效果。“??哈哈，就懂了。那么問題來了，怎樣降低這個開發難度呢？就有這個公司搞了個Ext.Net ,再extjs 上狠狠的封裝了一下。有多狠，Ext.net(2.5).dll,居然有125MB。 讓無數開發者仿佛一下子回到了asp.net 拖控件的時代。歷史就是這樣，重復著造輪子。。。

在Extjs窗口這樣寫的：

Ext.create('Ext.window.Window', {

? ? title: 'Hello',

? ? height: 200,

? ? width: 400,

? ? layout: 'fit',

? ? items: {??// Let's put an empty grid in just to illustrate fit layout

? ?? ???xtype: 'grid',

? ?? ???border: false,

? ?? ???columns: [{header: 'World'}],? ?? ?? ?? ?? ???// One header just for show. There's no data,

? ?? ???store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store

? ? }

}).show();

復制代碼

ext.net 是這樣寫的：

<ext:Window
? ?? ?? ?? ?ID="Window1"
? ?? ?? ?? ?runat="server"
? ?? ?? ?? ?Title="Hello World"??
? ?? ?? ?? ?Icon="Application"
? ?? ?? ?? ?Height="185"
? ?? ?? ?? ?Width="350"
? ?? ?? ?? ?BodyStyle="background-color: #fff;"
? ?? ?? ?? ?BodyPadding="5"
? ?? ?? ?? ?Modal="true">
? ?? ?? ?? ?<Content>
? ?? ?? ?? ?? ? This is my first <a target="_blank" href="http://www.ext.net/"> Ext.NET</a> Window.
? ?? ?? ?? ?</Content>
? ?? ???</ext:Window>



在寫代碼上，使用vsIED開發環境Ext.net 有智能提示（通過設置extjs也可以），但是你要是把ext.net屬性設置錯了或者其他錯， 編譯時直接給你個報個錯。不改正確都不行。從這點上來說對程序員來說確實是個福音。

下面來看下注冊事件的區別：extjs 這么寫

Ext.create('Ext.Button', {
? ? text: 'Click me',
? ? renderTo: Ext.getBody(),
? ? handler: function() {//看這里！
? ?? ???alert('You clicked the button!');
? ? }
});

還可用”on()“ 方法注冊事件。Ext.Net 長什么樣呢，如下所示：

<ext:ImageButton
? ?? ???runat="server"
? ?? ???ImageUrl="button.gif"
? ?? ???OverImageUrl="overButton.gif"
? ?? ???DisabledImageUrl="disabled.gif"
? ?? ???PressedImageUrl="pressed.gif">
? ?? ???<DirectEvents>? ?//這里hock 后臺事件
? ?? ?? ?? ?<Click />
? ?? ???</DirectEvents>
? ?? ???<Listeners>
? ?? ?? ?? ?<Click Handler="*這里你可以寫js代碼處理*"/>
? ?? ???</Listeners>
? ? </ext:ImageButton>

這里是后臺代碼

<script runat="server">
? ? protected void Button_Click(object sender, DirectEventArgs e)
? ? {
? ?? ???X.Msg.Alert("Server Time", DateTime.Now.ToLongTimeString()).Show();
? ? }
</script>

事件就簡單到這里，下面說兩者的性能差異。整體上來說，extnet是包裝過的性能肯定有所下降。據自己開發時體會，Ext.net事件交互上本質是使用extjs的DirectEvent，大量的事件交互，導致了許多不必要的服務器請求。這是導致性能不佳一個很重要的原因。而extjs許多處理直接通過前臺js代碼控制，規避了這類問題。

再來介紹下大家比較關心的東西，收不收費？ extjs 是開源的，需要遵守GNU協議的。而extnet用于商業盈利需要收費的。具體的細節的看下他們的說明。

好了簡單介紹到這里吧。具體選擇哪種組件開發，需要結合實際情況慎重考慮。

新的一年，給廣大程序猿一個福利。在 web開發 extjs或者extnet時都不免查看api文檔。查看官方網站時，會發現只要在從天朝訪問外國網站都比較卡，有時還無法訪問。為此博主決定改變一下。查看在線api文檔請點擊這里： http://api movivi cn。為了程序員更好寫代碼，我也是蠻拼的，希望這能夠幫助到你。



總結

以上是生活随笔為你收集整理的Extjs 强大的WEB窗体开发库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。