ExtJS创建选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css"/>
<script language="javascript" src="extjs/ext-all.js"></script>
<script language="javascript" src="Jquery/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="js/tabs.js"></script>
<title>选项卡</title>
<style>
.main{ margin:50px auto;}
#add{ padding-left:10px;}
</style>
</head> <body>
<div class="main">
<div id="add"></div>
<div id="tab"></div>
</div>
</body>
</html>
tabs.js
Ext.require('Ext.tab.*');
Ext.onReady(function(){
var currentItem;
var tabs = Ext.createWidget('tabpanel', {
renderTo: 'tab',
resizeTabs: true,
enableTabScroll: true,
margin:'10',
width: 600,
height: 250,
defaults: {
autoScroll:true,
bodyPadding: 10
},
items: [{
title: '选项卡',
html: '选项卡内容',
closable: true
}]
});
var index = 0;
function addTab (closable) {
++index;
tabs.add({
title: '新选项卡- ' + index,
html: '新选项卡内容 ' + index + '<br/><br/>',
closable: !!closable
}).show();
}
Ext.createWidget('button', {
renderTo: 'add',
text: '创建可关闭选项卡',
handler: function () {
addTab(true);
}
});
Ext.createWidget('button', {
renderTo: 'add', text: '创建不可关闭选项卡',
handler: function () {
addTab(false);
},
style: 'margin-left: 8px;'
});
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<!--<script type="text/javascript" src="extjs/ext-base.js"></script>-->
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="extjs/ext-lang-zh_CN.js" charset="utf-8"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
var strTabs = '[{"id":"BaseInfo","text":"基本信息","url":"http://www.baidu.com"},{"id":"fromInfo","text":"供货信息","url":"http://www.sohu.com"},{"id":"toInfo","text":"物流信息","url":"http://www.163.com"}]';
var oTabs = eval('(' + strTabs + ')');
if (oTabs != null && oTabs.length > 0) {
document.getElementById("frmContent").src = oTabs[0].url;
var tabs = new Ext.TabPanel({
renderTo: 'tabsContent',
activeTab: 0,
collapsed: true,
items: [{
id: oTabs[0].id,
title: oTabs[0].text,
contentEl: 'tabItem'
}]
}); for (var j = 1; j < oTabs.length; j++) {
var oItem = {};
oItem.id = oTabs[j].id;
oItem.title = oTabs[j].text;
oItem.contentEl = 'tabItem';
tabs.add(oItem);
} tabs.addListener("tabchange", function(tabs, nowtab){
for (var s = 0; s < oTabs.length; s++) {
if (oTabs[s].id == nowtab.id) {
document.getElementById("frmContent").src = oTabs[s].url;
break;
}
}
});
}
else {
document.getElementById("tabsContent").style.display = "none";
}
});
</script>
</HEAD>
<BODY>
<div id="tabsContent" style="margin-top: 2px;">
<div id="tabItem" style="width: 0px; height: 0px;">
</div>
</div>
<div id="tabItemsRender" style="height: 640px; overflow: auto; border-left-style: solid; border-left-width: 1px; border-left-color: #8DB2E3; border-right-style: solid; border-right-width: 1px; border-right-color: #8DB2E3; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #8DB2E3;">
<iframe id="frmContent" name="frmContent" src="http://blog.163.com/baihongtao_618/blog/" frameborder="0" height="100%" width="100%">
</iframe>
</div>
</BODY>
</HTML>
ExtJS创建选项卡的更多相关文章
- Extjs TabPanel 选项卡延迟加载
Extjs TabPanel 选项卡延迟加载 说明: Ext中用到tabpanel选项卡控件, 选项卡页签默认是延迟加载的, 当用户手工切换到某页签下时该页签才会加载, 在页签没有加载前, 用户对该页 ...
- EasyUI创建选项卡并判断是否打开
//创建选项卡:判断选项卡是否打开,如果以打开则定位到选项卡,否则创建 function addPanel(title) { var bol = $('#main_tabs').tabs('exist ...
- MFC 创建选项卡
1.创建三个选项卡Dialog窗体,ID分别改为porpTest1.porpTest2.porpTest3 2.创建三个选项卡类,类名分别为CPropTest1.CPropTest2.CPropTes ...
- extJS 创建类
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- ExtJs创建环境搭建
开发工具Eclipse/MyEclipse. 工具下载:http://pan.baidu.com/s/1sjmiFMH(提供spket和sdk.jsb3, extjs-4.1.1需自己下载) 1. ...
- ExtJS 创建动态加载树
Ext 中导航树的创建有两种方式:1.首先将所有的数据读出来,然后绑定到前台页面.2.每点击一个节点展开后加载子节点.在数据量比较小的时候使用第一种方式加载的会快一些,然而当数据量比较大的时候,我还是 ...
- ionic3创建选项卡
html页面 <ion-content padding> <ion-segment [(ngModel)]="tabs"> <ion-segment- ...
- JS,Jquery,ExtJs不同脚本动态创建DOM对象
好久不来写东西了,这段时间太慢了,闲了下来看了几篇文章,觉得很好,同时也许咱们大家都能遇到,所以就把它记录下来... 简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主 ...
- ExtJs Tree加载选项卡，选项卡加载页面不用iframe
点击树节点,自动加载选项卡对应的页面, 效果图: JS Code: 一.创建TreeStore var store = Ext.create('Ext.data.TreeStore', { root: ...
随机推荐
- CVE-2013-3346Adobe Reader和Acrobat 内存损坏漏洞分析
[CNNVD]Adobe Reader和Acrobat 内存损坏漏洞(CNNVD-201308-479) Adobe Reader和Acrobat都是美国奥多比(Adobe)公司的产品.Adobe R ...
- hbase 性能调
一. HBase的通用优化 1 高可用 在 HBase 中 Hmaster 负责监控 RegionServer 的生命周期,均衡 RegionServer 的负载,如果 Hmaster 挂掉了,那么整 ...
- MFC+WinPcap编写一个嗅探器之五（过滤模块）
这一节主要介绍如何获设置捕获过滤,这里的过滤是指在捕获前过滤 设置捕获过滤主要是在CFilterDlg中完成,也就是对应之前创建的设置过滤规则对话框,如图: 首先要根据用户的选择来生成一个合法的过滤规 ...
- PHP问题解决
1.PHP在上传文件的时候出现错误Internal Server Error Internal Server ErrorThe server encountered an internal error ...
- win7下docker环境搭建nginx+php-fpm+easyswoole+lavarel+mysql开发环境
win7环境基础在上一篇win7下docker环境搭建nginx+php-fpm+easyswoole开发环境中已经详细叙述搭建完成 本篇文章将叙述如何在上述基础上搭建laravel开发环境,这个其实 ...
- Java工具类- 跨域工具类
原本Spring MVC项目添加跨域: 在web.xml文件中配置: <!-- cors解决跨域访问问题 --> <filter> <filter-name>cor ...
- Netty堆外内存泄露排查与总结
导读 Netty 是一个异步事件驱动的网络通信层框架,用于快速开发高可用高性能的服务端网络框架与客户端程序,它极大地简化了 TCP 和 UDP 套接字服务器等网络编程. Netty 底层基于 JDK ...
- MySQL 事物的隔离级别(简要)
事务的隔离级别 为什么 引入了 事务隔离级别?? 在数据库操作中,为了有效保证并发读取数据的正确性,提出的事务隔离级别. 更新丢失两个事务都同时更新一行数据,一个事务对数据的更新把另一个事务对数据的 ...
- ssm框架常见问题
搭建SSM框架时,总是遇到这样那样的问题,有的一眼就能看出来,有的需要经验的积累.现将自己搭建SSM框架时遇到的典型问题总结如下: 一.Struts2框架下的action中无法使用@Autowired ...
- 智能家居实践（番外篇）—— 接入 HomeKit 实现用 Siri 控制家电
转载:智能家居实践(番外篇)—— 接入 HomeKit 实现用 Siri 控制家电 前面我写了一个系列共三篇的智能家居实践,用的是 Amazon Echo 实现语音控制,但是 Amazon Echo ...