弱弱的发一贴：Ext.Tab without Ext.Tab

最新推荐文章于 2019-06-18 21:20:25 发布
最新推荐文章于 2019-06-18 21:20:25 发布
阅读量127 收藏
点赞数
分类专栏： J2EE应用相关 文章标签： EXT JSP 活动 框架 HTML
[b]1.写在前面[/b]
最近由于公司框架中的Tab组件Bug多多，迟迟不能解决。遂自己动手把Ext.Tab写成JSPTag来使用。发出来给和偶一样经常在海边拾贝壳的小鸟们借鉴参考之用。JS大师你们肯定要说，我是没事找事，直接用EXT不就行了何必那么麻烦，但问题是直接使用EXT的话，页面将大量引入一堆难读的JS和html而且也给一些作坊型的项目组带来了学习培训的成本。
[b]2.实现的功能[/b]
由Java后端根据JSPTag生成Ext.Tab界面所需的html元素和JS。实现全部功能不需要程序员编写一行html代码或者JS。主要功能列表:
无限嵌套生成标签卡。
标签卡容器的自动扩展、自动滚动条、高度、宽度、当前活动标签卡的JSP属性设置。
标签卡的禁用、onclick事件响应的JSP属性设置。
支持request重置当前活动标签卡。
[b]3.JSP代码[/b] 

<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>

[b]4.效果图[/b]
[img]http://www.shangrilaagroecology.org/eredlab/resource/e3/eredtab.jpg[/img]
[b]5.关键代码[/b]
[b]TLD描述:[/b] 

	<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>

[b]标签实现类[/b] 

/**
 * 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;
	}
}

eredlab
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
maven命令行创建web项目报错：java.lang.NoClassDefFoundError: org/apache/commons/lang/StringUtils...
wuxun1997的专栏
11-21 8150
　　早上新建一个web项目，没想到一敲命令创建就失败了，真是出师不利。各种折腾无果，当然我也可以用eclipse直接创建的，就是想搞清楚状况。刚刚才发现问题原因，这个结果我也是醉了，太坑爹了。 　　问题现象： E:\workspace>mvn archetype:generate -DarchetypeCatalog=internal -DgroupId=com.wulf.memcac...
Ext之扩展Ext.ux.form.LovCombo使用
longxzq的专栏
12-05 657
    最近学习使用Ext做些东西，有时候找到现成的，但却不知道如何使用。比如前几天在项目中有个多选下拉框的要求。由于Ext本身并没有这样的控件，经过在网上搜索，找到一个扩展了Ext.form.ComboBox的控件Ext.ux.form.LovCombo 其可以满足多选。虽然找到了，但不知道怎么用，经过一天多的努力，终于会用了。首先看看其源码。   Ext.ux.form.LovCombo源...
caffe配置:Makefile.config与Makefile
weixin_39451323的博客
06-18 303
## Refer to http://caffe.berkeleyvision.org/installation.html # Contributions simplifying and improving our build system are welcome! # cuDNN acceleration switch (uncomment to build with cuDNN). USE_...
ExtJs_Ext.form.Field解说
cenyebao的专栏
09-16 5429
/*!  * Ext JS Library 3.3.0  */ /**  * @class Ext.form.Field  * @extends Ext.BoxComponent  * Base class for form fields that provides
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
10-19
主要介绍了ExtJs的Ext.Ajax.request实现waitMsg等待提示效果,需要的朋友可以参考下
org.restlet.ext.servlet-2.1.1.jar
04-15
org.restlet.ext.servlet-2.1.1.jar
todo.tab:todo.tab chrome 浏览器扩展
06-27
todo.tab是一个极简的 Chrome 浏览器扩展，用于在新标签页上显示内容列表。 特征 极简界面 可编辑的列表标题 Markdown 支持和预览功能 数据在您登录的任何浏览器/计算机中所有打开的选项卡中实时同步 键盘快捷键。 ...
org.restlet.ext.spring.jar
01-07
org.restlet.ext.spring.jar
Extjs Ext.MessageBox.confirm 确认对话框详解
12-09
Ext.MessageBox.confirm()详解 显示一个确认对话框，用来代替JavaScript标准的confirm()方法，具有两个按钮“是”和“否”如果为其提供一个回调函数，则该函数将在单击按钮后被调用(包括右上角的...
聊天室、websocket、socket.io、毕业设计.zip
07-27
聊天室、websocket、socket.io、毕业设计.zip
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
防盗门进销存管理系统（SDIMS）.zip
07-27
防盗门进销存管理系统（SDIMS）.zip
Matlab实现蝗虫优化算法GOA-CNN-BiLSTM-Mutilhead-Attention多变量时序预测.rar
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
[毕设]二叉树构建与遍历算法实现.zip
07-27
[毕设]二叉树构建与遍历算法实现
cykooz.resizer-3.0.0-cp39-cp39-macosx_10_12_x86_64.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
大学生创业计划书大学生创新创业项目申报书大学生创业计划书大学生创新创业项目申报书
07-27
大学生创业计划书大学生创新创业项目申报书大学生创业计划书大学生创新创业项目申报书
Access-数据库应用实验指导书.doc
最新发布
07-27
Access-数据库应用实验指导书.doc
brisque_opencv-0.0.17-py3-none-any.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
ExtJS2.0学习：Ext.MessageBox详解
作者分享了关于Ext.MessageBox的使用，包括alert、confirm、prompt和show方法的详细讲解，帮助初学者更好地掌握ExtJS的基本用法。" 文章内容详解： 1. Ext.MessageBox.alert()方法 `Ext.MessageBox.alert()` 方法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值