小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索

QQ空間 QQ好友新浪微博微信

ExtJS入門——開始 |

旭龍 2013-01-08

展開全文

認(rèn)識ExtJS
extjs是使用javascript、css和html等技術(shù)實現(xiàn)的主要用于創(chuàng)建用戶界面，且與后臺技術(shù)無關(guān)的前端ajax框架。
extjs來源于yui，開發(fā)理念來源于傳統(tǒng)的桌面軟件開發(fā)。

1.下載extjs，解壓，得到目錄結(jié)構(gòu)

builds：是extjs壓縮后的代碼，體積更小，加載更快
docs ：extjs的文檔
examples：官方示例
locale：多國語言的資源文件
overview：extjs的功能簡述
pkgs：extjs各部分功能的打包文件
resource：extjs要用到的圖片文件與樣式文件。
src：未壓縮過的代碼目錄
bootstrap.js：extjs庫的引導(dǎo)文件
ext-all.js ：必須引入的核心庫
ext-all-debug.js：ext-all.js的調(diào)試版

2.也從hello world開始（extjs 4.0）

<HTML>
<HEAD>
<TITLE>HelloWorld</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="./ext-4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext-4.0/bootstrap.js"></script>
<script type="text/javascript" src="./ext-4.0/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('HelloWorld', 'Hello World!Hello World!Hello World!Hello World!');
});
</script>
</HEAD>
<BODY></BODY>
</HTML>

3.實現(xiàn)工具欄和菜單欄

<script type="text/javascript">
Ext.onReady(function(){
var toolbar = new Ext.toolbar.Toolbar({
renderTo:'toolbar',
width:300
});
 
var childrenMenu = new Ext.menu.Menu({
ignoreParentClicks:true,
items:[
{text:'open one'},
{text:'open two'}
]            
});
 
var fileMenu = new Ext.menu.Menu({
shadow:'frame',
allowOtherMenus:true,
items:[
new Ext.menu.Item({
text:'new'
}),
{text:'open',menu:childrenMenu},
{text:'close'}
]
});
 
 
toolbar.add(
{
text:'新建',
menu:fileMenu
},
{
text:'打開'
},
{
text:'保存'
},
'->',
'<a href="#">link</a>',
'text'
);
 
});
</script>
</HEAD>
<BODY>
<div id='toolbar'></div>
</BODY>

4.最常用的表單
1）Ext.form.Basic基本表單提供了字段管理、數(shù)據(jù)驗證、表單提交、數(shù)據(jù)加載等功能
2）認(rèn)識Ext.form.Panel表單面板是表單項的容器，默認(rèn)使用anchor布局
Ext.form.Panel與傳統(tǒng)表單的提交方式、表單的驗證和對表單組件的支持有不同：
（1）表單的提交方式原始的方式是同步進(jìn)行，panel使用異步方式
（2）對表單驗證的支持 ExtJS支持javascript驗證方式
（3）對表單組件的支持 panel支持ext封裝后的高級組件
例子一：

<script type="text/javascript">
Ext.onReady(function(){
Ext.QuickTips.init();
var form = new Ext.form.Panel({
title:'myForm',
height:120,
width:200,
frame:true,
renderTo:'form',
defaults:{
labelWidth:50,
width:150,
labelAlign:'left',
allowBlank:false,
blankText:'will not null',
msgTarget:'qtip'
},
items:[{
xtype:'textfield',
fieldLabel:'name'
},
{
xtype:'numberfield',
fieldLabel:'age'
}]
});
});
</script>
</HEAD>
<BODY>
<div id='form'></div>
</BODY>

5.面板和布局類
1）Ext.panel.Panel 主要包括5部分：底部工具欄，頂部工具欄，面板頭部，面板底部，面板體
對于面板最重要的功能和作用就是在其中顯示各種不同來源的內(nèi)容，extjs提供了4種不同的顯示內(nèi)容的方式，分別是：
1）使用autoLoad配置項為面板加載遠(yuǎn)程頁面就是遠(yuǎn)程加載html文件
2）使用contentEl配置項為面板加載本地資源加載當(dāng)前頁面中的html代碼
3）使用html配置項自定義面板內(nèi)容自己編寫html代碼
4）使用items配置項在面板中添加組件

2）標(biāo)準(zhǔn)布局類主要包括如下11種：
auto（自動布局） checkboxgroup（復(fù)選框組布局） fit（自適應(yīng)布局） column（列布局）
accordion（折疊布局）table(表格布局） card（卡片式布局） border（邊框布局）
　　 anchor（錨點布局）　box（盒布局） absolute（絕對位置布局）
（1）auto自動布局默認(rèn)采用，使用原始的HTML文檔流來布局子元素。
（2）fit自適應(yīng)布局使唯一的子元素充滿容器
（3）accordion折疊布局只有一個子面板處于打開狀態(tài)，其他的收縮起來
（4）card卡片式布局多個子面板，只有一個處于打開狀態(tài)，其他的需要調(diào)用事件才能顯示出來
（5）anchor錨點布局根據(jù)容器大小為其所包含的子面板進(jìn)行定位。
（6）absolute絕對定位可以根據(jù)面板的位置配合x/y坐標(biāo)進(jìn)行定位
（7）checkboxgroup復(fù)選框組布局
（8）column列布局多列風(fēng)格的布局樣式
（9）table表格布局可以創(chuàng)建出復(fù)雜的表格布局
（10）border邊框布局將整個容器分為5個部分：東南西北中。
（11）box盒布局
在ext中，所有的布局都是從ext.container開始的
3）使用viewport
viewport代表整個瀏覽器窗口的顯示區(qū)域，將document.body作為渲染對象，它會根據(jù)瀏覽器窗口的大小自動調(diào)整自身的尺寸，每個頁面中只允許出現(xiàn)一個viewport實例。

6.ext的事件和類
分為兩種類型：自定義類型事件和瀏覽器事件
自定義事件：所有繼承自Ext.util.Observable類的控件都可以支持事件，可以為這些對象定義一些事件，然后為這些事件配置監(jiān)聽器。當(dāng)某個事件被觸發(fā)時，ext會自動調(diào)用對應(yīng)的監(jiān)聽器。
瀏覽器事件：傳統(tǒng)意義上的鼠標(biāo)單擊、移動等事件。

作者:陳建虹
原文:http://blog.csdn.net/cjh6311882/article/details/8287283