<link rel="stylesheet" type="text/css" href="<%=basePath %>/ext-3.4/resources/css/ext-all.css">
<script type="text/javascript" src="<%=basePath%>/ext-3.4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=basePath%>/ext-3.4/ext-all.js"></script>
<!-- 引入预先设计好的视图组件 -->
<script type="text/javascript" src="<%=basePath%>/jsp/js/HelloWindow.js"></script>
<script type="text/javascript">
// 从事Extjs组件设计时，常用的组件会经常出现，比如视图组件。如果视图组件每次使用时都要设置大小、标题，那么会让人非常心烦，预配置
// 就是预先设置组件的属性，让特定属性先具有特定的默认值，以便直接使用
Ext.onReady(function(){
var helloWindow = new HelloWindow({
items:{
html:‘<p>This is a window.</p>‘
}
});
helloWindow.show(‘windowDiv‘);
});
</script>HelloWindow.js如下：
var HelloWindow = Ext.extend(Ext.Window,{
title:‘Hello‘,
width:500,
height:300,
// 重写父类Window的initComponent方法
initComponent:function(){
console.info("start HelloWindow component.");
// 等价于Ext.Window.prototype.initComponent.apply(this,arguments)
HelloWindow.superclass.initComponent.apply(this,arguments);
}
})<body>
<div id="windowDiv"></div>
</body>原文：http://blog.csdn.net/fuyuwei2015/article/details/47158907