extjs 提示窗口面板对象视图区域显示对象创建(1)

使用JS和Ext JS创建交互式面板

最新推荐文章于 2023-06-17 23:14:54 发布

原创最新推荐文章于 2023-06-17 23:14:54 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JavaScript #CSS #HTML #JSP #ViewUI

extjs 专栏收录该内容

18 篇文章

订阅专栏

页面代码  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');

		})