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

JaNer

浏览: 44022 次
性别:
来自: 昆明

最近访客更多访客>>

maoweiwer

dfjjfxyl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

J2EE应用相关

EXT JSP 活动框架 HTML

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

分享到：

饭没了秀之E3.Table助力**省医疗保险信息系 ... | 傻眼了吧！Ext.Grid without Ext.Grid

2008-08-08 05:51
浏览 2231
评论(2)
论坛回复 / 浏览 (2 / 2803)
分类:Web前端
查看更多

2 楼 JaNer 2008-08-08

huangyh 写道

不错，很实用:)

哈哈玩具玩具！给同学们当参考材料～～～～

1 楼 huangyh 2008-08-08

不错，很实用:)

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论