1.写在前面
最近由于公司框架中的Tab组件Bug多多，迟迟不能解决。遂自己动手把Ext.Tab写成JSPTag来使用。发出来给和偶一样经常在海边拾贝壳的小鸟们借鉴参考之用。JS大师你们肯定要说，我是没事找事，直接用EXT不就行了何必那么麻烦，但问题是直接使用EXT的话，页面将大量引入一堆难读的JS和html而且也给一些作坊型的项目组带来了学习培训的成本。
2.实现的功能
由Java后端根据JSPTag生成Ext.Tab界面所需的html元素和JS。实现全部功能不需要程序员编写一行html代码或者JS。主要功能列表:
无限嵌套生成标签卡。
标签卡容器的自动扩展、自动滚动条、高度、宽度、当前活动标签卡的JSP属性设置。
标签卡的禁用、onclick事件响应的JSP属性设置。
支持request重置当前活动标签卡。
3.JSP代码
<body>
<%
TabsUtil.setActiveTab(request, 2);
%>
<eRed:tabs tabsId="tabs" activeTab="0" width="400" height="100" autoScroll="true">
<eRed:tab tabId="table1" title="标签卡1">
<font size="800">标签卡1</font>
</eRed:tab>
<eRed:tab tabId="table2" title="标签卡2" disabled="true">
标签卡2
</eRed:tab>
<eRed:tab tabId="table3" title="标签卡3" onclick="test">
标签卡3
</eRed:tab>
</eRed:tabs>
</body>
<script type="text/javascript">
function test(){
Ext.MessageBox.alert('系统提示:', "响应onclick事件!");
}
</script>
4.效果图
5.关键代码
TLD描述:
<tag>
<name>tabs</name>
<tagclass>com.eredlab.uilib.common.layout.ExtTabsTag</tagclass>
<bodycontent>JSP</bodycontent>
<info>标签卡容器标签-eRedUI公共标签</info>
<attribute>
<name>tabsId</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>activeTab</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>width</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>height</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>autoScroll</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>
<tag>
<name>tab</name>
<tagclass>com.eredlab.uilib.common.layout.ExtTabTag</tagclass>
<bodycontent>JSP</bodycontent>
<info>标签卡标签-eRedUI公共标签</info>
<attribute>
<name>tabId</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>title</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>disabled</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onclick</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>
标签实现类
/**
* EXT风格标签选项卡容器标签-公共标签
* @author
* @version eRedUI V0.1
*/
public class ExtTabsTag extends BodyTagSupport{
private String tabsId;
private String activeTab;
private String width;
private String height;
private String autoScroll;
private List tabs;
public ExtTabsTag(){
super();
tabs = new ArrayList();
}
/**
* 标签开始:Do Nothing!
*/
public int doStartTag() throws JspException{
tabs.clear();
HttpServletRequest request = (HttpServletRequest)this.pageContext.getRequest();
String tabNo = (String)request.getAttribute(UiConstants.EXTTAB_ACTIVETAB);
this.activeTab = (tabNo == null || tabNo == "") ? "0" : tabNo;
return super.EVAL_BODY_BUFFERED;
}
/**
* 标签结束：输出代码描述字符流
*/
public int doEndTag() throws JspException{
JspWriter writer = pageContext.getOut();
try {
String tabsDivStart = "<div id=\"tabs\">";
writer.println(tabsDivStart);
for(int i = 0; i < tabs.size(); i++){
ExtTab tab = (ExtTab)tabs.get(i);
String tabDivStart = "<div id=\"" + tab.getTabId() + "\" class=\"x-hide-display\">";
writer.println(tabDivStart);
String tabDivContent = tab.getContent();
writer.println(tabDivContent);
String tabDivEnd = "</div>";
writer.println(tabDivEnd);
}
String tabsDivEnd = "</div>";
writer.println(tabsDivEnd);
String scriptStart = "<script type=\"text/javascript\">";
writer.println(scriptStart);
String tabsScriptStart = "Ext.onReady(function(){var " + this.getTabsId() + " = new Ext.TabPanel({";
tabsScriptStart = tabsScriptStart + "renderTo: '" + this.getTabsId() + "',";
tabsScriptStart = tabsScriptStart + "width:" + (this.width == null ? "780" : this.width) + ",";
tabsScriptStart = tabsScriptStart + "activeTab:" + (this.activeTab == null ? "0" : this.activeTab) + ",";
tabsScriptStart = tabsScriptStart + "frame:true,";
if(this.height != null)
tabsScriptStart = tabsScriptStart + "height:" + this.height + ",";
if(this.autoScroll != null)
tabsScriptStart = tabsScriptStart + "autoScroll:" + this.autoScroll + ",";
tabsScriptStart = tabsScriptStart + "defaults:{autoHeight: true},";
tabsScriptStart = tabsScriptStart + "items:[";
writer.println(tabsScriptStart);
String tabScriptStart = "";
for(int i = 0; i < tabs.size(); i++){
ExtTab tab = (ExtTab)tabs.get(i);
tabScriptStart = tabScriptStart + "{contentEl:'" + tab.getTabId() + "',";
if(tab.getDisabled() != null)
tabScriptStart = tabScriptStart + "disabled:" + tab.getDisabled() + ",";
if(tab.getOnclick() != null)
tabScriptStart = tabScriptStart + "listeners: {activate:" + tab.getOnclick() + "},";
tabScriptStart = tabScriptStart + "title: '" + tab.getTitle();
tabScriptStart = tabScriptStart + "'},";
}
String tabScriptStart2 = tabScriptStart.substring(0, tabScriptStart.length() - 1);
writer.println(tabScriptStart2);
String tabScriptEnd = "]";
writer.println(tabScriptEnd);
String tabsScriptEnd = "});});";
writer.println(tabsScriptEnd);
String scriptEnd = "</script>";
writer.println(scriptEnd);
} catch (IOException e) {
e.printStackTrace();
}
return super.doEndTag();
}
/**
* 添加Tab卡片
*/
public void addTab(ExtTabTag pTab){
tabs.add(pTab);
}
/**
* 添加Tab卡片
*/
public void addTab(ExtTab pTab){
tabs.add(pTab);
}
/**
* 释放资源
*/
public void release(){
super.release();
this.activeTab = null;
this.tabsId = null;
this.width = null;
this.height = null;
}
public String getTabsId() {
return tabsId;
}
public void setTabsId(String tabsId) {
this.tabsId = tabsId;
}
public String getActiveTab() {
return activeTab;
}
public void setActiveTab(String activeTab) {
this.activeTab = activeTab;
}
public String getWidth() {
return width;
}
public void setWidth(String width) {
this.width = width;
}
public void setHeight(String height) {
this.height = height;
}
public void setAutoScroll(String autoScroll) {
this.autoScroll = autoScroll;
}
}
/**
* EXT风格标签选项卡标签-公共标签
* @author
* @version eRedUI V0.1
*/
public class ExtTabTag extends BodyTagSupport{
private String tabId;
private String title;
private String disabled;
private String onclick;
public ExtTabTag(){}
/**
* 标签开始:Do Nothing!
*/
public int doStartTag() throws JspException{
return super.EVAL_BODY_BUFFERED;
}
/**
* 标签结束：输出代码描述字符流
*/
public int doEndTag() throws JspException{
String content = this.bodyContent.getString();
ExtTabsTag tabs = (ExtTabsTag)findAncestorWithClass(this, ExtTabsTag.class);
ExtTab tab = new ExtTab();
tab.setTabId(this.getTabId());
tab.setTitle(this.getTitle());
tab.setContent(content);
tab.setDisabled(this.getDisabled());
tab.setOnclick(this.getOnclick());
tabs.addTab(tab);
//tabs.addTab(this);
return super.doEndTag();
}
/**
* 释放资源
*/
public void release(){
super.release();
this.tabId = null;
this.title = null;
}
public String getTabId() {
return tabId;
}
public void setTabId(String tabId) {
this.tabId = tabId;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public void setDisabled(String disabled) {
this.disabled = disabled;
}
public void setOnclick(String onclick) {
this.onclick = onclick;
}
public String getDisabled() {
return disabled;
}
public String getOnclick() {
return onclick;
}
}
分享到：
相关推荐
在本文中，我们将深入探讨ExtJS中的`Ext.TabPanel`组件，它是创建多标签界面的核心元素。`Ext.TabPanel`允许开发者在单个容器中组织多个面板或视图，每个面板都有自己的标题，并且可以通过标签页进行切换。让我们...
### Ext.data.Store的基本用法详解 #### 一、Ext.data.Store简介 `Ext.data.Store`是ExtJS框架中用于管理数据的核心组件之一。它主要负责数据的存储、加载、更新等操作，并且提供了多种方法来方便地处理这些数据。...
9.5.1 标签面板的构成及其运行流程：ext.tab.panel、ext.tab.bar与ext.tab.tab / 458 9.5.2 标签面板的配置项、属性、方法和事件 / 462 9.5.3 使用标签页 / 463 9.5.4 可重用的标签页 / 465 9.6 视图与选择模型...
JMeter导入jmx运行脚本时出现这样的错误jmeter.save.SaveService: Conversion error .../lib/ext ==> JMeterPlugins.jar
org.restlet.ext.servlet-2.1.1.jar
EXT.form组件是EXT JS库中用于构建表单界面的核心组件集合。这些组件提供了一系列丰富的控件，用于创建具有不同功能的交互式表单。在EXT JS中，表单组件不仅包含基本的输入字段，还支持复杂的输入类型和验证机制。 ...
看名字，有需要下jar包
### Ext.get与Ext.fly的区别 在Ext JS框架中，`Ext.get`和`Ext.fly`是两个非常重要的方法，它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### ...
Ext.JS是一个强大的JavaScript库，专门用于构建富客户端Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和可扩展的架构，使得开发人员能够创建功能复杂的桌面级网页应用。"深入浅出Ext.JS.徐会生例子"可能是...
var reader = new Ext.data.JsonReader({totalProperty:'totalProperty',root:'root'},record); store = new Ext.data.Store({ proxy:proxy, reader:reader }); //尾 分页 var pagebar = new Ext....
在EXTJS这个强大的JavaScript框架中，`Ext.Panel`和`TreePanel`是两个非常重要的组件，它们被广泛用于构建复杂的用户界面。这篇文章将探讨如何在这些组件中动态加载本地页面数据，以提升用户体验并实现灵活的数据...
在Ext JS这个强大的JavaScript框架中，`Ext.Window`是一个常用组件，用于创建浮动、可弹出的窗口。在Web应用程序中，我们常常需要在这些窗口中展示各种内容，包括文字、表格、按钮，当然还有图片。本文将详细介绍...
7. **EXT.js的最新版本和更新**：如果是更新包，可能包含EXT.js的最新版本或者特定版本的补丁，用于升级现有项目。 请根据实际解压后的内容来确认这些假设，以了解“EXT dojochina Ext注册.rar”具体包含哪些信息。...
在EXTJS框架中，`Ext.ux.form.LovCombo`是一种自定义组件，它扩展了基本的`Ext.form.field.ComboBox`，提供了更丰富的功能，尤其是针对多选和联动选择的需求。这个组件通常用于创建具有“lov”（即“Look Up Value”...
在本文中，我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件，它负责加载和解析树形结构的数据，而JSON（JavaScript Object Notation）则是一种轻...
在EXTJS库中，`Ext.Array` 是一个非常重要的工具类，它提供了许多方便的静态方法，用于处理JavaScript中的数组。这些方法旨在增强原生数组的功能，提高代码的可读性和效率。`Ext.Array` 包含了排序、查找、过滤、...
### Ext.JS 4.0 第一印象：新特性与迁移指南 #### 一、书籍简介 本书《Ext.JS 4.0 第一印象》由 Loiane Groner 撰写，是一本针对 Ext.JS 4.0 的实用指南。书中详细介绍了 Ext.JS 4.0 的新特性，并提供了从 Ext.JS ...
在EXTJS库中，`Ext.Ajax.request`是用于发送Ajax请求的核心方法，它支持异步和同步操作。本文将详细解析如何利用`Ext.Ajax.request`实现同步请求，并探讨其背后的原理和注意事项。 首先，我们需要理解Ajax的本质，...
在本示例中，"EXT dojochina文本框示例Ext.form.TextField.rar"是一个压缩包，包含了EXT框架中关于`Ext.form.TextField`组件的示例代码。 `Ext.form.TextField`是EXT框架中的一个核心组件，用于创建基本的输入字段...
Ext.js 是一个强大的JavaScript库，专门用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件和数据绑定功能，使得开发者可以构建出具有桌面应用级别的交互式网页应用。本教程和API文档聚焦于Ext.js 3.0版本...