天介紹一下Ext中組件舉幾個簡單的例子做說明。注意：文章內容有些摘自本人學習過程中看到的資料。
Ext2.0對架構進行了非常大的重構，其中最重要的是形成了一個結構及層次分明的組件體系，由這些組件形成了Ext控制項。Ext組件由Component類定義，每一種組件都有一個指定的xtype屬性值，通過該值可以得到一個組件的類型或者是定義一個指定類型的組件。
Ext組件體系由所示：
組件大致可分成三大類，即基本組件、工具列組件、表單元素組件。
基本組件有
這麼多的組件，可都是非常酷的。組件使用可以直接通過關鍵字new 來建立，比如上篇文章中說到的建立一個Window框
var win=new Ext.Window();
除了這種建立方式，一般都會在建構函式中加一些配置屬性來初始化組件。比如建立一個面板：
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script src="extjs/ext-base.js" type="text/javascript"></script>
<script src="extjs/ext-all.js" type="text/javascript"></script>
<script src="extjs/ext-lang-zh_CN.js" type="text/javascript"></script>
<script language="javascript">
function panel(){
var params={title:"Hello",width:300,height:200,html:"<h1>一個面板</h1>"};
var panel=new Ext.Panel(params);
panel.render("panel");
}
</script>
</head>
<body>
<input type="button" onclick="panel()" value="顯示面板">
<hr/>
<div id="panel"></div>
</body>
</html>
關鍵代碼：
function panel(){
var params={title:"Hello",width:300,height:200,html:"<h1>一個面板</h1>"};
var panel=new Ext.Panel(params);
panel.render("panel");
}
params是設定Panle的參數，title:標題，width:寬度,height：高度,html:面板顯示的內容
var panel=new Ext.Panel(params); 這句代碼建立了一個面板，並在建構函式中設定了面板屬性。
panel.render("panel"); 表示頁面上的div元素id.、
代碼可以簡寫為：
複製代碼 代碼如下:var panel=new Ext.Panel({renderTo:"panel",title:"Hello",width:300,height:200,html:"<h1>一個面板</h1>"});
對於組件中的子項目組件，都支援消極式載入的方式建立控制項，此時可以直接通過父容器的items傳遞數組方式實現。
function panel(){
var params={
title:"Hello",
width:300,
height:200,
html:"<h1>一個面板</h1>",
items:[
new Ext.Panel({title:"Panel1",height:100}),
new Ext.Panel({title:"Panel2",height:100})
]
};
var panel=new Ext.Panel(params);
panel.render("panel");
}
如果需要讓組件顯示出不同的效果，我們就需要通過建構函式中的參數設定。
由於組件都繼承自Ext.Component,因此所有組件可能有共同的屬性，如
