|
|
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,因此所有組件可能有共同的屬性，如下圖
JavaScript技術：ExtJs 學習筆記基礎篇 Ext組件的使用第1/2頁，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
