<html>
<head>
<title>Accordion Layout</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<script type="text/javascript" src="tabs-example.js"></script>
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
<script type="text/javascript">var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));</script><script type="text/javascript">try{var pageTracker = _gat._getTracker("UA-1396058-1");pageTracker._initData();pageTracker._trackPageview();} catch(err) {}</script>
<!-- LIBS -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../ext-all.js"></script>
<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
}
.empty .x-panel-body {
padding-top:20px;
text-align:center;
font-style:italic;
color: gray;
font-size:11px;
}
</style>
<script type="text/javascript">
Ext.onReady(function() {// 添加一个监听器,复杂方法的调用
var item1 = new Ext.Panel({
title:'新闻管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according1',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
//html : '<iframe width=100% height=100% src=' + btn.id + ' />',
autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item2 = new Ext.Panel({
title:'专题管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according2',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
//html : '<iframe width=100% height=100% src=' + btn.id + ' />',
autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item3= new Ext.Panel({
title:'案例管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according3',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
//html : '<iframe width=100% height=100% src=' + btn.id + ' />',
autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item4 = new Ext.Panel({
title:'留言管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according4',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
//html : '<iframe width=100% height=100% src=' + btn.id + ' />',
autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item5 = new Ext.Panel({
title:'品牌管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according5',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
//html : '<iframe width=100% height=100% src=' + btn.id + ' />',
autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var item6 = new Ext.Panel({
title:'业务管理',
cls:'empty',
items:[
new Ext.Button({
id:'test_according6',
text:'测试管理',
width:'100%',
listeners:{
click: function(btn, event) {
//alert("sad");
var n;
n = contentPanel.getComponent(btn.id);
if(n) {
contentPanel.setActiveTab(n);
return;
}
n = contentPanel.add({
id : btn.id,
title : btn.id,
//html : '<iframe width=100% height=100% src=' + btn.id + ' />',
autoLoad:'test2.html',
closable : 'true'
});
contentPanel.setActiveTab(n);
}
}
})]
});
var accordion = new Ext.Panel({//方法的调用 : 先初始化一个Panel
region:'west',
margins:'0 0 0 5',
split:true,
width: 200,
layout:'accordion',
items: [item1, item2, item3, item4, item5,item6]
});
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
closable:true,
title:'test tab',
autoLoad:'test1.html'
}]
});
new Ext.Viewport({//viewport在面板上呈现应用程序 --- 这是基本
layout:'border',
items:[accordion,contentPanel]
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
</body>
</html>
分享到：
相关推荐
ExtJS4是一个强大的JavaScript框架，用于构建富客户端Web应用程序。这个实例结合了多个技术，包括Accordion布局、Servlet、Struts2以及JSON数据交互，以及Ext.tree.Panel组件，以创建一个功能丰富的用户界面。 ...
这个后台管理框架是利用EXTJS4.0.7的功能，构建了一个功能丰富的交互式用户界面，通常包括数据管理、表格、图表、窗口、菜单等组件，用于后台系统的管理和操作。 在描述中提到的“动态树”是指可以实时更新和交互的...
本项目是一个完整的权限控制项目，有数据库表以及数据，界面使用easyui 的accordion做权限控制，后台使用oracle数据库，共4个表，用户，角色，权限，模块表，不同的用户登录，可以看到不同的导航栏
首先，我们来了解一下如何在ExtJS中创建一个accordion布局。你需要创建一个Ext.container.Container实例，并将其layout属性设置为'accordion'。下面是一个简单的示例代码： ```javascript Ext.application({ name:...
标题中的“extjs菜鸟做的动态accordion加动态tree”意味着这个项目是初学者使用EXTJS库构建的一个功能，其中包括了动态的Accordion组件和动态的Tree组件。EXTJS是一个强大的JavaScript前端框架，它提供了丰富的用户...
ExtJS 4 复杂 百叶窗(accordion)布局
Accordion布局是一种特殊的布局方式，它允许在一个Panel内嵌套多个子Panel，并且这些子Panel只能有一个可见。当一个子Panel被展开时，其他所有子Panel会自动折叠。这种布局模式常用于空间有限但需要显示多个相关但...
在本示例中，我们将深入探讨如何利用jQuery Accordion来构建一个树形菜单栏框架。 首先，让我们理解jQuery Accordion的基本概念。Accordion组件允许用户点击面板标题来展开或收起内容区域，只显示一个面板内容，...
CollapsiblePanel（可折叠面板）则是Accordion控件的一个核心组成部分，它是一个可以收起和展开的独立单元。在不展开时，CollapsiblePanel只显示标题，展开后则显示详细内容。这种方式允许用户根据需要选择查看哪些...
Accordion控件允许在一个区域内以折叠面板的形式展示多个部分的内容，用户可以逐个展开或关闭这些面板。在Asp.net中，Accordion通过设置`Panes`属性来添加和管理各个面板，每个Pane包含一个标题和内容区域。例如： ...
3、通过实现角色管理、用户管理、部门管理三个基础的功能模块，演示了Viewport、Container、Panel、Grid、Window、Form、Tree等常用组件的用法，以及border、column、form、fit、accordion、hbox等常用布局方式；...
最后利用一个商品信息管理系统和一个企业任务管理系统，向读者演示了ExtJS在实际项目中的应用以及实现流程。 《精通JS脚本之ExtJS框架》附有配套光盘，提供了书中实例的源代码和视频教学文件。此外，读者还可以...
"Accordion"在IT行业中通常指的是一个用户界面元素，它是一种可折叠的内容区域，常用于网页设计和应用程序中。这种设计模式允许用户展开或关闭各个部分，以显示或隐藏详细信息，从而节省空间并提高交互性。它在网页...
1. 该框架的开发环境为EclipseJEE集成开发工具。 2. 基于Spring4框架的三层架构开发完成。 3. Mybatis版本为：3.2.8。 4. 使用了SpringMVC框架，Spring4的xml配置和注解配置。 5. 前台展示页面使用了JQuery ...
ASP.NET AJAX控件之Accordion（视频+源码+ajax安装包） ajax
在`accordion.jsp`文件中，很可能包含了示例代码或者一个完整的Accordion实现，用于演示如何在实际项目中应用。通过查看源码，你可以学习到更多关于如何配置和扩展Accordion的细节，例如添加事件监听器以响应用户的...
ExtJS4是一个强大的JavaScript前端框架，它采用Model-View-Controller（MVC）设计模式，使得构建复杂的Web应用程序变得更加容易和高效。MVC模式是软件工程中的一种设计模式，它将应用程序分为三个核心部分：模型...
在ASP.NET AJAX框架中，Accordion控件是一个非常实用的交互式用户界面组件。它允许开发者在一个有限的空间内展示多段内容，用户可以逐个展开或折叠这些内容，提高了网页的可用性和用户体验。本篇我们将深入探讨...
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架,本课程是一套基于Extjs4.1.1版本进行全新讲解Extjs的课程。课程从基础开始，配合项目实战应用，让用户在最短的时间内掌握Extjs的...
在Silverlight 4版本中，Accordion组件是一个非常有用的UI元素，它提供了类似于折叠面板的布局，用户可以展开和折叠各个部分，以查看或隐藏内容。 Accordion组件的核心特性是其可扩展性，使得开发者可以根据需要...