手把手教你ExtJS從入門到放棄——篇六(示例2:window中新增子元件)
例2: 在window中新增子元件,並講解常用查詢元件的方式: 重點分析:該例項主要針對於元件的查詢進行詳細的講解,在以後的應用開發中,同學們應該學會各種方式去查詢所需要的元件,不要拘泥於某種特定形式,這樣會給開發思路帶來很多好處。
--------------------
具體需求:建立窗體寬為瀏覽器介面40%,高為400px,不允許拖拽,不允許改變大小,不顯示右上角關閉按鈕,顯示摺疊按鈕,設定任意非預設背景顏色與任意padding,新增兩個子元件,一個panel一個button,panel寬為窗體50%,高為100px,顯示內容為“我是面板”,button文字內容為“點我”,點選觸發彈窗事件,彈出“點什麼點”
不多說,上程式碼
003window03_ex002.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- ext的樣式檔案 -->
<link rel="styleSheet" type="text/css" href="../js/extjs/resources/css/ext-all.css" />
<!-- extjs的核心檔案 -->
<script type="text/javascript" charset="utf-8" src="../js/extjs/ext-all-debug.js"></script>
<!-- 國際化檔案 -->
<script type="text/javascript" charset="utf-8" src="../js/extjs/ext-lang-zh_CN.js"></script>
<script type="text/javascript" charset="utf-8" src="003window03_ex002.js"></script>
</head>
<body>
<input value="點我" id="btn" type="button"/>
</body>
</html>
003window03_ex002.js(程式碼不提供,對著需求看,不懂就查API,篇一有提供學習資源與API)
瀏覽器訪問效果圖如下(圖太大變形了)