快捷導(dǎo)航

ExtJs 學(xué)習(xí)筆記基礎(chǔ)篇 Ext組件的使用第1/2頁(yè)

更新時(shí)間：2008年12月29日 23:07:18 作者：

昨天剛接觸到Extjs，簡(jiǎn)單寫了篇學(xué)習(xí)筆記，今天繼續(xù)。

天介紹一下Ext中組件舉幾個(gè)簡(jiǎn)單的例子做說明。注意：文章內(nèi)容有些摘自本人學(xué)習(xí)過程中看到的資料。
Ext2.0對(duì)框架進(jìn)行了非常大的重構(gòu)，其中最重要的是形成了一個(gè)結(jié)構(gòu)及層次分明的組件體系，由這些組件形成了Ext控件。Ext組件由Component類定義，每一種組件都有一個(gè)指定的xtype屬性值，通過該值可以得到一個(gè)組件的類型或者是定義一個(gè)指定類型的組件。
Ext組件體系由下圖所示：

組件大致可分成三大類，即基本組件、工具欄組件、表單元素組件。
基本組件有

這么多的組件，可都是非?？岬?。組件使用可以直接通過關(guān)鍵字new 來創(chuàng)建，比如上篇文章中說到的創(chuàng)建一個(gè)Window框
var win=new Ext.Window();
除了這種創(chuàng)建方式，一般都會(huì)在構(gòu)造函數(shù)中加一些配置屬性來初始化組件。比如創(chuàng)建一個(gè)面板：
<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>一個(gè)面板</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>
關(guān)鍵代碼：
function panel(){
var params={title:"Hello",width:300,height:200,html:"<h1>一個(gè)面板</h1>"};
var panel=new Ext.Panel(params);
panel.render("panel");
}
params是設(shè)置Panle的參數(shù)，title:標(biāo)題，width:寬度,height：高度,html:面板顯示的內(nèi)容
var panel=new Ext.Panel(params); 這句代碼創(chuàng)建了一個(gè)面板，并在構(gòu)造函數(shù)中設(shè)置了面板屬性。
panel.render("panel"); 表示頁(yè)面上的div元素id.、
代碼可以簡(jiǎn)寫為：

復(fù)制代碼代碼如下:

var panel=new Ext.Panel({renderTo:"panel",title:"Hello",width:300,height:200,html:"<h1>一個(gè)面板</h1>"}); 

對(duì)于組件中的子元素組件，都支持延遲加載的方式創(chuàng)建控件，此時(shí)可以直接通過父容器的items傳遞數(shù)組方式實(shí)現(xiàn)。

function panel(){
var params={
title:"Hello",
width:300,
height:200,
html:"<h1>一個(gè)面板</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");
}