ExtJS 4.x 第二搞 窗口(Window)

来源:互联网 发布:ubuntu 163源 编辑:程序博客网 时间:2024/05/02 03:48


停了好长近两个月份的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();        }    });});