zha_zi
- 浏览: 594042 次
- 性别:
- 来自: 西安
-
文章分类
最新评论
-
青春依旧：
html5教学哪家强！当然要上华清远见！
深入理解浏览器兼容性模式 -
ashur：
真机智，看得我都笑自己了
js 字符串转dom 和dom 转字符串 -
panghaoyu：
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
solr第一弹 autocomplete(自动补全) -
FakLove：
连线如何删除啊
基于html5 的拖拽连线 -
FakLove：
连线可以再删除吗？
基于html5 的拖拽连线
一般在使用tabpanel的多页显示的使用大部分都是使用iframe嵌套页面做显示，我们项目中有一个雇员信息分类显示的页面，是吧雇员的信息分成几大类别显示，如果做成几个页面在用iframe显示未免有点浪费，查询出来数据以后不好处理
这时候我希望用多个formpanel 分别render tablepanel的<html><div id="xx"></html>中，但是始终没法渲染成功
搞了一个上午终于发现了问题的根源tab下的标题是不点击不会激活的，所以在frompanel在render的时候div还没有加载到页面中，导致render出错，
我找到了两种解决方法
1:myTabPanel.setActiveTab(newComponent); 使用这个方法可以在加载完tabpanel且formpanel没有render的时候
把各个标题一次激活，但这这样会有一个问题，就是本来formpanel的正常布局全部都成了纵向布局，这个问题不知道是什么原因，我在做extjs页面开发的时候经常会遇到把formpanel嵌套到另一个组件中发生布局错误
2：首先把frompanel new出来，然后把tabpanel new出来，在tabpanel中添加监听事件 listeners: {activate: function()
{
formpanel.render("f");
}
},
顺序要正常不然也不会正常显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Complex Layout</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var fp=new Ext.form.FormPanel({
labelAlign:'left',
buttonAlign:'center',
width:500,
// renderTo:"f",
autoHeight:true,
layout:"form",
bodyStyle:'padding:0px;',
frame:true,
labelAlign:"right",
labelWidth:85,
monitorValid:true,
items:
[
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '唯一号',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '民族',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '身份证号码',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '性别',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '中文名',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '英文名',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '生日',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '年龄',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '是否结婚',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '生育情况',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '邮编',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '户籍邮编',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '公司电话',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '家庭电话',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '手机',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '电子邮件',name: 'applyId',anchor:'90%'}]}
]}
]
});
var fp1=new Ext.form.FormPanel({
labelAlign:'left',
buttonAlign:'center',
width:500,
// renderTo:"f1",
autoHeight:true,
// layout:"form",
bodyStyle:'padding:0px;',
frame:true,
labelAlign:"right",
labelWidth:85,
monitorValid:true,
items:
[
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '唯一号',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '民族',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '身份证号码',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '性别',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '中文名',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '英文名',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '生日',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '年龄',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '是否结婚',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '生育情况',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '邮编',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '户籍邮编',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '公司电话',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '家庭电话',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '手机',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '电子邮件',name: 'applyId',anchor:'90%'}]}
]}
]
});
var fp2=new Ext.form.FormPanel({
labelAlign:'left',
buttonAlign:'center',
width:500,
// renderTo:"f1",
autoHeight:true,
// layout:"form",
bodyStyle:'padding:0px;',
frame:true,
labelAlign:"right",
labelWidth:85,
monitorValid:true,
items:
[
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '唯一号',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '民族',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '身份证号码',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '性别',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '中文名',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '英文名',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '生日',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '年龄',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '是否结婚',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '生育情况',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '邮编',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '户籍邮编',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '公司电话',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '家庭电话',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '手机',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '电子邮件',name: 'applyId',anchor:'90%'}]}
]}
]
});
var fp3=new Ext.form.FormPanel({
labelAlign:'left',
buttonAlign:'center',
width:500,
// renderTo:"f1",
autoHeight:true,
// layout:"form",
bodyStyle:'padding:0px;',
frame:true,
labelAlign:"right",
labelWidth:85,
monitorValid:true,
items:
[
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '唯一号',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '民族',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '身份证号码',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '性别',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '中文名',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '英文名',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '生日',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '年龄',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '是否结婚',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '生育情况',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '邮编',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '户籍邮编',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '公司电话',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '家庭电话',name: 'applyId',anchor:'90%'}]}
]},
{layout:"column",items:[
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true, width:330, fieldLabel: '手机',name: 'applyId',anchor:'90%'}]} ,
{layout:"form",columnWidth:.5, items: [{xtype:'textfield',disabled:true,width:330,fieldLabel: '电子邮件',name: 'applyId',anchor:'90%'}]}
]}
]
});
var tabs2 = new Ext.TabPanel({
renderTo: "d",
activeTab:0,
width:500,
height:500,
//autoScroll:true,
frame:true,
plain:true,
// defaults:{autoScroll: true},
items:[
{
title: '基本信息',
listeners: {activate: function()
{
fp.render("f");
}
},
html:"<div id='f'></div>"
},
{
title: '福利信息',
listeners: {activate: function()
{
fp1.render("f1");
}
},
html:"<div id='f1'></div>"
},
{
title: '服务费用',
listeners: {activate: function()
{
fp.render("f2");
}
},
html: "<div id='f2'></div>"
},
{
title: '附加信息',
listeners: {activate: function()
{
fp.render("f3");
}
},
html: "<div id='f3'></div>"
}
]
});
});
</script>
</head>
<body bgcolor=#DFE8F6>
<div id='d'></div><br>
<div id='d1'></div><br>
</body>
</html>
分享到：
发表评论
-
浏览器事件是冒泡还是捕获
2016-07-27 16:37 3033这是三种事件处理的模型 （1）冒泡型事件：事件按照从最特定 ... -
javascript 编程反思1 new 原理
2016-04-27 14:05 0我们在定义对象的时候通常使用两种方式 1：通过new 关键 ... -
javascript 设计模式1 单例模式
2015-06-15 15:10 0... -
facebook html5开发app 失败的原因，
2015-06-08 11:56 1963Here’s why the Facebook iOS a ... -
jQuery zepto 用法区别
2015-05-22 11:50 0以前都是用jQuery 因为移动项目中在使用zepto 基本 ... -
js 加载机制和defer async用法
2015-05-15 17:45 0这是今天我一个 ... -
grunt 不是内部命令
2015-05-04 19:21 1464grunt 不是内部命令！！ ... -
你不知道的URL中#井号用法
2015-02-10 12:36 7091URL 中 # 井号的用法 ... -
JS 伪数组原理详解
2014-12-01 11:24 2494jav ... -
jquery 滚动条插件nanoScroller 的用法
2014-11-27 11:17 5709scroller 插件nanoSc ... -
h5，hybrid 开发中问题汇总
2014-10-17 11:26 8219H5开发问题总结 和jqu ... -
backbone中的 reuter 和histroy
2014-10-13 10:45 631Router和History (路由控制) Back ... -
animate 技术分析 raphael
2014-07-28 16:40 0Animate 什么是animate，一般我 ... -
Raphaeljs 插件实现任意SVG节点加载
2014-07-14 09:26 8638SVG 和Raphael http://rap ... -
ECMAScript 5
2014-07-08 14:36 1062新版本在给基本库带来 ... -
jQueryUI Widget 代码详解
2014-07-07 12:20 0为什么需要研究JqueryUI 中Widget 的代码 ... -
typescript 用法介绍
2014-07-01 09:58 1239前言 Typescript的形態 如何定義va ... -
window.eval 与eval 区别
2014-06-27 10:57 1090它们之间有区别吗？ 开发过程中似乎很少有人去加个额外的win ... -
jQuery 学习分析系列1 jQuery是个什么东西
2014-06-23 10:06 0jQuery 的基本结构 过去使用jQuery ... -
Sizzle 引擎--原理与实践3
2014-06-18 14:05 792Sizzle引擎--原理与实践（三） 查找的入口对 ...
相关推荐
通过上述方式，`TreePanel`和`TabPanel`的结合可以构建出强大且易于使用的界面，满足用户对层次结构数据的探索和多视图内容的切换需求。在实际开发中，可以根据具体业务需求进行定制，优化用户体验。
ExtJS的TabPanel是其组件库中的一个核心组件，用于创建具有多个标签页的应用界面，每个标签页可以承载不同的内容。...在实际开发中，结合源码分析和工具使用，我们可以进一步优化TabPanel的性能和交互效果。
需要注意的是，Extjs提供了多种方式来设置tabpanel的样式，例如可以使用Extjs的主题机制来设置tabpanel的样式，也可以使用CSS样式表来设置tabpanel的样式。不同的方法都有其优缺，开发者可以根据实际需求选择合适的...
### ExtJS 4.2.1 TabPanel 刷新与关闭标签功能详解 #### TabPanel 组件简介 在ExtJS框架中，`TabPanel`组件是一个非常实用且强大的UI控件，它允许用户在一个界面上组织多个相关的视图或面板，并通过标签页的形式...
本实例探讨的是如何使用jQuery来实现一个功能丰富的TabPanel选卡结合右键菜单的交互功能，这对于创建高效的多页面视图应用是非常实用的。 首先，TabPanel是一种常见的UI组件，它允许用户在一个固定的区域中通过不同...
### Ext中的tabpanel关闭后再打开不显示的问题 在Ext框架中，`TabPanel`是一个非常重要的组件，用于实现页面中的多标签页功能。然而，在实际应用过程中可能会遇到一个常见问题：当某个标签页被关闭后，如果尝试重新...
6. **工具应用**：标签还提到了“工具”，这可能是指使用某些开发工具或库来辅助`TabPanel`的开发，比如使用IDE的插件进行布局设计，或者使用jQuery、Bootstrap等库来快速构建`TabPanel`。 7. **可访问性和响应式...
你可以通过 `add()` 方法动态添加新的标签页，或者使用 `remove()` 方法移除已存在的标签页。例如： ```javascript // 添加新标签页 tabPanel.add({ title: '角色管理', // 可能对应于roleManager.js中的内容 })...
基于jquery的tabpanel，支持动态添加，支持滚动条，可内嵌iframe，支持关闭按钮，支持tab的背景图片配置， 这个是我在网上找到一个原始的版本，然后修改的，有详细注释，写了11个使用例子，基本涵盖了该组件的功能。...
3. **Bootstrap**或**Material Design**：这些流行的前端框架通常内置了TabPanel组件，可以直接使用，节省开发时间，同时保持与整体设计风格的一致性。 4. **Ajax**：如果TabPanel的内容需要动态加载，可以使用Ajax...
TabPanel的使用，添加tab,加载页面，添加事件
在“ExtJS扩展：垂直页签tabPanel”这个主题中，我们将探讨如何在ExtJS中实现一个创新的垂直布局的页签（tab）组件，这在很多情况下可以提供更好的用户界面体验。 首先，我们看到有两个JavaScript文件，TabPanel.js...
【描述】提到的是使用 jQuery 来实现 TabPanel 的一个实例，jQuery 是一个广泛使用的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画以及Ajax交互等任务，使得创建动态网页变得更加简单。在这里，jQuery 被...
EXTJS的tabpanel是其组件库中的一个重要组成部分，用于创建具有多个选项卡的用户界面，每个选项卡代表一个独立的视图或...正确理解和使用tabpanel的激活方法以及注意事项，将有助于提升EXTJS应用的用户体验和功能性。
使用方法是这样：首先建立一个figure，并在其中加入一个Text控件，需要注意的是这个text控件所在的位置就是将来标签页所在的位置，然后将附件中的tabpanel2.6中的文件放到figure同目录下，然后在命令行输入 ...
在实际项目中，这些文件可以按照上述方式与`TabPanel`动态加载机制结合使用。 总结，EXT JS的`TabPanel`支持动态页面加载，通过设置`lazy`属性和监听`tabchange`事件，我们可以实现在`Tab`被激活时按需加载内容，...
extjs动态添加tabpanel标签页支持pannel嵌入 逻辑代码在 MyWindow.js里面直接调用 方法 就可以
基于jquery的tabpanel，支持动态添加，支持滚动条，可内嵌iframe，支持关闭按钮，支持tab的背景图片配置， 这个是我在网上找到一个原始的版本，然后修改的，有详细注释，写了11个使用例子，基本涵盖了该组件的功能。...
在这个“javascript+css+tabpanel的实现”中，我们将深入探讨如何使用HTML、JavaScript和CSS来创建一个功能完备且交互友好的Tab Panel系统。 首先，HTML是构建页面结构的基础。Tab Panel的基本HTML结构通常包括一个...
在IT行业中，`TabPanel`通常是指一种用户界面（UI）组件，用于组织内容并以选项卡的形式展示。这种组件广泛应用于各种软件和Web应用程序，为用户提供了一种方便的方式来切换和管理多个视图或工作区。`TabPanel`的...