下面是一个例子， 新建一个main.html页面
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-base.js">
</script>
<script type="text/javascript" src="extjs/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: 0;
text-align: center;
font-style: italic;
color: gray;
font-size: 11px;
}
.x-btn button {
font-size: 14px;
}
.x-panel-header {
font-size: 14px;
}
</style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
var addPanel = function(btn, event) {
var n;
n = tabPanel.getComponent(btn.id);
if (n) {
tabPanel.setActiveTab(n);
return;
}
n = tabPanel.add({
id : btn.id,
title : btn.text,
html : '<iframe width=100% height=100% src=' + btn.id + '.html />',
// autoLoad : '',
closable : 'true'
});
tabPanel.setActiveTab(n);
}
var item1 = new Ext.Panel({
title : 'Tariff Manager',
cls : 'empty',
items : [new Ext.Button({
id : 'tariff_program',
text : 'Tariff Program',
width : '100%',
listeners : {
click : addPanel
}
}),
new Ext.Button({
id : 'b1',
text : 'Tariff Fee',
width : '100%',
listeners : {
click : addPanel
}
})
]
});
var item2 = new Ext.Panel({
title : 'Accordion Item 2',
html : '<empty panel>',
cls : 'empty'
});
var item3 = new Ext.Panel({
title : 'Accordion Item 3',
html : '<empty panel>',
cls : 'empty'
});
var item4 = new Ext.Panel({
title : 'Accordion Item 4',
html : '<empty panel>',
cls : 'empty'
});
var item5 = new Ext.Panel({
title : 'Accordion Item 5',
html : '<empty panel>',
cls : 'empty'
});
var accordion = new Ext.Panel({
region : 'west',
margins : '5 0 5 5',
split : true,
width : 210,
layout : 'accordion',
items : [item1, item2, item3, item4, item5]
});
var tabPanel = new Ext.TabPanel({
region : 'center',
enableTabScroll : true,
deferredRender : false,
activeTab : 0,
items : [{
title : 'index',
html : "<iframe width=100% height=100% src='images/homepage_bg.gif'>"
// html : "<a href='http://zhidao.baidu.com/'>aaa</a>"
// autoLoad :'b.jsp'
}]
});
var topPanel = new Ext.Panel({
region:'north',
margins:'5 0 5 5',
// width:1000,
// heigh: 200,
html:"<iframe width=100% height=100% src='top.html'>"
})
var viewport = new Ext.Viewport({
layout : 'border',
items : [topPanel,accordion, tabPanel]
});
});
</script>
</body>
</html>
然后再建一个top.html页面
<!DOCTYPE html>
<html>
<head>
<title>top.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body background="blue">
<div align="center"><h2>Welcome top</h2></div>
</body>
</html>
运行一下就知道就怎么回事啦，代码需要自己研读一下
分享到：
相关推荐
在"EXT JS"这一标签下，我们关注的是EXTJS框架的使用和学习。EXTJS 4.1.4是该框架的一个稳定版本，提供了大量的改进和新功能。例如，这个版本引入了新的布局管理器，使得页面布局更加灵活和精细；同时增强了数据包层...
EXTJS 6.6 框架是一款强大的前端开发工具，尤其适合构建企业级的Web应用程序。这个项目是一个基于EXTJS 6.6的Web应用实例，提供了完整的登录页面和首页布局，包括左侧菜单和列表展示。以下是关于EXTJS 6.6框架以及该...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章，分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
目录结构: webroot |--css(用于存放样式) |--images(用于存放图片) |--js(用于存放Ext引用文件) |--index2.html(主页面) |--info2.html(介绍信息)
总的来说，EXTJS是一个功能强大的前端框架，提供了丰富的组件和灵活的布局系统，适合开发复杂的、数据驱动的Web应用。通过深入学习EXTJS，开发者可以创建出高效、美观且用户体验优秀的应用程序。
在给定的“13款extjs后台框架”中，我们可以看到各种基于ExtJS开发的后台管理模板，这些模板通常包含了一系列预设的页面布局、功能组件和样式设计，旨在帮助开发者快速搭建后台管理系统。 1. **免费后台管理模板**...
本篇将详细探讨这两个框架在Jquery-Extjs4.0中的结合使用及其核心概念。 **jQuery框架** jQuery是一个轻量级、高性能的JavaScript库，它的主要目标是简化DOM操作、事件处理、动画制作以及Ajax交互。jQuery的核心...
EXTJS框架是一款基于JavaScript的富客户端应用开发框架，主要用于构建桌面级的Web应用程序。EXTJS 3.0是该框架的一个重要版本，它提供了一系列强大的组件和工具，以帮助开发者创建功能丰富的、交互性强的用户界面。...
在ExtJS框架中，`border`布局是一种非常常见的布局方式，它将容器划分为五个区域：north（北）、south（南）、east（东）、west（西）以及center（中心）。通过这种布局方式可以非常方便地构建出类似传统网页中的...
EXTJS框架是一个强大的JavaScript库，专门用于构建富客户端应用程序。它是Sencha公司的产品，提供了丰富的组件、数据绑定机制以及响应式布局，使得开发者能够轻松创建功能完善的Web应用。EXTJS框架以其直观的API、可...
本电子教材会详细介绍EXTJS的这些核心特性和使用方法，帮助开发者快速掌握EXTJS框架。对于初学者来说，学习EXTJS不仅可以提升前端开发技能，还能为创建高效、响应式的Web应用打下坚实基础。通过阅读和实践教材中的...
在“C# Extjs 登陆框、框架”这个主题中，我们主要关注的是如何使用ExtJS创建一个登录界面，并结合C#后端实现用户验证。登录框是任何应用程序的基础元素，它通常包含用户名和密码字段，以及登录和取消按钮。在ExtJS...
这是对ExtJS学习的一个小总结，做成了一...部分案例通过ExtJS页面直接操作后台数据，还包括了poi,jxl生成Excel表格的操作，以及grid在前台导出表格的实现，适合有一定JavaScript基础的人用来作为学习ExtJS框架的参考。
ExtJS 2.0有多种布局方式，如Fit布局、Border布局、Table布局等，可以根据需要调整组件之间的相对位置和大小，以适应不同屏幕尺寸和设备。 **7. AJAX通信** ExtJS内置了AJAX通信机制，通过Ext.Ajax对象可以发送异步...
在CRM系统中，EXTJS框架的使用可以提供美观、直观的用户界面，增强用户体验。例如，EXTJS的网格组件可以用于显示客户列表，窗体组件用于添加和编辑客户信息，而图表组件则可用于数据可视化，如销售报告和客户分布。 ...
用extjs4搭的一个简单布局框架
在ASP.NET ExtJS框架中，ExtJS负责处理用户界面的展示和交互，而ASP.NET则主要处理服务器端的数据处理和逻辑控制。 3. 文件解析 - `Default.aspx`：这是网站的默认入口页面，通常包含了网站的导航结构和其他初始化...
"ExtJS3.2列布局"是这个框架中的一个重要概念，尤其在处理form表单时非常实用。 列布局（Column Layout）是ExtJS的一种布局策略，它允许你在同一行内创建多个并排显示的区域，每个区域可以包含不同的组件，如文本框...
ExtJS 3.0框架是Sencha公司推出的一款基于JavaScript的富客户端开发框架，它主要用于构建功能强大、交互丰富的Web应用程序。这个框架以其强大的组件化系统、数据绑定机制和丰富的UI控件闻名，使得开发者可以方便地...
根据提供的文件信息，可以看出这里涉及的是ExtJs框架的样式定制与调整。ExtJs是一个用于构建交互式的前端应用程序的JavaScript库，它提供了丰富的UI组件、数据处理功能以及与服务器端进行通信的能力。接下来，我们将...