- 浏览: 113071 次
- 来自: 北京
文章分类
最新评论
-
hww_1030:
spring+springmvc+ibatis整合注解方式实例 -
jackclchan:
你好,能将demo源码发我下吗?jackclchan@qq.c ...
spring+springmvc+ibatis整合注解方式实例 -
amwiqplhui:
你好,能将demo源码发我下吗?772851689@qq.co ...
spring+springmvc+ibatis整合注解方式实例 -
jiangshenyi:
你好,上面的demo 能发我一份了 deshanjiang8 ...
spring+springmvc+ibatis整合注解方式实例 -
springmvc-freemarker:
spring mvc demo教程源代码下载,地址:http: ...
spring+springmvc+ibatis整合注解方式实例
最近在做一个公司的框架,采用extjs+dwr,由于考虑到extjs的学习曲线,希望开发人员即便不会也能使用,于是我就打算用jsp自定义标签来实现。我觉得凡是用ext框架的公司都会用标签或者其他方式生成一些ext代码,否则多麻烦啊。
由于刚开始接触extjs,所以很多用法都在探索中。有不妥的地方请指正
效果图:
看看,jsp多简洁,开发人员用起来会很舒服
- <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>
<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
- <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>
<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
生成的代码:
- <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>
<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代码,就这么简单。该分页是取部分数据分页而不是全取。合计是全部数据合计。并且扩展了排序功能,能组合排序。还有一点功能需要完善,相信会很好用。
- <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>
<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配置方式。反正还在完善中!
发表评论
-
网页的常用属性,便于以后编写网页查询
2011-02-11 18:01 946这里收藏一些编写网页的常用属性,便于以后编写网页查询。&quo ... -
javascript经典代码
2011-01-28 17:07 7741. oncontextmenu="window ... -
Ext 常用控件属性列表
2011-01-25 11:33 1098Ext 常用控件属性列表 Ext 常用控件属性列 ... -
extJs grid的常见问题:
2011-01-22 12:54 1575grid的常见问题: 1, grid数据为空.2, ... -
ext 控件属性
2011-01-21 14:33 1160Ext.Action action实现一个脱离了容 器的事件 ... -
第 9 章 沉寂吧!我们要自己的控件
2011-01-21 10:02 928第 9 章 沉寂吧!我们要自己的控件 Script 2008 ... -
第 8 章 哭泣吧!现在才开始讲基础问题。
2011-01-21 10:01 8028.1. Ext.get ... -
第 7 章 低鸣吧!拖拽就像呼吸一样容易。
2011-01-21 10:00 9047.1. 如此拖拽,简直就像与生俱来的本能一 ... -
第 6 章 奔腾吧!让不同的浏览器里显示一样的布局。
2011-01-21 09:59 8616.1. 有了它,我们就可以摆脱那些自称ui ... -
第 5 章 雀跃吧!超脱了一切的弹出窗口。
2011-01-21 09:59 8615.1. 呵呵~跳出来和缩回去总给人惊艳的感 ... -
第 4 章把表单和输入控件都改成ext的样式。
2011-01-21 09:58 10364.1. 不用ext的form啊,不怕错过有 ... -
第 3 章 歌颂吧!只为了树也要学ext。
2011-01-21 09:57 10893.1. 真的,我是 ... -
第 2 章 震撼吧!让你知道ext表格控件的厉害。
2011-01-21 09:57 14042.1. 功能丰富,无人能出其右 ... -
第 1 章 闪烁吧!看看extjs那些美丽的例子。
2011-01-21 09:56 953.1. 一切从extjs发布包开 ... -
ext-grid常见问题 FAQ: Grid
2011-01-19 11:24 1142grid的常见问题: 1, gri ... -
最强学习笔记---GridPanel(基础篇)
2011-01-19 11:19 882我不想教各位新手什么 ...
相关推荐
extjs-tag-cloud 功劳归于人们@ 我刚刚修改了构造函数接受存储为标签数组。 用法 只需将以下内容添加到您的构造函数树中: { xtype : 'tagcloud' , store : [ 'education' , 'financial' , 'computer' , '...
org.apache.jasper.JasperException: /WEB-INF/tags/ext/body.tag(105,4) PWC6038: "${empty(extLocation)?"js/ext-2.0":extLocation}" contiene expresiones no válidas: javax.el.ELException: Error Parsing: ...
使用ExtJs的DataView扩展的Tags控件,使用时将Tags.js和tags.css导入页面,将tags文件也放进工程,实例化Tags类即可使用,类的配置项有注释说明。
- 0000720: Tag property for DBGrid Columns - 0000723: DBGrid: numeric column is not aligned to right - 0000722: Setting Align := alCenter on DBGridColumns does not work - 0000715: OmniHTTPD and ...
关于这个原因有很多种,我只说下我遇到的 我这样 写Store来复用的 代码如下: DocStore = Ext.extend(Ext.data.Store,{ initComponent:function(){ this.proxy = new Ext.data.HttpProxy({url:this.url});...
在jquery中,extend其实在做插件时还是用的比较多的,今天同时小结jquery和ext js中 的extend用法,先来看jquery中的。 1) extend(dest,src1,src2,src3…); 代码如下: var start = { id: 123, count: 41, desc: ...
UnitText.js ======================= 代码如下: // 输入框textfield后面放字unitText定义: Ext.override(Ext.form.TextField, { unitText : ”, onRender : function(ct, position) { Ext.form.TextField....
7、具备良好的编码风格和开发习惯,熟练掌握UML设计工具; 8、熟悉linux或unix操作系统文件系统以及常用命令; 9. 熟悉Tomcat等应用服务器的使用,熟悉LINUX操作系统,熟悉TCP/IP、HTTP等网络协议,掌握多线程编程,...
jQuery EasyUI是基于JQuery的一个前台ui界面的插件,功能相对没extjs强大,但页面也是相当好看的,同时页面支持各种themes以满足使用者对于页面不同风格的喜好。一些功能也足够开发者使用,相对于extjs更轻量。 ...
<script type="text/javascript" src="js/ExtCkeditor.js"> <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); // turn on validation errors beside the field globally //Ext...
安装和配置 为 Postgresql 安装扩展安装 postgresql-contrib 加载 dmoz 数据库psql <dmozltree-eng.sql 发射 Python服务器/ web.py 什么有效 显示标签树 删除标签,包括所有子节点(节点上的右键和删除) ...