ExtjS--accordion布局

lixue150

浏览: 78086 次
性别:
来自: 合肥

最近访客更多访客>>

sxl1001

我...

根号九加一

dreamhappens

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ExtJs学习

进到公司后，发现公司在使用ExtJs，以前在培训学校一直使用的是Jquery，所以现在开始学习一些基础的东西，虽然现在我还没有做项目，相信以后，在项目中会用的到

accordion.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!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=UTF-8">
<title>ExtJs 学习</title>
<!-- 框架的Css -->
<link rel="stylesheet" type="text/css"
	href="ext/resources/css/ext-all-notheme.css" />
<link rel="stylesheet" type="text/css"
	href="ext/resources/css/xtheme-blue.css" />

<!-- 框架的JS文件 -->
<!-- ext-base-debug.js必须放在js文件的第一个，否则框架就会显示不出来 -->
<script type="text/javascript" src="ext/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext/ext-all-debug.js"></script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
	Ext.onReady(function() {
		new Ext.Panel({
			renderTo : "hello",//panel是显示在html中的，id为hello中的
			title : "Accordion",//标题
			collapsible : true,//右上角的收缩按钮，设为false则不显示，默认为false
			width : 500,
			height : 200,
			floating : true,//只有设置为true的时候，横纵坐标才可以设置了才会有效果
			x : 100,//panel的横坐标
			y : 100,//panel的纵坐标
			frame : true,//圆角边框
			/* draggable : true,//true则可以拖动 ,但是位置不会改变 */
			//拖动到指定的位置
			draggable : {
				insertProxy : false,//拖动时不虚线显示原始位置
				onDrag : function(e) {
					var pel = this.proxy.getEl();
					this.x = pel.getLeft(true);
					this.y = pel.getTop(true);//获得拖动时panel的坐标
				},
				endDrag : function(e) {//移动到最终位置
					this.panel.setPosition(this.x, this.y);
				}
			},
			layout : "accordion",//布局样式
			layoutConfig : {//布局的详细配置
				animate : true
			},
			//构造面板集合
			items : [ {
				title : "子元素1",
				html : "这是子元素1中的内容"//panel主体的内容
			}, {
				title : "子元素2",
				html : "这是子元素2中的内容"
			}, {
				title : "子元素3",
				html : "这是子元素3中的内容"
			} ],
			buttons : [ {
				text : "确认"
			}, {
				text : "取消"
			} ]
		});
	});
</script>
</head>
<body>
	<div id="hello"></div>
</body>
</html>

结构图

所用到的ext的文件，打包成压缩文件，放在下面

ext.rar (2.6 MB)
下载次数: 40

查看图片附件

分享到：

Ext.Panel主要功能 | Ckeditor和数据库交互

2011-07-26 14:07
浏览 2774
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ExtjS--accordion布局

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

ExtjS--accordion布局

评论

发表评论

相关推荐

Struts2.0.11+spring2+Hibernate3jar包

Ext+struts2.1.6+spring2+hibernate3的jar包

设置下拉框的初始值

Ext.grid.ColumnModel

Ext进行查询后分页的问题

TreePanel常用配置

TextField

FormPanel常用的属性

ext DateField控件格式

GridPanel简单实例

Ext.grid.GridPanel

ExtJs FormPanel 其他组件的应用

ExtJs FormPanel 空验证

ExtJs--FormPanel的checkboxToggle属性效果

FormPanel fieldset应用

ExtJs-FormPanel学习

ExtJs--FormPanel主要配置项

ExtJs viewPort属性

ExtJs学习--ViewPort练习

TreePanel学习--AsyncTreeNode

最近访客更多访客>>