ExtJs的Panel組件的簡單使用實例，如下代碼：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<style type="text/css">
.contain{
width:100%;
height:100%;
top:0;
left:0;
}
.center{
position:absolute;
top:30%;
left:40%;
text-align:left;
}
</style>
<title>Panel</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var _panel=new Ext.Panel({
title:"註冊信息",
width:300,
height:200,
//如果這裏的frame屬性默認（不寫），或者是設置爲false，則Panel的背景色爲透明的，
// 而且Panel中添加的組件將會跑到Panel的外面來
frame:true,
layout:"form", //指定這個Panel是一個表單
listeners:{
"render":function(_panel){
//運行時添加組件的方式
_panel.add({xtype:"textfield",fieldLabel:"姓名",id:"userName"});
_panel.add(new Ext.form.TextField({
id:"address",
fieldLabel:"地址",
width:150
}));
}
}
});
//addButton的兩種方式:(這裏都是設計時的添加組件的方式)
//1.這種addButton的方式，則是Panel來管理按鈕的樣式
_panel.addButton({text:"確 定",listeners:{
"click":function(){
var _userName=Ext.getCmp("userName");
var _address=Ext.getCmp("address");
alert("用戶名爲："+_userName.getValue()+"\n地址是："+_address.getValue());
}
}
});
//2.這種addButton的方式，則是程序員自己管理button的樣式
_panel.addButton(new Ext.Button({
text:"取 消",
width:100,
listeners:{
"click":function(){
alert("取消");
}
}
}));
//在頁面註冊2個DIV標籤，並把Panel渲染到class爲center的標籤中，從而達到了通過css控制Panel的位置
_panel.applyToMarkup(Ext.DomHelper.append(Ext.getBody(),{
tag:"div",
cls:"contain",
cn:[{
tag:"div",
cls:"center"
}]
},true).child("div"));
//渲染Panel
// _panel.render(Ext.getBody());
});
</script>
</head>
<body></body>
</html>
效果圖：
7RFW)$$SCFRUZQJ@Q4W.jpg)