【ExtJs】tabPanel标签页与修改标签页的内容
2015-04-24 09:01
218 查看
标签页是一个很重要的插件,正如《【mfc】标签页》(点击打开链接)在VC6中的地位,通过ExtJs中能够在网页中轻松地实现一个与客户端一模一样的标签页。
一、基本目标
创建如下的标签页,在底部的工具栏有两个按钮,一个可以增加标签页,增加的标签的内容就是当前的时间。这里只作为例子,一般标签页里面的内容,是放个iframe,或者通过无参数传递的ajax直接从别的网页中取,避免在javascript写过多的html代码,别说别人,连你自己都不知道你在写什么了,这个问题在《【Servlet】在Servlet3.0中利用ajax达到iframe局部刷新效果,同时避免在Js写过多的HTML代码》(点击打开链接)已经说过了。一个可以修改当前标签页的内容,如果没有标签页,这个按钮按不了。在每一个标签的傍边都有关闭按钮,可以关闭这个标签页。
![](http://img.blog.csdn.net/20150424090439644)
二、***过程
HTML布局还是什么都没有,仅仅是引入ExtJs的资源。
同样地,所有Ext脚本,必须写在Ext.onReady(function(){});
里面。
首先是按钮1,“添加标签页"按钮。这里的title就是标签页的title,html里面,设置一个与当前title一模一样的id,为了之后的按钮2能够操控,如果不这样做,我尝试过所有Ext的方法,所有的get,getActiveTab().html都不给力,通通拿不到。还是用回前端最原始的,根据Id取元素最好。
Ext.util.Format.date(new Date(),'H时i分s秒')可以生成当前的时间。
这个新加的标签页定义为一个名叫tab的json,通过tabPanel.setActiveTab(tab);放到tabPanel大标签页框架里面去。
其中i是一个全局变量,没增加一个标签页,自增。
这个弹出的文本框,在《【ExtJs】模态确定框与模态输入框》(点击打开链接)已经说过了,不赘述。
三、总结
于是,整个网页的代码如下:
一、基本目标
创建如下的标签页,在底部的工具栏有两个按钮,一个可以增加标签页,增加的标签的内容就是当前的时间。这里只作为例子,一般标签页里面的内容,是放个iframe,或者通过无参数传递的ajax直接从别的网页中取,避免在javascript写过多的html代码,别说别人,连你自己都不知道你在写什么了,这个问题在《【Servlet】在Servlet3.0中利用ajax达到iframe局部刷新效果,同时避免在Js写过多的HTML代码》(点击打开链接)已经说过了。一个可以修改当前标签页的内容,如果没有标签页,这个按钮按不了。在每一个标签的傍边都有关闭按钮,可以关闭这个标签页。
二、***过程
HTML布局还是什么都没有,仅仅是引入ExtJs的资源。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ExtJs标签页</title> <script type="text/javascript" src="js/ext-all.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script> <link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" > </head> <body> </body> </html>关键是下面的核心脚本,与《【ExtJs】带日期组件的文本输入框、容器与Ext.Msg.alert告警框告警两次》(点击打开链接)同样,先设置组件,再加到总的标签页里面去。
同样地,所有Ext脚本,必须写在Ext.onReady(function(){});
里面。
首先是按钮1,“添加标签页"按钮。这里的title就是标签页的title,html里面,设置一个与当前title一模一样的id,为了之后的按钮2能够操控,如果不这样做,我尝试过所有Ext的方法,所有的get,getActiveTab().html都不给力,通通拿不到。还是用回前端最原始的,根据Id取元素最好。
Ext.util.Format.date(new Date(),'H时i分s秒')可以生成当前的时间。
这个新加的标签页定义为一个名叫tab的json,通过tabPanel.setActiveTab(tab);放到tabPanel大标签页框架里面去。
其中i是一个全局变量,没增加一个标签页,自增。
var btn1={ xtype:'button', text:'添加标签页', listeners: { click: function(){ var tab=tabPanel.add({ title:'Tab'+i, html:"<div id='Tab"+i+"'>"+Ext.util.Format.date(new Date(),'H时i分s秒')+"</div>", closable:true//允许关闭,同时新建关闭按钮 }); i++; tabPanel.setActiveTab(tab); } } };之后是按钮2。这个按钮如果i是0则没有事件。这里关键是取到对象再赋值。tabPanel.getActiveTab().title能拿到当前标签页的标签,tabPanel.getActiveTab().html却不能拿到当前标签的内容,不明白为什么,改成innerHTML,value等都拿不到,于是,只能通过与document.getElementById同等的Ext.getDom去出那个以标签页标题等同的div,再通过非常给力的innerHTML给它赋值。
这个弹出的文本框,在《【ExtJs】模态确定框与模态输入框》(点击打开链接)已经说过了,不赘述。
var btn2={ xtype:'button', text:'修改标签页内容', listeners: { click: function(){ if (i != 0) { Ext.Msg.prompt("请输入一些东西", "将替换当前文本框的内容!", function(btn, text){ if (btn == 'ok') { Ext.getDom(tabPanel.getActiveTab().title + "").innerHTML=text; } }, this, true, ""); } } } };最后,再把按钮1、2放到标签页的大框架里面:
var tabPanel=Ext.create('Ext.tab.Panel',{ renderTo:Ext.getBody(),//显示到body节点下,默认不显示 height:350, bbar:[{xtype:'tbfill'},btn1,btn2,{xtype:'tbfill'}]//表示底部标题栏的内容,前后两个{xtype:'tbfill'}代表使btn1与btn2居中 });
三、总结
于是,整个网页的代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>ExtJs标签页</title> <script type="text/javascript" src="js/ext-all.js"></script> <script type="text/javascript" src="js/bootstrap.js"></script> <script type="text/javascript" src="js/ext-lang-zh_CN.js"></script> <link href="ext-theme-classic/ext-theme-classic-all.css" rel="stylesheet" type="text/css" > </head> <body> </body> </html>
<script>
var i=0;
Ext.onReady(function(){
var btn1={ xtype:'button', text:'添加标签页', listeners: { click: function(){ var tab=tabPanel.add({ title:'Tab'+i, html:"<div id='Tab"+i+"'>"+Ext.util.Format.date(new Date(),'H时i分s秒')+"</div>", closable:true//允许关闭,同时新建关闭按钮 }); i++; tabPanel.setActiveTab(tab); } } };
var btn2={ xtype:'button', text:'修改标签页内容', listeners: { click: function(){ if (i != 0) { Ext.Msg.prompt("请输入一些东西", "将替换当前文本框的内容!", function(btn, text){ if (btn == 'ok') { Ext.getDom(tabPanel.getActiveTab().title + "").innerHTML=text; } }, this, true, ""); } } } };
var tabPanel=Ext.create('Ext.tab.Panel',{
renderTo:Ext.getBody(),
height:350,
bbar:[{xtype:'tbfill'},btn1,btn2,{xtype:'tbfill'}]
});
});
</script>
相关文章推荐
- Extjs4.2 TabPanel中使用Ext.ux.IFrame组件加载内容页面
- Extjs关于tabpanel的 bug修改
- Tab控件标签页的显示方式对标签内容的影响
- 为extjs的TabPanel 添加右键关闭效果(修改一个bug)
- extjs tabpanel 刷新,双击TabPanel标签关闭该页
- Extjs gridpanel 动态修改store内容
- 为extjs的TabPanel 添加右键关闭效果(修改一个bug)
- [ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)
- 导航面板[ExtJS4]ExtJS4左边菜单面板收缩展开,右边TabPanel内容动态更新(解决宽度不能自适应问题)
- Extjs--tabPanel
- Extjs 对tabPanel中的第一个Panel进行布局 让里面的面板具有拖拽效果
- ExtJs的.NET控件----TabContainer和TabPanel
- JavaScript修改和获取p标签里面内容
- ExtJs的Ext.grid.GridPanel不能选择复制表格中的内容解决方案
- tabpanel 刷新另一个标签
- EXTJS 4.2 实现 gridpanel 鼠标悬停单元格以提示信息的方式显示单元格内容。
- 修改extjs源码真正解决:ExtJs4.0 GridPanel 数据内容不能选中复制。
- ExtJS控件样式的修改(示例无边框panel)
- extjs tabpanel限制选项卡数量实现思路及代码
- 【原创】EXTJS,实现的两个tabpanel,每个panel有个可以伸缩的accordion,顺带实现开关小VIEWPORT。系统马上联调了,做个主页先……