包含實用extjs100例的詞條

本文目錄一覽：

• 1、extjs實用開發指南
• 2、extjs怎麼獲取後台的數據或者是變量。。。求大神速回？
• 3、ExtJS是什麼，一位學長說的，對這個從未聽說
• 4、extjs怎樣做圖片上傳

extjs實用開發指南

以下是extjs.org.cn收集的一些ExtJS可視化開發工具.你是不是非常喜歡ExtJs,但又已經厭煩了寫代碼的方式,喜歡用拖拉即可以完成ExtJs的設計.趕快來試用一下這些最新的產品.

ExtJS 在線可視化開發工具 – Ext 2.1.0 Gui Designer

Ext JS 可視化開發工具 – extbuilder

Ext JS 3.0 可視化開發工具預覽

ExtJS 在線可視化開發工具 – Formbuilder

你直接來這看

很多東西

extjs怎麼獲取後台的數據或者是變量。。。求大神速回？

1. 使用form表單提交

使用表單提交是調用了表單的submit方法，其配置項包括url、method等。這種方式能夠以JSON的形式提交參數信息。

var myform = Ext.create(‘Ext.form.Panel’,{undefined

defaultType: ‘textfield’,

items:[{undefined

fieldLabel : ‘Name’,

name : ‘name’

},{undefined

fieldLabel: ‘Gender’,

name : ‘gender’

},{undefined

fieldLabel : ‘Age’,

name: ‘age’

}],

buttons: [{undefined

text : ‘load’,

handler : function(){undefined

this.up(‘form’).getForm().submit({undefined

url: ‘/request/userinfo’,

method : ‘POST’,

success : function(form, action){undefined

console.log(form);

Ext.Msg.alert(‘title’, ‘load success’);

});

}]);

2. 使用Ajax異步提交

將上述handler方法中的內容換成一下代碼即可。在Ajax的request方法中是一個配置對象，其配置參數包括url，type，params。其中params表示要提交的參數，在此例中是從form表單中通過getValues()方法獲得的。該種方式也能將參數一JSON的方式提交到後台，與一個對象匹配。

var values = this.up(‘form’).getForm().getValues();

Ext.Ajax.request({undefined

url:’/request/userinfo’,

headers : {undefined’userHeader’: ‘userMsg’},

type:’POST’,

params:values,

success:function(response){undefined

var data = response.responseText;

console.log(data);

console.log(“success”);

},

});

3. 使用Ext.data.Store

在項目中經常需要通過提交一些數據來從後台獲取相應的信息。例如，在表單中輸入某個人的id和name就可以查出它的相關信息並在前台顯示。一個關於extjs的例子如下：

//data Model

Ext.define(‘User’,{undefined

extend: ‘Ext.data.Model’,

fields: [{name:’name’,type:’string’},

{name:’gender’,type:’string’},

{name:’age’,type:’string’}

]

});

var userStore = Ext.create(‘Ext.data.Store’,{undefined

model: ‘User’,

pageSize: 20,

// autoLoad : true,

proxy: {undefined

type : ‘ajax’, //提交數據的方式

url : ‘/request/userinfo’,

reader : { //以json的形式讀取將要提交的數據

type : ‘json’,

root : ‘resultList’

},

writer : {undefined

type : ‘json’

},

actionMethods : {undefined

create : ‘POST’

}

},

});

//grid Panel

Ext.create(‘Ext.grid.Panel’,{undefined

store: userStore,

columns: [

{header : ‘Name’, dataIndex : ‘name’},

{header : ‘Gender’, dataIndex : ‘gender’},

{header : ‘Age’, dataIndex : ‘age’}

],

height: 200,

width: 400,

renderTo: ‘div2’

});

//form Panel

var myform = Ext.create(‘Ext.form.Panel’,{undefined

defaultType: ‘textfield’,

items:[{undefined

fieldLabel: ‘Name’,

name: ‘name’

},{undefined

fieldLabel: ‘Gender’,

name: ‘gender’

},{undefined

fieldLabel : ‘Age’,

name : ‘age’

}],

buttons: [{undefined

text: ‘load’,

handler: function(){undefined

var values = this.up(‘form’).getForm().getValues();

console.log(values);

userStore.proxy.extraParams=values;

userStore.loadPage(1);

}

}

});

在handler方法中獲取form表單的參數後，賦值給userStore.proxy.extraParams，然後調用userStore.loadPage(1)。調用loadPage()方法時，會委託給proxy對象去後台獲取數據。所以對proxy的配置是核心。使用這個方式從後台獲取數據時，後台接口返回的對象應該包括一個List字段，list中包含所需要的具體信息。比如

@ReponseBody

public UserInfoResp getUserInfo(User user) {undefined

}

UserInfoResp應該像這樣有一個List字段

class UserInfoResp {undefined

ListUser resulltList;

}

ExtJS是什麼，一位學長說的，對這個從未聽說

1.extja是什麼？

答： ExtJS是一種主要用於創建前端用戶界面，是一個與後台技術無關的前端ajax框架。

功能豐富，無人能出其右

無論是界面之美，還是功能之強，ext的表格控件都高居榜首。

單選行，多選行，高亮顯示選中的行，推拽改變列寬度，按列排序，這些基本功能咱們就不提了。

自動生成行號，支持checkbox全選，動態選擇顯示哪些列，支持本地以及遠程分頁，可以對單元格按照自己的想法進行渲染，這些也算可以想到的功能。

再加上可編輯grid，添加新行，刪除一或多行，提示臟數據，推拽改變grid大小，grid之間推拽一或多行，甚至可以在tree和grid之間進行拖拽，啊，這些功能實在太神奇了。更令人驚嘆的是，這些功能竟然都在ext表格控件里實現了。

呵呵~不過ext也不是萬能的，與fins的ecside比較，ext不能鎖定列（馬鈴薯說1.x里支持鎖定列，但是2.0里沒有了，因為影響效率。），也沒有默認的統計功能，也不支持excel，pdf等導出數據。另外fins說，通過測試ecside的效率明顯優於ext呢。:)

[編輯本段]Ext發展史

1、第一隻「出海」的YUI-Ext只是作者Jack打算對基於BSD協議的Yahoo!UI庫進行自定義的擴展，但後來一度風頭蓋過其父輩YUI，足以說明 大家對它的熱情，很多人把它投入項目人並不十分了解它。分析人士打了一比喻：就好比尚未謀面， 並不了解一個人的家庭、教育、品行等背景，只因為他有一副精緻漂亮的外觀，就對其陷入了瘋狂的傾慕之中。因此分析人士建議，在投入項目前，要認真仔細地了 解EXT的內在原理和與其他Ajax庫不同地方。

2、在2006年初 ，Jack Slocum(傑克斯·洛克姆 ) 就一套公用設施擴建為Yahoo! User Interface (YUI) 庫而工作。這些擴展很快組織成一個獨立的庫代碼並以」 yui-ext」 的名義下發佈。

3、在2006年秋天,Jack發行了版本為0.33的yui-ext,而最終被證明為最後版本的代碼，根據這名字（下開放源代碼DSB許可）。在年底之前，這個庫已大受歡迎, 名字被簡化為Ext，反映了它作為一個框架的成熟和獨立。

該公司成立於2007年初，Ext現在為雙執照，使用LGPL和一個商業執照。

4、在2007年4月1日，發佈1.0正式版。

5、直至今日(2008年4月1日)ExtJS已發展涵蓋美國、日本、中國、法國、德國等全球範圍的用戶，現在的版本為Ext-3.0

6、官方在2009年4月14-16日的首次Ext Conference中發佈了Ext的3.0 RC版本。

7、2009年5月4日，Ext的3.0 版本發佈。

[編輯本段]什麼是EXT

1、ExtJS可以用來開發RIA也即富客戶端的AJAX應用，是一個用javascript寫的，主要用於創建前端用戶界面，是一個與後台技術無關的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各種開發語言開發的應用中。ExtJs最開始基於YUI技術，由開發人員JackSlocum開發，通過參考JavaSwing等機制來組織可視化組件，無論從UI界面上CSS樣式的應用，到數據解析上的異常處理，都可算是一款不可多得的JavaScript客戶端技術的精品。

2、Ext的UI組件模型和開發理念脫胎、成型於Yahoo組件庫YUI和Java平台上Swing兩者，並為開發者屏蔽了大量跨瀏覽器方面的處理。相對來說，EXT要比開發者直接針對DOM、W3C對象模型開發UI組件輕鬆。

[編輯本段]ExtJs UI Engine簡介

ExtJs初期僅是對Yahoo! UI的對話框擴展，後來逐漸有了自己的特色，深受網友的喜愛。 發展至今， Ext除YUI外還支持Jquery、Prototype等的多種JS底層庫，讓大家自由地選擇。該框架完全基於純Html/CSS+JS技術，提供豐富的跨瀏覽器UI組件，靈活採用JSON/XML數據源開發，使得服務端表示層的負荷真正減輕，從而達到客戶端的MVC應用！

ExtJs支持多平台下的主流瀏覽器 Internet Explorer 6+ FireFox 1.5+ (PC, Mac) Safari2+、Opera9+。在使用的廠家包括IBM、Adobe、Cisco和更多。ExtJs官方網站

[編輯本段]Ajax主流框架與ExtJS

JQuery、 Prototype和YUI都屬於非常核心的JS庫。雖然YUI，還有最近的JQuery，都給自己構建了一系列的UI器件（Widget），不過卻沒有一個真正的整合好的和完整的程序開發平台。哪怕是這些低層的核心庫已經非常不錯了，但當投入到真正的開發環境中，依然需要開發者做大量的工作去完善很多缺失之處。而Ext就是要填補這些缺口。主流開源框架中只有Dojo像Ext一樣，嘗試着提供整合的開發平台。相比Dojo這個出色的工具包，我們認為 Ext能提供一個粘合度更高的應用程序框架。Ext的各個組件在設計之時就要求和其它Ext組件組合一起工作是無縫合作的。這種流暢的互通性，離不開一個緊密合作的團隊，還必須時刻強調設計和開發這兩方面目標上的統一，而這點是很多開源項目未能做到的。從構建每一個組件開始，我們始終都強調組件的外觀、性能、互通性和可擴展性，而我們認為組件已經達到了這幾點的要求。

Ext絕對可以單獨使用。實際上，除了有特定的要求，推薦單獨使用Ext，這樣的話文件佔位更小，支持和整合也更緊密。我們也支持與jQuery、 YUI或Prototype整合使用，作為低層庫的角色出現，以提供處理各種核心的服務，如DOM和事件處理，Ajax連接和動畫特效。使用整合方式的一個原因是它們已具備了一些特定的器件而Ext並沒有原生支持——像YUI的History控件便是一個典型的例子。這時，Ext需要依賴YUI這個庫的底層來實現History控件，這樣一來的話也可免去Ext自身底層庫，從而減少了整個程序的內存佔用。另一個使用整合方式的原因是，對於許多已在使用其他底層庫的程序，你可能希望逐步加入Ext。總之，如果已經有了其他庫，Ext可已利用它們。我們的宗旨是為用戶提供各種可能性和性能上的優化。而事實是，只要實現了相對應的底層庫接口，為任意一個框架添加上適配器是沒有問題的——人們可以輕鬆地將Dojo、Moo、Ajax.NET，或其它JS庫轉變為 Ext的底層。

Ext從2.x開始收費，這給他的應用前景帶來一些問題。不過對國內開發人員的影響不大，畢竟是客戶付款。

[編輯本段]Ext學習及應用經驗小結

一、理解Html DOM、Ext Element及Component

要學習及應用好Ext框架，需要理解Html DOM、Ext Element及Component三者的區別。

Ext是基於Web的富客戶端框架，其完全是基於標準W3C技術構建設的，使用到的都是HTML、CSS、DIV等相關技術。Ext最傑出之處，是開發了一系列非常簡單易用的控件及組件，我們只需要使用這些組件就能實現各種豐富多彩的UI的開發。

無論組件有多少配置屬性、還是事件、方法等等，其最終都會轉化為HTML在瀏覽器上顯示出來，而每一個HTML頁面都有一個層次分明的DOM樹模型，瀏覽器中的所有內容都有相應的DOM對象，動態改變頁面的內容，正是通過使用腳本語言來操作DOM對象實現。

僅僅有DOM是不夠的，比如要把頁面中的某一個節點移到其它位置，要給某一個節點添加陰影效果，要隱藏或顯示某一個節點等，我們都需要通過幾句 javascript才能完成。因此，Ext在DOM的基礎上，創建了Ext Element，可以使用Element來包裝任何DOM，Element對象中添加了一系列快捷、簡便的實用方法。

對於終端用戶來說，僅僅有Element是不夠的，比如用戶要顯示一個表格、要顯示一棵樹、要顯示一個彈出窗口等。因此，除了Element以外，Ext 還建立了一系列的客戶端界面組件Component，我們在編程時，只要使用這些組件Componet即可實現相關數據展示及交互等，而 Component是較高層次的抽象，每一個組件在渲染render的時候，都會依次通過Element、DOM來生成最終的頁面效果。

在使用Ext開發的應用程序中，組件Component是最高層次的抽象，是直接給用戶使用的，Ext Element是Ext的底層API，主要是由Ext或自定義組件調用的，而DOM是W3C標準定義的原始API，Ext的Element通過操作DOM 來實現頁面的效果顯示。

在Ext中，組件渲染以後可以通過訪問組件的el屬性來得到組件對應的Element，通過訪問Element的dom屬性可以得到其下面的DOM對象。另外，我們可以通過通過Ext類的快捷方法getCmp、get、getDom等方法來得組件Component、Ext元素Element及DOM節點。比如：

var view=new Ext.Viewport();//創建了一個組件Component

view.el.setOpacity(.5);//調用Element的setOpacity方法

view.el.dom.innerHTML=”Hello Ext”;//通過Element的dom屬性操作DOM對象

再看下面的代碼：

var win=new Ext.Window({id:”win1″,title:”我的窗口”,width:200,height:200});

win.show();

var c=Ext.getCmp(“win1”);//得到組件win

var e=Ext.get(“win1”);//根據id得到組件win相應的Element

var dom=Ext.getDom(“win1”);//得到id為win1的DOM節點

二、熟悉ext組件體系

Ext2.0對整個框架進行了重構，最為傑出的是推出了一個以Component類為基礎的組件體系，在Component類基礎上，使用面向對象的方法，設計了一系列的組件及控件。因此，要能遊刃有餘地使用Ext，熟悉Ext組件體系是最基本的。

在《ExtJS實用開發指南》中，有如下面一幅組件圖：

通過組件結構圖我們可以一目了然的看出整個Ext組件繼承及組成體系，當使用一個組件的時間，了解他的繼承體系，這樣可以便於我們掌握組件的各種特性。

三、掌握核心控件

控件其實也是組件，比如用於顯示樹信息的TreePanel、用於顯示錶格的GridPanel及EditorGridPanel，還有代表應用程序窗口的Ext.Window等都屬於Ext控件。在使用Ext的時候，一定要掌握一些核心控件，特別是處於基類的控件。比如上面提到的幾個控件，他們都是繼承於面板Panel，所以我們要重點掌握面板這個核心控件的特性。比如面板由以下幾個部分組成：一個頂部工具欄(tbar)、一個底部工具欄(bbar)、面板頭部(header)、面板尾部(bottom)、面板主區域(body)幾個部分組成。面板類中還內置了面板展開、關閉等功能，並提供一系列可重用的工具按鈕使得我們可以輕鬆實現自定義的行為，面板可以放入其它任何容器中，面板本身是一個容器，他裏面又可以包含各種其它組件。只要掌握了Panel的應用，那麼學習TreePanel、Window等就會變得簡單得多。

同樣的道理，對於Ext的表單字段來說，不管是ComboBox，NumberField、還是DateField，他們其它都是 Ext.form.Field類的子類，在他上面定義了表單字段的各種基本操作及特性。在學習使用表單字段組件時，一定要重點研究Field這個類，掌握他的主要方法、事件等，就能有助於更好的學習使用其它的字段。

四、學習及研究示例

由於javascript語言非常靈活，不像靜態強類型語言（比如Java）那樣有固定的代碼設計模式，而往往是不同的人就有不同的編程風格。在實際應用開發中，只有見多識廣，才能在自己的在腦中建立一個開發庫。

學習別人的示例對於我們開發幫助會非常大，示例包括基本組件的應用、綜合應用等多個方面。在此，簡單推薦幾個。

1、Ext官方示例，在ext項目下載包的examples目錄中，包括各個控件的基本應用演示，同時還有一些比較複雜的組合示例，有簡有繁，非常適合初學者認真研究。

2、Vifir推出的示例，Vifir推出的一些示例主要包括兩類，一種是開源的示例應用，另外一種是針對VIP用戶的實用示例。開源的示例主要是指 wlr單用戶blog系統，這個一個集合了前後台技術的ext綜合示例，而針對VIP用戶的實用示例則是可以作為開發骨架或擴展組件的示例。

3、其它示例，在ext社區中還有很多比較優秀的ext應用示例，有些只是一個應用演示，雖然沒有提供源碼下載，但我們可以直接下載引用的js文件來得到這些示例的ext應用代碼，同樣能取起到非常好的學習效果。

五、多運用

Ext看起來是非常簡單的東西，稍有點編程知識的人，按照《ExtJS實用開發指南》中的入門指南，半小時就能學會使用Ext。然而，當準備使用Ext開發一個項目時，卻不知道從何處入手，或者是在使用Ext的時候，出了一點小問題自己不知道該如何解決。編程是一門實踐性的科學，僅僅靠看書、看別人寫的代碼是遠遠不夠的，因此，必須多做實踐才行，只有通過不斷的練習，大量的使用，才能對Ext的組件特性、事件、事件處理機制以及與服務器端交互接口等深入的掌握，只有多做運用，深入了解ext的組件的工作原理及機制，才能編寫出高級的Ext的應用。

六、熟讀Ext項目的源代碼

如果要想深入應用Ext，那麼閱讀Ext項目的源代碼這是必不可少的環節，Ext的代碼質量非常高，通過閱讀他的代碼我們可以更加深刻的了解 javascript面向對象編程，Ext代碼中包含了很多高級的js技巧以及設計模式。在使用Ext的過程中，我們經常根據項目的需要對Ext組件進行擴展，設計自己的組件或控件，而如何實現一個自定義的Ext組件，我們可以從Ext的各個組件源代碼中找到答案。

Ext的源代碼在Ext項目的source目錄。讀Ext源碼，並不一定非要從某一個地方開始，而組件核心代碼Component.js、容器組件代碼 Container.js、面板Panel.js等這些是必看的； core目錄中的Element.js、Ext.js等也是必看的。當需要從一個控件進行擴展的時候，最好能簡單看一看這個控件的源代碼。

2.extjs應該很少應用吧 我做jsp的，從來就沒有用過這些東西·

extjs怎樣做圖片上傳

1.代碼如下：

複製代碼

1 !DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “”

2 html xmlns=””

3 head

4 title/title

5 !–ExtJs框架開始–

6 script type=”text/javascript” src=”/Ext/adapter/ext/ext-base.js”/script

7 script type=”text/javascript” src=”/Ext/ext-all.js”/script

8 script src=”/Ext/src/locale/ext-lang-zh_CN.js” type=”text/javascript”/script

9 link rel=”stylesheet” type=”text/css” href=”/Ext/resources/css/ext-all.css” /

10 !–ExtJs框架結束–

11 script type=”text/javascript”

12 Ext.onReady(function () {

13 //初始化標籤中的Ext:Qtip屬性。

14 Ext.QuickTips.init();

15 Ext.form.Field.prototype.msgTarget = ‘side’;

16 //創建div組件

17 var imagebox = new Ext.BoxComponent({

18 autoEl: {

19 style: ‘width:150px;height:150px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:20px;margin-bottom:10px’,

20 tag: ‘div’,

21 id: ‘imageshow’,

22 html: ‘暫無圖片’

23 }

24 });

25 //創建文本上傳域

26 var file = new Ext.form.TextField({

27 name: ‘imgFile’,

28 fieldLabel: ‘文件上傳’,

29 inputType: ‘file’,

30 allowBlank: false,

31 blankText: ‘請瀏覽圖片’

32 });

33 //提交按鈕處理方法

34 var btnsubmitclick = function () {

35 if (form.getForm().isValid()) {

36 form.getForm().submit({

37 waitTitle: “請稍候”,

38 waitMsg: ‘正在上傳…’,

39 success: function (form, action) {

40 Ext.MessageBox.alert(“提示”, “上傳成功！”);

41 document.getElementById(‘imageshow’).innerHTML = ‘img style=”width:150px;height:150px” src=”‘ + action.result.path + ‘”/’;

42 },

43 failure: function () {

44 Ext.MessageBox.alert(“提示”, “上傳失敗！”);

45 }

46 });

47 }

48 }

49 //重置按鈕”點擊時”處理方法

50 var btnresetclick = function () {

51 form.getForm().reset();

52 }

53 //表單

54 var form = new Ext.form.FormPanel({

55 frame: true,

56 fileUpload: true,

57 url: ‘/App_Ashx/Demo/Upload.ashx’,

58 title: ‘表單標題’,

59 style: ‘margin:10px’,

60 items: [imagebox, file],

61 buttons: [{

62 text: ‘保存’,

63 handler: btnsubmitclick

64 }, {

65 text: ‘重置’,

66 handler: btnresetclick

67 }]

68 });

69 //窗體

70 var win = new Ext.Window({

71 title: ‘窗口’,

72 width: 476,

73 height: 374,

74 resizable: true,

75 modal: true,

76 closable: true,

77 maximizable: true,

78 minimizable: true,

79 buttonAlign: ‘center’,

80 items: form

81 });

82 win.show();

83 });

84 /script

85 /head

86 body

87 !–

88 說明：

89 (1)var imagebox = new Ext.BoxComponent():創建一個新的html標記。

90 官方解釋如下：

91 This may then be added to a Container as a child item.

92 To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification:

93 (2) autoEl: {style: ”,tag: ‘div’,id: ‘imageshow’, html: ‘暫無圖片’}定義這個html標記的屬性，如 標記為：div，id是多少等。

94 官方實例為：

95 var myImage = new Ext.BoxComponent({

96 autoEl: {

97 tag: ‘img’,

98 src: ‘/images/my-image.jpg’

99 }

100 });

101 (3)var file = new Ext.form.TextField()：創建一個新的文件上傳域。

102 (4)name: ‘imgFile’:名稱，重要，因為service端要根據這個名稱接收圖片。

103 (5)inputType: ‘file’：表單類型為文件類型。

104 (6)waitTitle: “請稍候”,waitMsg: ‘正在上傳…’,：上傳等待過程中的提示信息。

105 (7)document.getElementById(‘imageshow’).innerHTML = ‘img style=”width:150px;height:150px” src=”‘ + action.result.path + ‘”/’;這個是原生態的js，把imageshow的值換成圖片。

106 —

107 /body

108 /html

複製代碼

其中與service交互用上傳圖片的 一般處理程序文件，源碼如下：

/App_Ashx/Demo/Upload.ashx

複製代碼

1 using System;

2 using System.Web;

3 using System.IO;

4 using System.Globalization;

5

6 namespace HZYT.ExtJs.WebSite.App_Ashx.Demo

7 {

8 public class Upload : IHttpHandler

9 {

10 public void ProcessRequest(HttpContext context)

11 {

12 //虛擬目錄，建議寫在配置文件中

13 String strPath = “/Upload/Image/”;

14 //文件本地目錄

15 String dirPath = context.Server.MapPath(strPath);

16 //接收文件

17 HttpPostedFile imgFile = context.Request.Files[“imgFile”];

18 //取出文件擴展名

19 String fileExt = Path.GetExtension(imgFile.FileName).ToLower();

20 //重新命名文件

21 String newFileName = DateTime.Now.ToString(“yyyyMMddHHmmss_ffff”, DateTimeFormatInfo.InvariantInfo) + fileExt;

22 //文件上傳路徑

23 String filePath = dirPath + newFileName;

24 //保存文件

25 imgFile.SaveAs(filePath);

26 //客戶端輸出

27 context.Response.Write(“{success:true,path:'” + strPath + newFileName + “‘}”);

28 }

29

30 public bool IsReusable

31 {

32 get

33 {

34 return false;

35 }

36 }

37 }

38 }

複製代碼

2.效果如下：

無廢話extjs

3.說明：

(1)上傳域不光可以上傳圖片，還要以上傳其他文件。這裡我們以圖片為例。

(2)在實際開發中，我們還要對圖片格式，大小等進行校驗，這個示例測重於上傳，沒有加入任何校驗。