包含extjs筆記系列的詞條

本文目錄一覽：

• 1、ExtJS是什麼，一位學長說的，對這個從未聽說
• 2、Extjs4模仿desktop的桌面問題
• 3、如何設置 Ext.Viewport 的寬度(定位)
• 4、轉：新手如何學習ExtJS 4

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的，從來就沒有用過這些東西·

Extjs4模仿desktop的桌面問題

一個華麗的模擬Windows桌面的系統界面一定能讓他就像看到穿黑絲的背影一樣，感到眼前一亮。雖然穿黑絲的背影正面可能是個大媽，信息系統的核心也絕不是華而不實的界面。不管怎麼說提供一個能瞬間亮瞎客戶狗眼的界面和交互模式絕對不是件壞事。

說明：

有些地方沒有仔細推敲,還有重構的空間,應該沒有Bug,不過還是建議學習消化後再用。

我修改了下,代碼里只有展現層。業務邏輯和數據訪問層我先去掉了，這樣比較符合本篇主題，也方便大家單獨應用，以後會陸續添加

附送登錄頁，存在明文傳送密碼的問題，用在項目中要注意

附送傳統菜單頁面,主要是為了演示模塊化載入功能頁,缺少基本的退出,重新登錄之類的功能,自己可以添加功能

如果打算全套上ExtJs4,建議看完本系列並熟悉ExtJs4後再酌情考慮。如果只是用這個「殼」，套Iframe用自己的頁,那就沒啥太大問題了。

如果沒有使用ExtJs的經驗，不建議用本篇的代碼來學習，這是綜合應用，代碼比較複雜。

先給出 Xg.part1.rar 、 Xg.part2.rar源碼下載鏈接：

部署運行指南：

下載Xg.part1.rar和Xg.part2.rar 兩個文件並解壓，得到目錄 Xg

在 Visual Studio 2010中打開 Xg.sln,如下圖

把整個解決方案編譯一下,應該沒有任何錯誤。

把Xg.MVC.Application項目設為啟動項，然後按F5運行(建議用Chrome瀏覽器,IE9也行。不建議用IE6,7,8 速度會比較慢)。你也可以部署到IIS里運行。運行起來如下圖：

用戶名：admin 密碼: 000000 界面模式有「酷炫桌面」和「經典菜單」2種選擇進去後分別如下圖：

不完全使用指南：

目錄結構解釋：

菜單和快捷方式都是從C#返回的Json動態生成的，打開Fiddler2 根據請求的URL地址找到相應Controller下的Action 就可以查看到代碼。

Asp.Net大型項目實踐系列第二季(三)莫人云亦云,莫走彎路!ExtJs 認知、開發、調試3.「測試模塊1」演示了ExtJS4的按需載入新特性，也就是只有你打開這個模塊的時候，js才會載入。所以在Module1.aspx並沒有對Module1.js的引用。而是這樣去new了一個模塊對象的實例：

script type=”text/javascript”

Ext.create(‘Mod.TestModule.Module1’, { modId: ‘/TestModule/Module1/Module1’ });

/script

要注意的是按需載入需要在run.js里註冊文件夾路徑：

Ext.Loader.setConfig({

enabled : true,

paths : {

‘Mod.TestModule’ : ”,

‘OIT.ex’ : ”,

‘Ext.ux’ : ”

}

});

如果不想要那個在飄的浮雲，去run.js去掉如下代碼：

// 浮雲控制

var i = -500;

var el = Ext.get(‘scene_cloud’);

var cloudTask = {

run : function() {

el.setStyle(‘left’, i + ‘px’);

i++;

if (i document.body.clientWidth)

i = -500;

},

interval : 30

}

Ext.TaskManager.start(cloudTask);

WallpaperSettings.js可以設置自己的背景圖片列表，對應的文件夾是「\Scripts\Desktop\wallpapers」

store : new Ext.data.TreeStore({

model : ‘HMSDesktop.WallpaperModel’,

root : {

text : ‘Wallpaper’,

expanded : true,

children : [{

text : “無”,

iconCls : ‘asterisk_orange’,

leaf : true

}, child(‘blue.jpg’),

child(‘blue-curtain.jpg’),

child(‘fields-of-peace.jpg’),

child(‘fresh-morning.jpg’),

child(‘colorado-farm.jpg’),

child(‘blue-swirl.jpg’),

child(‘desk.jpg’),

child(‘desktop.jpg’),

child(‘desktop2.jpg’),

child(‘sky.jpg’),

child(‘19201080.jpg’),

child(‘FGHJ_079020.jpg’),

child(‘cloud.jpg’)]

}

})

