tabPanel button 对象的创建 (2)

最新推荐文章于 2025-10-28 13:21:18 发布

原创最新推荐文章于 2025-10-28 13:21:18 发布 · 147 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JavaScript #CSS #HTML #ViewUI

extjs 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用ExtJS创建基本UI组件，包括窗口、面板、选项卡面板及按钮，并展示了如何将这些组件渲染到指定的HTML元素中。通过具体代码实例，读者可以了解ExtJS的基本用法和布局方式。

Ext.onReady(function() {

			 var win = new Ext.Window({// 创建窗口对象
			 applyTo:'mydiv',//applyTo应用节点的id,或是DOM节点，又或者是与DIV相当的现有元素
			 title : "hello",//标题
			 width : 300,
			 height : 200,
			 //modal:true,
			 html : '<h1>Hello World</h1>'//显示的html的内容
			 })
			 win.show();//显示组件
			 //win.renderTo(Ext.getBody());//renderTo指添加到某个位置

			 var obj={
			 renderTo:"mydiv",//等价于 panel.render("mydiv");
			 title:"hello",
			 width:300,
			 height:200,
			 html:'<h1>hello world</h1>'
			 };
			 var panel=new Ext.Panel(obj);//创建面板对象
			 // panel.render("mydiv");//render参数表示页面id

			 var panel = new Ext.TabPanel({// 创建选项卡面板
			 renderTo : 'mydiv',
			 width : 300,
			 height : 200,
			 items : [{//容器控件中的子元素
			 title : "面板一",
			 height : 30
			 }, {
			 title : "面板二",
			 height : 30
			 }, {
			 title : "面板三",
			 height : 30
			 }]
			 })
			 // panel.render("mydiv");

			var button = new Ext.Button({// 创建按钮对象

				renderTo : 'mydiv',
				text : "添加",// 显示文本
				pressed : true,// 显示按下的状态
				height : 30,
				handler : Ext.emptyFn()

			})

		})

<%@ 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>