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

webcode

浏览: 5949092 次
性别:
来自: 上海

最近访客更多访客>>

ap950

u012363178

wangyy

ybfjavaeye

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (7533)

社区版块

存档分类

2013-02 ( 78)
2013-01 ( 83)
2012-12 ( 121)
更多存档...

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

分享到：