HMSDesktop.js是桌面js的實例，建議從這裡看起，改開始菜單的標題也在這裡：

// 開始菜單

getStartConfig : function() {

var me = this, ret = me.callParent();

return Ext.apply(ret, {

title : ‘傳說中的弦哥’,

height : 400,

logo圖片啥的路徑在「\Content「和”\Scripts\Desktop\images”下，可以自己換。

如何設置 Ext.Viewport 的寬度(定位)

面板是ExtJs控制項的基礎，很多控制項都是在面板的基礎上擴展的，或者他會與其他控制項之間有關係。

面板由一個工具欄、一個底部工具欄、面板頭部、面板尾部和面板主區域幾個部分組成。面本類中還提供了面板展開、關閉等功能。並提供了一些可重用的工具按鈕 讓我們靈活的控制面板。面板可以放入其他任何容器中，面板本身也是一個容器，所以面板裡面也可以包含其他組件。面板的類名為Ext.Panel,其 xtype為panel。

看下面一個例子來顯示出面板的各個組成部分：

//普通的面板

function panel(){

var panel=new Ext.Panel({

renderTo:’panel’,

title:’面板的頭部’,

width:400,

height:200,

html:’h1面板的主顯示區域..可包含任何html代碼/h1′,

tbar:[{text:’頂部工具欄按鈕’}],

bbar:[{text:’底部工具欄’}],

buttons:[

{

text:’面板底部按鈕’,

handler:function()

{

Ext.Msg.alert(‘提示’,’面板底部按鈕的事件！’);

}

}

]

});

}

上面的代碼就不做詳細介紹了，特別注意的一點是renderTo:’panel’，這句代碼負責把面板綁定到一個div層里，panel就是div的ID。

div id=”panel”/div

代碼執行後會顯示下面的效果：

效果不錯吧！面板中可以有多個工具欄，可以位於面板的頂部或底部，Ext工具欄是由Ext.Toolbar類表示。工具欄可以存放按鈕、文本等內容。而且面板中還提了一些實用的工具欄，可以通過tools配置屬性向面板頭部加入工具欄選項，看下面的案例：

function panel(){

var panel=new Ext.Panel({

tools:[

{id:”save”},

{id:”help”},

{id:”up”},

{

id:”close”,

handler:function(){

Ext.MessageBox.alert(“工具欄按鈕”,”工具欄的關閉按鈕事件”)

}

}

],

renderTo:’panel’,

title:’面板的頭部’,

width:400,

height:200,

html:’h1面板的主顯示區域..可包含任何html代碼/h1′,

tbar:[{text:’頂部工具欄按鈕’}],

bbar:[{text:’底部工具欄’}],

buttons:[

{

text:’面板底部按鈕’,

handler:function()

{

Ext.Msg.alert(‘提示’,’面板底部按鈕的事件！’);

}

}

]

});

}

跟普通的面板沒什麼區別，只是多了個tools配置屬性，可以通過ID來設置工具欄選項種類，如果需要給工具欄選項添加事件，則直接配置handler屬性就可以。下面我為大家貼了一些id的枚舉值：

toggle (collapsable為true時的默認值)

close

minimize

maximize

restore

gear

pin

unpin

right

left

up

down

refresh

minus

plus

help

search

save

print

上面的東西我也沒有全部測試，如果大家感興趣就自己試一下吧。

如果我們需要讓這個面板可以拖動，需要加3個配置屬性，改變一處配置。

:88,

y: 88,

renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置

draggable: {

insertProxy: false,//拖動時不虛線顯示原始位置

onDrag : function(e){

var pel = this.proxy.getEl();

this.x = pel.getLeft(true);

this.y = pel.getTop(true);//獲取拖動時panel的坐標

var s = this.panel.getEl().shadow;

},

endDrag : function(e){

this.panel.setPosition(this.x, this.y);//移動到最終位置

}

}

x與y是設置在屏幕顯示位置，renderTo不需要指定div的id了，直接用Ext.getBody()方法就可以把Panel載入。

draggable是拖動時設置，onDrag是在拖動時觸發的事件，endDrag是結束拖動時事件。

效果:

這樣就可以拖動了，但是會發現在拖動時有一個黑框框，這樣可能有些不美觀了。如果我們需要讓這個黑框隨著移動位置而變化。那麼我們需要在onDrag事件函數中加如下代碼:

if (s) {

s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());

}

看看拖動例子的全部代碼：

//可以拖動的面板

function panelDrag(){

var panel=new Ext.Panel({

title: ‘拖一下看看我動不.’,

x:88,

y: 88,

renderTo: Ext.getBody(),//x,y,renderTo:Ext.getBody()初始化panel的位置

floating: true,//true

frame: true,//圓角邊框

width: 400,

height: 200,

draggable: {

insertProxy: false,//拖動時不虛線顯示原始位置

onDrag : function(e){

var pel = this.proxy.getEl();

this.x = pel.getLeft(true);

this.y = pel.getTop(true);//獲取拖動時panel的坐標

var s = this.panel.getEl().shadow;

if (s) {

s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());

}

},

endDrag : function(e){

this.panel.setPosition(this.x, this.y);//移動到最終位置

}

}

})

}

Ext.Panel有幾個子類，所以來介紹一下Panel中常見的配置屬性、方法，下面內容是資料中的：

1.autoLoad：有效的url字元串，把那個url中的body中的數據載入顯示，但是可能沒有樣式和js控制，只是html數據

2.autoScroll:設為true則內容溢出的時候產生滾動條，默認為false

3.autoShow:設為true顯示設為”x-hidden”的元素，很有必要，默認為false

4.bbar:底部條，顯示在主體內，//代碼：bbar:[{text:’底部工具欄bottomToolbar’}],

5.tbar:頂部條，顯示在主體內，//代碼:tbar:[{text:’頂部工具欄topToolbar’}],

6.buttons:按鈕集合，自動添加到footer中（footer參數，顯示在主體外）//代碼：buttons:[{text:”按鈕位於footer”}]

7.buttonAlign:footer中按鈕的位置，枚舉值為：”left”,”right”,”center”,默認為right

8.collapsible：設為true，顯示右上角的收縮按鈕，默認為false

9.draggable:true則可拖動，但需要你提供操作過程，默認為false

10.html:主體的內容

11.id：id值，通過id可以找到這個組件，建議一般加上這個id值

12.width：寬度

13.height：高度

13.title:標題

14.titleCollapse：設為true，則點擊標題欄的任何地方都能收縮，默認為false.

15.applyTo：（id）呈現在哪個html元素裡面

16.contentEl：（id）呈現哪個html元素裡面，把el內的內容呈現

17.renderTo：（id）呈現在哪個html元素裡面

applyTo、contentEl、renderTo三者區別個人理解為：applyTo和RenderTo綁定到html元素中，contentEl則是html元素到ext組件中去。

上面說到面板都是綁定在某個html元素中顯示面板，是局部的。Extjs中還有一個可以顯示在整個body中的組件Ext.ViewPort，它會隨著瀏覽器而變化。要注意的是一個頁面中只能存在一個viewport的實例。看下面的代碼

function viewport(){

var view=new Ext.Viewport({

enableTabScroll:true,

layout:”fit”,

items:[

{

title:’標題’,

html:”內容”,

bbar:[

{text:”按鈕1″}

]

}

]

})

}

與其它使用方式大同小異，Viewport不需要指定renderTo，Viewport通常用於網站主頁面，Viewport常用布局有fit、border等，設置layout屬性改變布局。

基本的面板我們了解了，還有一個很重要的面板TabPanel，這裡用一個小例子做說明，代碼就不解釋了。面板的用法是非常靈活的，我們可以發揮自己的想像力來做出漂亮的選項卡面板和實用的功能。因為它是可以無限嵌套控制項的。

function tabpanel(){

var tabpanel=new Ext.TabPanel({

activeTab:0, //設置默認選擇的選項卡

renderTo:’tabpanel’,

width:200,

height:150,

items:[

{

title:”第一個選項”,

html:”第一個的內容”

},

{

title:”第二個選項”,

html:”第一個的內容”

}

]

});

}

對待本人用到的東西來做一個小設計。代碼不多做講解，發一下代碼和效果吧

點擊展開

更多 0上一篇：Extjs學習總結

下一篇：ExtJs Panel翻譯

相關主題推薦 extjs 瀏覽器 控制項 布局 移動 相關博文推薦 vimperator部分使用幫助 javascript 常用函數歸納 javascript原生代碼—跨瀏覽器事… [Phonegap+Sencha Tou… [Phonegap+Sencha Tou… [Phonegap+Sencha Tou… [Phonegap+Sencha Tou… [Phonegap+Sencha Tou… 查看評論

暫無評論

您還沒有登錄,請[登錄]或[註冊]

* 以上用戶言論只代表其個人觀點，不代表CSDN網站的觀點或立場

核心技術類目全部主題 Java VPN Android iOS ERP IE10 Eclipse CRM JavaScript Ubuntu NFC WAP jQuery 資料庫 BI HTML5 Spring Apache Hadoop .NET API HTML SDK IIS Fedora XML LBS Unity Splashtop UML components Windows Mobile Rails QEMU KDE Cassandra CloudStack FTC coremail OPhone CouchBase 雲計算 iOS6 Rackspace Web App SpringSide Maemo Compuware 大數據 aptech Perl Tornado Ruby Hibernate ThinkPHP Spark HBase Pure Solr Angular Cloud Foundry Redis Scala Django Bootstrap 個人資料

thunder_1985

訪問：49882次

積分：1107分

排名：第12092名

原創：49篇 轉載：0篇 譯文：14篇 評論：11條 文章搜索 文章分類Ant(0)

dwr(5)

Hibernate(1)

javascript(2)

JDBC(2)

Junit(0)

Servlet(0)

Spring(0)

Struts2(3)

UML(0)

XML(0)

文章存檔2010年01月(2)2009年12月(12)2009年11月(5)2009年10月(22)2009年09月(22)

閱讀排行Struts2文件上傳(6028)

ExtJs之combobox(4648)

Struts2文件下載(3970)

struts2異常處理(3809)

ExtJS學習筆記 Ext.FormPanel(2216)

Extjs學習總結(1634)

ExtJs Panel翻譯(1453)

ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport) (1346)

Oracle安裝失敗後如何完全卸載(1158)

PreparedStatement用法總結(1098)

評論排行Struts2文件下載(3)

MySql分頁(3)

PreparedStatement用法總結(2)

PreparedStatement和Statement比較(1)

ExtJs之combobox(1)

Struts2文件上傳(1)

引用 extJs 2.0學習筆記(Element.js篇)(0)

讓select處於不選中狀態(0)

innerText與innerHTML區別 (0)

Oracle安裝失敗後如何完全卸載(0)

推薦文章最新評論Struts2文件上傳

nhm_lxy: 師傅 帶帶我吧

PreparedStatement用法總結

zlp1992: 你好，如果資料庫的是char類型，該怎麼設置呢？

PreparedStatement用法總結

teteert: 如果資料庫中有一個欄位是自動增加的，則使用PrepareedStatement 怎麼插入數據啊，自動…

Struts2文件下載

wdlht001: 很好用~謝謝

Struts2文件下載

jinweisheng5521:

ExtJs之combobox

匿名用戶:

Struts2文件下載

hetengfeng:

MySql分頁

匿名用戶:

PreparedStatement和Statement比較

匿名用戶:

MySql分頁

JavaAlpha:

轉：新手如何學習ExtJS 4

最近運營ExtJS交流群的時候，感觸頗深，我感覺作為一個老手，我有必要介紹一下如何學習這種基礎性問題。新手如何學習ExtJS4？如何入門ExtJS4？如何快速學習ExtJS4？1.仔細閱讀新手教程新手教程是指ExtJS官方文檔中Guides那一系列文章，因為是英文的，新手閱讀起來可能有障礙，為此我特意翻譯了這一系列教程，根據使用頻度我已經差不多把最常用到的教程翻譯完了，後續還將繼續翻譯。

通讀這一系列教程後，你會對ExtJS的基本使用方法有個框架性的了解，你會大體上知道如何實現常用功能。現在我把所有已翻譯的教程列舉在此，記住，認真的讀一定對你有幫助。ExtJS 4 入門ExtJS 4 類系統(Class System)介紹ExtJS MVC架構講解ExtJS 4 布局和容器ExtJS 4 組件詳解ExtJS 4 數據(包)詳解ExtJS 4 Grids 詳解ExtJS 4 表單ExtJS 4 樹2.把官方文檔中的所有Demo都瀏覽一遍做這個事情是為了了解官方Demo中實現了哪些功能，當自己要做一個功能時，有例子照著做是最快的，瀏覽一遍就會對現有的Demo有個大概印象，當你沒有頭緒的時候你的大腦會在後台查找之前的印象的，仔細瀏覽一遍，沒有錯。3.熟讀API Docs(API文檔)最近遇到很多人問問題，把一段自己想當然寫出來的代碼貼上來問為什麼不對，事實上你仔細查一下API文檔就知道，你這種用法ExtJS根本就不支持，當然不對。

使用搜索的好處是：通常可以較快速的解決一些無頭緒的問題