页面代码 first.jsp
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="gb2312"%>
<%
request.setAttribute("base", request.getContextPath());
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
href="${base}/script/ext/resources/css/ext-all.css">
<script type="text/javascript"
src="${base}/script/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="${base}/script/ext/ext-all.js"></script>
<script type="text/javascript" src="${base}/script/sample/first.js"></script>
</head>
<body>
<div id='mydiv'></div>
</body>
</html>
first.js 具体的组件显示,对象定义
Ext.onReady(function() { Ext.Msg.alert("提示","helloworld");//定义一个代码提示框 var myPanel=new Ext.Panel({//创建面板对象 id:'pid',//id标识 renderTo:Ext.getBody(),//指定在某个地方显示 title:'面板',//面板标题 height:300,//高度 width:300//宽度 }) var viewPoint = new Ext.Viewport({//创建视图板块显示 id : 'vp', //renderTo:Ext.getBody(), layout : 'border',// 指定布局方式 items : [{ region : 'north',// 上方布局显示区域 height : 50 }, { region : 'west',//左边导航区域 width : 200 }, { region : 'center',//中间内容显示区域 width : 300 }, { region : 'east',//右边区域 width : 100 }, { region : 'south',//底部区域 height : 20 }] }) viewPoint.renderTo('mydiv'); })