ExtJS 4.x 第二搞窗口(Window)-优快云博客

本文详细介绍了使用ExtJS4框架创建一个简单的窗口实例，通过编写JSP页面、引入必要的核心文件、定义窗口类及其属性，最终展示HelloWorld消息，适合初学者快速上手ExtJS4。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

停了好长近两个月份的ExtJS 4,今天重新开始，搞个窗口Hello World !

测试的JSP：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>窗口测试 1 </title>
        <jsp:include page="../include/ext-core-top.jsp" flush="true">
            <jsp:param value="../" name="basePath" />
        </jsp:include>
        <script type="text/javascript" src="win1.js"></script>
        
    </head>
    <body>
        <h1>Hello World!</h1>
    </body>
</html>

../include/ext-core-top.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="${param.basePath}/ext-4.1/resources/css/ext-all.css" />
<script type="text/javascript" src="${param.basePath}/ext-4.x/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="${param.basePath}/style/main.css" />
<link rel="stylesheet" type="text/css" href="${param.basePath}/style/icon-all.css" />

win1.js

/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
Ext.onReady(function(){
    console.warn("Hello","Window one");  //firebug调试语句，未装会报错
    
    /*定义一个窗口 名称Win,My包下 */
    Ext.define('My.Win',{
        extend:'Ext.window.Window',
        title:'My Win Test',
        width:440,
        height:280
    });
    
    /*定义一个窗口，继承My.Win,后面会实例一下，再直接show出来*/
    Ext.define('My.Win.Reg',{
        extend:'My.Win',
        statics:{
            speciesName:'Snow Leopard'
        }
    });
    
    /**定义窗口 用按钮show出来*/
    var myWin = Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400,
        layout: 'fit',
        modal:true,//模态窗口
        closeAction:'hide',//关闭方式隐藏
        fbar: [//下部给几个按钮
        {
            type: 'button', 
            text: 'Button 1'
        },{
            type: 'button', 
            text: 'Button 2'
        }
        ],
        items: {  // Let's put an empty grid in just to illustrate fit layout
            xtype: 'grid',//子组件grid
            border: false,
            columns: [{
                header: 'World'//列头
            }],                 // One header just for show. There's no data,
            store: Ext.create('Ext.data.ArrayStore', {}) // A dummy empty data store
        }
    });
    
    var cac = new My.Win.Reg();//实例化窗口
    cac.show();
    
    /*页面加个按钮，show出窗口来*/
    Ext.create('Ext.Button',{
        renderTo:Ext.getBody(),
        width:128,
        text:'show Window',
        handler:function(){
            myWin.show();
        }
    });
});