[align=center][align=center]extjs tabPanel入门
加载tabpanel的文本分2种,一种是加载前台div里的文本,另一种是js里添加html内容。js如下:
Ext.onReady(function() {
var tab1 = new Ext.TabPanel({
// defaults : {
[color=darkred][/color] // autoHeight : true
// },
height : 100,
width : 450,
activeTab : 0,
renderTo : 'div',
title : 'tab1',
items : [{
contentEl : 'tab1',
title : 'table'
}, {
contentEl : 'tab2',
title : 'table'
}]
});
var tab2 = new Ext.TabPanel({
renderTo : document.body,
height : 120,
width : 300,
// autoHeight:true,
// autoWidth:true,
activeTab : 1,
title : 'tab2',
items : [{
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}, {
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}, {
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}, {
title : 'tabpanel',
html : 'zhoang犯法撒访问发送能否we那份是你的分'
}]
});
});
jsp页面如下:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css"
href="extjs3.4/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs3.4/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs3.4/ext-all.js"></script>
<script type="text/javascript" src="extjs3.4/examples.js"></script>
<link rel="stylesheet" type="text/css" href="extjs3.4/examples.css" />
<script type="text/javascript" src="tabPanel.js"></script>
</head>
<body>
<div id="div">
<div id="tab1"class="x-hide-display">
访问方法
</div>
<div id="tab2"class="x-hide-display">
奉瓦
</div>
</div>
</body>
</html>
[align=center]
[/align][/align]
分享到:
相关推荐
ExtJS tabPanel实例ExtJS tabPanel实例
NULL 博文链接:https://rowen.iteye.com/blog/446163
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
extjs4.2.1 tabPanel刷新及关闭标签
Extjs4.2 根据不同的数值设置tabpanel行的背景颜色
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
ExtJS 关闭TabPanel内的Panel时使用TabPanel的'beforeremove’和其内的Panel的'beforeclose’事件弹出关闭确认提示对话框
Extjs4.2 设置tabpanel当前活动页签的样式
代码如下: var tabIndex = ‘shouye’;... /** * 向TabPanel组件中添加窗口或激活已经存在的窗口 * 并将指定资源加载进窗口 * @param node : 传入的Node节点 */ var loadPanel = function(node) { var
TabPanel(选项卡组件) 参数说明 renderTo| jQuery object | NULL> 渲染到某容器 将选项卡组件渲染到某容器,参数类型可以为字符串,也可以为jQuery所加载的对象,如果为声明该参数,组件默认的承载容器为BODY。 ...
EXTJS4.2官网上的tabpanel的右键关闭当前页,关闭其它,关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件,只要替换当前4.2的那个文件就可以使用了!
js代码,实现了 extjs4.x tabpanel 动态加载panel和html的功能
1、Ext.TabPanel简单使用 代码:
4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data.Connection篇一 20 11. Ext.data....
NULL 博文链接:https://icyfire.iteye.com/blog/412574
9. ExtJs2.0学习系列(9)--Ext.TabPanel之第一式 10. ExtJs2.0学习系列(10)--Ext.TabPanel之第二式 11. ExtJs2.0学习系列(11)--Ext.XTemplate 12. ExtJs2.0学习系列(12)--Ext.TreePanel之第一式 13. ExtJs2.0学习系列...
ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记(十二)---选项卡(tabs) ExtJS4学习笔记(十五)---Ext.data.Model ExtJS4学习笔记(十六)---Combobox三级联动 ExtJS4学习笔记...
extjs4.0中,不想一次性加载所有的controller,特别是那种tabPanel布局的时候,一个tab的内容对应一个controller的时候。可以通过动态创建controller的方式,还能遵循mvc设计规范。这个例子完美破解,经过测试。 ...