1. 程式人生 > >手把手教你ExtJS從入門到放棄——篇六(示例2:window中新增子元件)

手把手教你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)

瀏覽器訪問效果圖如下(圖太大變形了)