ExtJS 4.x 第二搞 窗口(Window)
停了好长近两个月份的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();
}
});
});