認(rèn)識(shí)ExtJS
extjs是使用javascript、css和html等技術(shù)實(shí)現(xiàn)的主要用于創(chuàng)建用戶(hù)界面，且與后臺(tái)技術(shù)無(wú)關(guān)的前端ajax框架。
extjs來(lái)源于yui，開(kāi)發(fā)理念來(lái)源于傳統(tǒng)的桌面軟件開(kāi)發(fā)。
1.下載extjs，解壓，得到目錄結(jié)構(gòu)
o builds：是extjs壓縮后的代碼，體積更小，加載更快
o docs ：extjs的文檔
o examples：官方示例
o locale：多國(guó)語(yǔ)言的資源文件
o overview：extjs的功能簡(jiǎn)述
o pkgs：extjs各部分功能的打包文件
o resource：extjs要用到的圖片文件與樣式文件。
o src：未壓縮過(guò)的代碼目錄
o bootstrap.js：extjs庫(kù)的引導(dǎo)文件
o ext-all.js ：必須引入的核心庫(kù)
o ext-all-debug.js：ext-all.js的調(diào)試版
2.也從hello world開(kāi)始（extjs 4.0）
01.<HTML>
02.<HEAD>
03.<TITLE>HelloWorld</TITLE>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
05.<link rel="stylesheet" type="text/css" href="./ext-4.0/resources/css/ext-all.css" />
06.<script type="text/javascript" src="./ext-4.0/bootstrap.js"></script>
07.<script type="text/javascript" src="./ext-4.0/locale/ext-lang-zh_CN.js"></script>
08.<script type="text/javascript">
09.Ext.onReady(function(){
10.Ext.MessageBox.alert('HelloWorld','Hello World!Hello World!Hello World!Hello World!');
11.});
12.</script>
13.</HEAD>
14.<BODY></BODY>
15.</HTML>
3.實(shí)現(xiàn)工具欄和菜單欄
view source
print?
01.<script type="text/javascript">
02.Ext.onReady(function(){
03.var toolbar =new Ext.toolbar.Toolbar({
04.renderTo:'toolbar',
05.width:300
06.});
07.
08.var childrenMenu =new Ext.menu.Menu({
09.ignoreParentClicks:true,
10.items:[
11.{text:'open one'},
12.{text:'open two'}
13.]
14.});
15.
16.var fileMenu =new Ext.menu.Menu({
17.shadow:'frame',
18.allowOtherMenus:true,
19.items:[
20.new Ext.menu.Item({
21.text:'new'
22.}),
23.{text:'open',menu:childrenMenu},
24.{text:'close'}
25.]
26.});
27.
28.
29.toolbar.add(
30.{
31.text:'新建',
32.menu:fileMenu
33.},
34.{
35.text:'打開(kāi)'
36.},
37.{
38.text:'保存'
39.},
40.'->',
41.'<a href="#">link</a>',
42.'text'
43.);
44.
45.});
46.</script>
47.</HEAD>
48.<BODY>
49.<div id='toolbar'></div>
50.</BODY>
4.最常用的表單
1）Ext.form.Basic基本表單 提供了字段管理、數(shù)據(jù)驗(yàn)證、表單提交、數(shù)據(jù)加載等功能
2）認(rèn)識(shí)Ext.form.Panel表單面板 是表單項(xiàng)的容器，默認(rèn)使用anchor布局
Ext.form.Panel與傳統(tǒng)表單的提交方式、表單的驗(yàn)證和對(duì)表單組件的支持有不同：
（1）表單的提交方式 原始的方式是同步進(jìn)行，panel使用異步方式
（2）對(duì)表單驗(yàn)證的支持 ExtJS支持javascript驗(yàn)證方式
（3）對(duì)表單組件的支持 panel支持ext封裝后的高級(jí)組件
例子一：
view source
print?
01.<script type="text/javascript">
02.Ext.onReady(function(){
03.Ext.QuickTips.init();
04.var form =new Ext.form.Panel({
05.title:'myForm',
06.height:120,
07.width:200,
08.frame:true,
09.renderTo:'form',
10.defaults:{
11.labelWidth:50,
12.width:150,
13.labelAlign:'left',
14.allowBlank:false,
15.blankText:'will not null',
16.msgTarget:'qtip'
17.},
18.items:[{
19.xtype:'textfield',
20.fieldLabel:'name'
21.},
22.{
23.xtype:'numberfield',
24.fieldLabel:'age'
25.}]
26.});
27.});
28.</script>
29.</HEAD>
30.<BODY>
31.<div id='form'></div>
32.</BODY>
5.面板和布局類(lèi)
1）Ext.panel.Panel 主要包括5部分：底部工具欄，頂部工具欄，面板頭部，面板底部，面板體
對(duì)于面板最重要的功能和作用就是在其中顯示各種不同來(lái)源的內(nèi)容，extjs提供了4種不同的顯示內(nèi)容的方式，分別是：
1）使用autoLoad配置項(xiàng)為面板加載遠(yuǎn)程頁(yè)面 就是遠(yuǎn)程加載html文件
2）使用contentEl配置項(xiàng)為面板加載本地資源 加載當(dāng)前頁(yè)面中的html代碼
3）使用html配置項(xiàng)自定義面板內(nèi)容 自己編寫(xiě)html代碼
4）使用items配置項(xiàng)在面板中添加組件
2）標(biāo)準(zhǔn)布局類(lèi) 主要包括如下11種：
auto（自動(dòng)布局） checkboxgroup（復(fù)選框組布局） fit（自適應(yīng)布局） column（列布局）
accordion（折疊布局）table(表格布局） card（卡片式布局） border（邊框布局）
anchor（錨點(diǎn)布局） box（盒布局） absolute（絕對(duì)位置布局）
（1）auto自動(dòng)布局 默認(rèn)采用，使用原始的HTML文檔流來(lái)布局子元素。
（2）fit自適應(yīng)布局 使唯一的子元素充滿(mǎn)容器
（3）accordion折疊布局 只有一個(gè)子面板處于打開(kāi)狀態(tài)，其他的收縮起來(lái)
（4）card卡片式布局 多個(gè)子面板，只有一個(gè)處于打開(kāi)狀態(tài)，其他的需要調(diào)用事件才能顯示出來(lái)
（5）anchor錨點(diǎn)布局 根據(jù)容器大小為其所包含的子面板進(jìn)行定位。
（6）absolute絕對(duì)定位 可以根據(jù)面板的位置配合x/y坐標(biāo)進(jìn)行定位
（7）checkboxgroup復(fù)選框組布局
（8）column列布局 多列風(fēng)格的布局樣式
（9）table表格布局 可以創(chuàng)建出復(fù)雜的表格布局
（10）border邊框布局 將整個(gè)容器分為5個(gè)部分：東南西北中。
（11）box盒布局
在ext中，所有的布局都是從ext.container開(kāi)始的
3）使用viewport
viewport代表整個(gè)瀏覽器窗口的顯示區(qū)域，將document.body作為渲染對(duì)象，它會(huì)根據(jù)瀏覽器窗口的大小自動(dòng)調(diào)整自身的尺寸，每個(gè)頁(yè)面中只允許出現(xiàn)一個(gè)viewport實(shí)例。
6.ext的事件和類(lèi)
分為兩種類(lèi)型：自定義類(lèi)型事件和瀏覽器事件
自定義事件：所有繼承自Ext.util.Observable類(lèi)的控件都可以支持事件，可以為這些對(duì)象定義一些事件，然后為這些事件配置監(jiān)聽(tīng)器。當(dāng)某個(gè)事件被觸發(fā)時(shí)，ext會(huì)自動(dòng)調(diào)用對(duì)應(yīng)的監(jiān)聽(tīng)器。
瀏覽器事件：傳統(tǒng)意義上的鼠標(biāo)單擊、移動(dòng)等事件。