在开发中,某一项功能包含两个子功能,有时候我们就需要用到tab面板把这几个子功能一一显示出来,extjs中同样为我们提供了这个功能,我在项目运用的时候出现了一些问题,现把解决方案在此记录一下,算是做个备忘。首先看一下extjs官网上给出的一个简单小实例:
- Ext.create('Ext.tab.Panel',{
- width:300,
- height:200,
- activeTab:0,
- items:[
- {
- title:'Tab1',
- bodyPadding:10,
- html:'Asimpletab'
- },
- {
- title:'Tab2',
- html:'Anotherone'
- }
- ],
- renderTo:Ext.getBody()
- });
这个示例很简单,简单说明一下吧
首先创建一个tab面板
activeTab设置默认活动tab,这里可以设置索引(从0开始),也可以根据id设置
Items里面设置包含的tab标签页
Html设置该tab标签页显示的html内容
简单看一下截图:
Ok,下面看一下我在项目中运用到的实例,需求是这样的,我想在tab面板里显示两个tab标签页,这两个tab标签页分别加载从服务器加载下来的不同页面,这也算是我们在开发中常用的功能吧。说说我起初的作法吧,下面具体来看一下起初的代码:
- Ext.onReady(function(){
- vartabs1=Ext.create('Ext.tab.Panel',{
- title:'金融机构评分明细',
- renderTo:Ext.getBody(),
- activeTab:'tab1',
- width:'100%',
- height:800,
- items:[
- {
- id:"tab1",
- title:'得分情况',
- autoLoad:{
- xtype:"tabpanel",
- url:"EvaluateAction!evaluateDetail?id=<%=request.getParameter("evaluateId")%>",
- scripts:true,
- }
- },
- {
- id:"tab2",
- title:'相关表格',
- autoLoad:{
- xtype:"tabpanel",
- url:"EvaluateAction!evaluateReport?id=<%=request.getParameter("evaluateId")%>",
- scripts:true,
- }
- }
- ]
- });
- });
错误:这里只有一个tab能用。另一个tab点不动(点了没反应),并且用firebug调试发现,每当我鼠标滑过某一控件时都会增加一个报错信息,但是都是对ext-all内容的错误提示。如果把上面的scripts:true这个配置去掉,程序就可以运行了。但是凡是用ext写出的控件就都不显示了。用html写的控件可以显示.这个问题的具体原因我也不太清楚,所以,只好选择另一种实现方式了。
下面看一下正确实现的代码:
- Ext.onReady(function(){
- <%intevaluateId=Integer.parseInt(request.getParameter("evaluateId"));%>
- vartabs1=Ext.create('Ext.tab.Panel',{
- title:'金融机构评分明细',
- renderTo:Ext.getBody(),
- width:'100%',
- height:1000,
- activeTab:'tab1',
- items:[
- {
- id:"tab1",
- title:'得分情况',
- html:"<iframeid='a'name='a'src='EvaluateAction!evaluateDetail?id=<%=evaluateId%>'width='100%'height='1000'frameborder='0'></iframe>",
- },
- {
- id:"tab2",
- title:'相关表格',
- html:"<iframeid='b'name='b'src='EvaluateAction!evaluateReport?id=<%=evaluateId%>'width='100%'height='1000'frameborder='0'></iframe>",
- }
- ]
- });
- });
这里正确实现的方法其实原理就是用到的ext官方给出的简单例子,只是我在tab的html属性中显示定义了一个iframe,然后让iframe去加载我想要的动态页面,这样实现出来比较简单,也比较容易理解。简单看一下截图:
OK,关于extjs中tab面板的使用就简单介绍到这里,不得不说明的是,我对extjs没有系统的学习过,只是现学现卖,用到什么功能就去查什么功能的的具体实现方法,记录下来也仅是为了方便大家用到类似功能时有一个参考。在介绍中未免会出现一些错误,还希望大家多多指正。
分享到:
相关推荐
extjs点击右侧面板生成tab,面板是ul+li的
个人《Extjs4学习指南》电子文档过程中整理的Myeclipse工程,有以下修改:1、数据库改为Mysql;2、前四章后台改为servlet;3、最后一章后台改为SSH架构。 使用说明:1、BeginExtjs4目录为前四章的例子代码;2、SSH_...
Extjs4 tab 基本选项卡及增删插入操作
ExtJS3.0 源码分析与开发实例宝典
10月28日-11月4日,3W携手青云QingCloud、UCloud、金山云、AWS等云服务提供商,为北京、深圳、武汉、福州四地的中小企业技术人员带来云技术应用的专业知识与技能分享。
Extjs4开发笔记(四)——实现登录功能 Extjs4开发笔记(一)——准备工作 关于Extjs4开发笔记(二)的补充说明 在Extjs4应用中使用Ext.Loader ======================================= 11条jquery常用技巧和方法...
Extjs4登录功能+验证码+struts2
Extjs经典教程,关于面板布局的学习资料,图文并茂,值得一看
EXTJS4自学手册——EXT文件目录,本地加载文档,命名规范 EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册...
Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子Java ExtJs小例子
Ria4Java,ExtJs可视化,完成UI涉及和跟后台的交互
ExtJs4.2代码例子 ExtJS Window常用方法
Java+Extjs实现单文件上传
基于Extjs4官方的例子,做了一个关于MVC和Grid增删改的小例子
java extjs hr 1
Extjs4的demo 很不错的例子
Java + ExtJs示例, JDBC 数据脚本在里面
使用java,extjs,配合后台oracle数据库的代码框架,这段代码是extjs的grid的一个详细案例使用java,extjs,配合后台oracle数据库的代码框架,这段代码是extjs的grid的一个详细案例使用java,extjs,配合后台oracle...
包含各种类型的extjs小图标,Extjs4小图标
Extjs的Tree和Pane配合使用使用json做tree数据交互,感谢csdn,所以我也得做些贡献,获得一些积分