`
shaohan126448
  • 浏览: 115851 次
  • 来自: 北京
社区版块
存档分类
最新评论

extjs-tag (即使不会extjs和js也能开发页面)

阅读更多

最近在做一个公司的框架,采用extjs+dwr,由于考虑到extjs的学习曲线,希望开发人员即便不会也能使用,于是我就打算用jsp自定义标签来实现。我觉得凡是用ext框架的公司都会用标签或者其他方式生成一些ext代码,否则多麻烦啊。

由于刚开始接触extjs,所以很多用法都在探索中。有不妥的地方请指正

 

 

效果图:

 

 看看,jsp多简洁,开发人员用起来会很舒服

Jsp代码 复制代码
  1. <stk-ui:panel width="400" title="测试">   
  2.   
  3.     <form action="/login.jsp" id="testForm1">   
  4.   
  5.         姓名:<stk-ui:textField id="t1"/><br>   
  6.   
  7.         <stk-ui:formButton text="提交" btnType="submit" formId="testForm1"/>   
  8.   
  9.     </form>   
  10.   
  11. </stk-ui:panel>  
<stk-ui:panel width="400" title="测试">

    <form action="/login.jsp" id="testForm1">

        姓名:<stk-ui:textField id="t1"/><br>

        <stk-ui:formButton text="提交" btnType="submit" formId="testForm1"/>

    </form>

</stk-ui:panel>

  

 panel.ftl

 

Freemark代码 复制代码
  1. <div id="${parameters.id}Div">   
  2.     <div id="${parameters.id}El" class="x-hidden" align="center">   
  3. <script type="text/javascript">   
  4.     Ext.onReady(function()   
  5.     {   
  6.         new Ext.Panel({   
  7.             <#if parameters.frame?exists>   
  8.                 frame:${parameters.frame},   
  9.             </#if>   
  10.             <#if parameters.title?exists>   
  11.                 title:'${parameters.title}',   
  12.             </#if>   
  13.             <#if parameters.bodyStyle?exists>   
  14.                 bodyStyle:'${parameters.bodyStyle}',   
  15.             </#if>   
  16.             <#if parameters.autoLoad?exists>   
  17.                 autoLoad:'${parameters.autoLoad}',   
  18.             </#if>   
  19.             <#if parameters.autoScroll?exists>   
  20.                 autoScroll:${parameters.autoScroll},   
  21.             </#if>   
  22.             <#if parameters.collapsible?exists>   
  23.                 collapsible:'${parameters.collapsible}',   
  24.             </#if>   
  25.             <#if parameters.height?exists>   
  26.                 height:${parameters.height},   
  27.             </#if>   
  28.             <#if parameters.x?exists>   
  29.                 x:${parameters.x},   
  30.             </#if>   
  31.             <#if parameters.y?exists>   
  32.                 y:${parameters.y},   
  33.             </#if>   
  34.             width: '${parameters.width}',   
  35.             defaults: {width: (${parameters.width}-30)},   
  36.             renderTo:'${parameters.id}Div',   
  37.             id:'${parameters.id}',   
  38.             items: new Ext.Container({   
  39.                 el:'${parameters.id}El'  
  40.             })   
  41.         });   
  42.         $("#${parameters.id}El").removeClass("x-hidden");   
  43.     });   
  44. </script>  
<div id="${parameters.id}Div">
    <div id="${parameters.id}El" class="x-hidden" align="center">
<script type="text/javascript">
    Ext.onReady(function()
    {
        new Ext.Panel({
            <#if parameters.frame?exists>
                frame:${parameters.frame},
            </#if>
            <#if parameters.title?exists>
                title:'${parameters.title}',
            </#if>
            <#if parameters.bodyStyle?exists>
                bodyStyle:'${parameters.bodyStyle}',
            </#if>
            <#if parameters.autoLoad?exists>
                autoLoad:'${parameters.autoLoad}',
            </#if>
            <#if parameters.autoScroll?exists>
                autoScroll:${parameters.autoScroll},
            </#if>
            <#if parameters.collapsible?exists>
                collapsible:'${parameters.collapsible}',
            </#if>
            <#if parameters.height?exists>
                height:${parameters.height},
            </#if>
            <#if parameters.x?exists>
                x:${parameters.x},
            </#if>
            <#if parameters.y?exists>
                y:${parameters.y},
            </#if>
            width: '${parameters.width}',
            defaults: {width: (${parameters.width}-30)},
            renderTo:'${parameters.id}Div',
            id:'${parameters.id}',
            items: new Ext.Container({
                el:'${parameters.id}El'
            })
        });
        $("#${parameters.id}El").removeClass("x-hidden");
    });
</script>

 

 

button.ftl 和 textField.ftl省略,标签类也省略

tr

生成的代码:

Java代码 复制代码
  1. <div id="5068fb04-a387-4091-9c70-9810fe47ee6aDiv">   
  2.     <div id="5068fb04-a387-4091-9c70-9810fe47ee6aEl" class="x-hidden" align="center">   
  3.         <script type="text/javascript">   
  4.         Ext.onReady(function()   
  5.         {   
  6.             new Ext.Panel({   
  7.                     frame:true,   
  8.                     title:'测试',   
  9.                     autoScroll:true,   
  10.                 width: '400',   
  11.                 defaults: {width: (400-30)},   
  12.                 renderTo:'5068fb04-a387-4091-9c70-9810fe47ee6aDiv',   
  13.                 id:'5068fb04-a387-4091-9c70-9810fe47ee6a',   
  14.                 items: new Ext.Container({   
  15.                     el:'5068fb04-a387-4091-9c70-9810fe47ee6aEl'  
  16.                 })   
  17.             });   
  18.             $("#5068fb04-a387-4091-9c70-9810fe47ee6aEl").removeClass("x-hidden");   
  19.         });   
  20.         </script>   
  21.   
  22.         <form action="/login.jsp" id="testForm1">   
  23.             姓名:<span id="t1TextSpan"></span>   
  24.     <script type="text/javascript">   
  25.       Ext.onReady(function()   
  26.       {   
  27.          Ext.QuickTips.init();   
  28.          new Ext.form.TextField   
  29.          ({   
  30.                 renderTo:'t1TextSpan',   
  31.                 id:'t1'  
  32.         });   
  33.     });   
  34.     </script>   
  35.         <br>   
  36.         <span id="9c9e1b2f-7544-4210-a71e-af4336a7f580BtnSpan" style="width:1px;"></span>   
  37.     <script type="text/javascript">   
  38.             Ext.onReady(function()   
  39.             {   
  40.                     new Ext.Button({   
  41.                             type:'submit',   
  42.                             handler:function(){document.getElementById('testForm1').submit();},   
  43.                         text:'提交',   
  44.                         id:'9c9e1b2f-7544-4210-a71e-af4336a7f580',   
  45.                         renderTo:'9c9e1b2f-7544-4210-a71e-af4336a7f580BtnSpan'  
  46.                     });   
  47.             });   
  48.     </script>   
  49.     </form>   
  50.     </div>   
  51. </div>  
<div id="5068fb04-a387-4091-9c70-9810fe47ee6aDiv">
    <div id="5068fb04-a387-4091-9c70-9810fe47ee6aEl" class="x-hidden" align="center">
        <script type="text/javascript">
	    Ext.onReady(function()
	    {
	        new Ext.Panel({
	                frame:true,
	                title:'测试',
	                autoScroll:true,
	            width: '400',
	            defaults: {width: (400-30)},
	            renderTo:'5068fb04-a387-4091-9c70-9810fe47ee6aDiv',
	            id:'5068fb04-a387-4091-9c70-9810fe47ee6a',
	            items: new Ext.Container({
	                el:'5068fb04-a387-4091-9c70-9810fe47ee6aEl'
	            })
	        });
	        $("#5068fb04-a387-4091-9c70-9810fe47ee6aEl").removeClass("x-hidden");
	    });
        </script>

        <form action="/login.jsp" id="testForm1">
            姓名:<span id="t1TextSpan"></span>
	<script type="text/javascript">
	  Ext.onReady(function()
	  {
	     Ext.QuickTips.init();
	     new Ext.form.TextField
	     ({
	            renderTo:'t1TextSpan',
	            id:'t1'
	    });
	});
	</script>
        <br>
        <span id="9c9e1b2f-7544-4210-a71e-af4336a7f580BtnSpan" style="width:1px;"></span>
	<script type="text/javascript">
	        Ext.onReady(function()
	        {
	                new Ext.Button({
	                        type:'submit',
	                        handler:function(){document.getElementById('testForm1').submit();},
	                    text:'提交',
	                    id:'9c9e1b2f-7544-4210-a71e-af4336a7f580',
	                    renderTo:'9c9e1b2f-7544-4210-a71e-af4336a7f580BtnSpan'
	                });
	        });
	</script>
    </form>
    </div>
</div>

 

 

目前已经完成的标签大概有6个,确实遇到不少困难,比如button单独使用会自动换行等问题。唉,不容易啊

 

 

 

这个例子估计相对简单,导致大家有点误解,来看看经过一段时间努力,完成的ajaxGrid的标签:

 

效果图:

 

 

jsp代码,就这么简单。该分页是取部分数据分页而不是全取。合计是全部数据合计。并且扩展了排序功能,能组合排序。还有一点功能需要完善,相信会很好用。

 

Jsp代码 复制代码
  1. <stk-ui:table id="sqlTable" actionName="TestSql" pageSize="8" width="780" height="370" title="Sql例子+双击事件+合计" needDetail="true" needCollect="true">   
  2.     <stk-ui:column property="OpTime" title="操作时间" pattern="yyyy-MM-dd hh:mm:ss"/>   
  3.     <stk-ui:column property="UserCode" title="操作员" key="userinfo" pattern="code|name" parser="translate"/>   
  4.     <stk-ui:column property="OpClass" title="操作类型" parser="dict" key="1086"/>   
  5.     <stk-ui:column property="id" title="金额" collectMethod="SUM,AVG" parser="number" align="right"/>   
  6.     <stk-ui:column property="OpContent" title="操作内容"/>   
  7.     <stk-ui:column property="IpAddr" title="IP地址" cssStyle="color:red"/>   
  8.     <stk-ui:column property="FirstLevel" title="一级菜单" parser="translate" key="menu"/>   
  9.     <stk-ui:column property="SecondLevel" title="二级菜单" parser="translate" key="menu"/>   
  10.     <stk-ui:column property="Memo" title="备注" maxWords="20" needHint="true"/>   
  11. </stk-ui:table>  
<stk-ui:table id="sqlTable" actionName="TestSql" pageSize="8" width="780" height="370" title="Sql例子+双击事件+合计" needDetail="true" needCollect="true">
    <stk-ui:column property="OpTime" title="操作时间" pattern="yyyy-MM-dd hh:mm:ss"/>
    <stk-ui:column property="UserCode" title="操作员" key="userinfo" pattern="code|name" parser="translate"/>
    <stk-ui:column property="OpClass" title="操作类型" parser="dict" key="1086"/>
    <stk-ui:column property="id" title="金额" collectMethod="SUM,AVG" parser="number" align="right"/>
    <stk-ui:column property="OpContent" title="操作内容"/>
    <stk-ui:column property="IpAddr" title="IP地址" cssStyle="color:red"/>
    <stk-ui:column property="FirstLevel" title="一级菜单" parser="translate" key="menu"/>
    <stk-ui:column property="SecondLevel" title="二级菜单" parser="translate" key="menu"/>
    <stk-ui:column property="Memo" title="备注" maxWords="20" needHint="true"/>
</stk-ui:table>

 

其中Action现在可以对应一个类返回Query对象,也可以做成一个xml配置方式。反正还在完善中!

分享到:
评论

相关推荐

    extjs-tag-cloud:Ext JS标签云组件

    extjs-tag-cloud 功劳归于人们@ 我刚刚修改了构造函数接受存储为标签数组。 用法 只需将以下内容添加到您的构造函数树中: { xtype : 'tagcloud' , store : [ 'education' , 'financial' , 'computer' , '...

    ExtJS Jetty启动报错 tag

    此问题涉及到的是一个基于Jetty服务器的ExtJS应用,在尝试启动时遇到了`JasperException`,这通常与JSP(Java Server Pages)的编译和解析有关。下面将详细解释这个问题及其解决方案。 首先,`JasperException`是...

    ExtJS Tag Cloud chart library

    通过阅读`TagCloudComponent.js`源码,我们可以深入了解ExtJS组件的开发模式,学习如何利用JavaScript和CSS来实现动态的可视化元素。同时,这也有助于提升对数据驱动视图、用户交互处理和Web动画原理的理解。对于想...

    extjs oracle分页---Json转换

    标题“ExtJS Oracle分页---Json转换”涉及的是在Web应用程序开发中,使用ExtJS框架与Oracle数据库进行分页数据交互,并通过Json格式进行数据转换的技术。以下是对这个主题的详细解释: ExtJS是一个强大的JavaScript...

    ExtJs3.4 扩展的Tags控件

    ExtJs是一款广泛应用于Web前端开发的JavaScript库,它提供了丰富的组件和功能,使得开发者能够构建交互性强、用户体验优秀的Web应用程序。在本主题中,我们关注的是ExtJs3.4版本中的一个扩展——Tags控件。这个控件...

    extjs扩展标记

    EXTTLD(EXTJS Tag Library Descriptors)则是EXTJS扩展标记的元数据,它定义了这些自定义标签的行为和属性。 以下是对EXTJS扩展标记中涉及的一些主要知识点的详细解释: 1. **EXTJS组件**:EXTJS的核心是它的组件...

    Extjs,ExtTLD框架

    ExtJS和ExtTLD是两个在JavaScript开发领域中与构建用户界面相关的技术。本文将深入探讨这两个概念,以及如何利用它们来创建具有树形结构的框架。 **ExtJS** ExtJS是一个开源的JavaScript库,主要用于构建富客户端...

    EXTJS 3.04包/中文版API/入门学习资料

    Ext3_API.rar则是EXTJS 3.04的中文API文档,是学习和开发的重要参考资料。 通过这些资源,开发者不仅可以了解EXTJS的基本用法,还能掌握其高级特性,从而高效地构建高性能的Web应用。在实践中,不断探索EXTJS的潜力...

    ExtJs表格点击超链接获取行的值

    除了基本的渲染和数据获取外,ExtJs还提供了丰富的配置选项来定制表格的行为和外观。 - `autoHeight`: 自动调整高度以适应内容。 - `autoWidth`: 自动调整宽度以适应内容。 - `autoShow`: 是否自动显示组件。 - `...

    ExtJs4.2 Window常用方法

    根据提供的文件信息,本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法,帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架,用于创建...

    ExtJs入门 ExtJs很好的电子书 ExtJS入门.pdf 入门ExtJs必备电子书

    - **ExtJs**是一款基于JavaScript的企业级富客户端应用开发框架,它提供了一系列丰富的UI组件和功能强大的工具,使得开发者能够轻松地创建出高质量的Web应用程序。根据标题和描述中提到的核心思想,我们可以将ExtJs...

    Extjs中文教程

    - **环境搭建**包括下载最新版本的Extjs、配置开发环境以及安装必要的开发工具。 ##### 1. 下载 - 可以从Extjs官网或其他可信源下载最新版本的Extjs。 - 建议下载完整的开发包,包含文档、源码和示例。 ##### 2. ...

    EXTJS网站后台以及JSP+JSTL+EL网站前台

    EXTJS是一种基于JavaScript的前端框架,它主要用于构建交互式的、数据驱动的Web应用程序。EXTJS提供了丰富的组件库,包括表格、表单、...开发这样的系统需要掌握前端和后端的多种技术,并能有效地协调前后端数据交互。

    java-Struts-Hibernatelib.zip_extjs4

    【标题】"java-Struts-Hibernate-lib.zip_extjs4" 涉及的是一个Java Web开发中的集成框架,其中包括了Struts、Hibernate和Spring这三个核心组件,以及ExtJS4前端框架,配合Jbpm4流程引擎和Oracle10g数据库的实践项目...

    extjs例子教程ppt

    【EXTJS例子教程】深入解析EXTJS开发与应用 EXTJS是一种基于JavaScript的富互联网应用(RIA)框架,它提供了一套完整的组件化UI解决方案,能够构建出具有桌面应用程序特性的交互式Web应用。EXTJS的例子教程旨在帮助...

    extjs.3.0中文API

    ExtJS是一个广泛使用的JavaScript库,特别适用于构建富客户端应用程序。3.0版本是该库的一个重要里程碑,提供了许多功能和改进。这篇文档将详细介绍ExtJS 3.0的中文API,帮助开发者更好地理解和使用这个框架。 一、...

    EXTJS4导出excel示例

    EXTJS4是一款强大的JavaScript框架,主要用于构建富客户端的Web应用程序。在EXTJS4中,实现导出数据到Excel的功能是一项常见的需求,这可以帮助用户方便地处理和存储大量数据。本示例将详细介绍EXTJS4如何实现Excel...

    extjsapi文档

    ExtJS API文档是针对Ext JS 3.2版本的一份详细技术资料,它包含了这个JavaScript框架的所有核心组件、类库和功能的详细说明。Ext JS是一个用于构建富客户端Web应用的开源JavaScript库,以其强大的组件模型和丰富的...

    用Extjs做的一个小项目,实现了增删改查

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端应用程序,特别是Web应用的用户界面。它提供了丰富的组件模型、数据绑定机制以及完善的事件处理系统,使得开发者可以构建出功能强大、交互性极强的Web应用。在...

    ExtJs 文本框后附件单位

    在使用ExtJS进行界面开发的过程中,常常会遇到需要在文本框后面附加单位的情况。例如,在输入数量时需要显示“个”、“人”等单位。这样的设计不仅提高了用户体验,还使得数据的含义更加清晰明确。然而,默认情况下...

Global site tag (gtag.js) - Google Analytics