- 浏览: 276968 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhuzhuhenzhencheng:
密码是什么啊
Ext表格(Grid)上面的悬浮提示 -
鹿惊_:
确实如雪中送炭般温暖!
Ext扩展整理后吐血奉献 -
ortega1_2_3:
该版本貌似有bug,当sockIOPool的自平衡线程self ...
Java MemCached Window简单实现 -
q6952592:
好。解决了我的兼容模式下出现的问题。
Ext表格(Grid)上面的悬浮提示 -
fei33423:
请参考 fei33423的文章 java中直接调用groovy ...
Groovy应用(Java与Groovy间相互调用)
Ext XTemplate的应用:
template.js
Ext.onReady(function(){ //定义模板 使用标签tpl和操作符for var tpl1 = new Ext.XTemplate( '<table border=1 cellpadding=0 cellspacing = 0>', '<tr><td colspan=2 align=center>For循环便利数据</td></tr>' , '<tr>', '<td width=90 >姓名</td>', '<td width=90 >年龄</td>', '</tr>', '<tpl for=".">', '<tr>', '<td>{name}</td>', '<td>{age}</td>', '</tr>', '</tpl>', '</table>' ); //通过自定义格式化函数解析json对象 {stature:this.parseJson()} var tpl2 = new Ext.Template( '<table border=1 cellpadding=0 cellspacing = 0>', '<tr><td colspan=2 align=center>自定义解析json数据</td></tr>' , '<tr>', '<td width=90 >姓名</td>', '<td width=120>{name}</td>', '</tr>', '<tr>', '<td width=90 >年龄</td>', '<td width=120>{age}</td>', '</tr>', '<tr>', '<td width=90 >身高</td>', '<td width=120>{stature:this.parseJson()}</td>', '</tr>', '</table>' ); tpl2.parseJson = function(json){ return json.num + json.unit; } ; //数组索引与简单数学运算 {#} 每一项都加上序号 var tpl3 = new Ext.XTemplate( '<table border=1 cellpadding=0 cellspacing = 0>', '<tr><td colspan=3 align=center>每一行上面加上序号</td></tr>' , '<tr>', '<td>序号</td><td width=90 >姓名</td><td width=90 >工资</td>', '</tr>', '<tpl for=".">', '<tr>'+ '<td>{#}</td><td>{name}</td><td>{wage * .9}</td>', '</tr>', '</tpl>', '</table>' ); //自动渲染简单数组 使用特殊变量{.}可循环输出 var tpl4 = new Ext.XTemplate( '<table border=1 cellpadding=0 cellspacing = 0>', '<tr><td colspan=2 align=center>自动渲染简单数组</td></tr>' , '<tr>', '<td>序号</td><td width=90 >姓名</td>', '</tr>', '<tpl for=".">', '<tr>', '<td>{#}</td><td>{.}</td>', '</tr>', '</tpl>', '</table>' ); //基本的条件逻辑判断 这没有else的操作符 如需要,就要写两个逻辑相反的if的语句 //输出工资大于1000的员工信息 工资 * 0.9 var tpl5 = new Ext.XTemplate( '<table border=1 cellpadding=0 cellspacing = 0>', '<tr><td colspan=3 align=center>逻辑判断</td></tr>' , '<tr>', '<td>序号</td><td width=90 >姓名</td><td width=90 >工资</td>', '</tr>', '<tpl for=".">', '<tpl if="wage > 1000">', '<tr>', '<td>{#}</td><td>{name}</td><td>{wage * .9}</td>', '</tr>', '</tpl>', '</tpl>', '</table>' ); //定义组合框模板 xindex:若是循环模板,这是当前循环的索引index(从1开始)。 //values:当前作用域下的值 var itemTpl = new Ext.XTemplate( '<tpl for=".">', '<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">', '{#} :{[this.check(values)]}</div>', '</tpl>', { check : function (values) { if(values.value > 2 ){ return "<font color=red>"+values.item+"</font>"; }else { return "<font color=blue>"+values.item+"</font>"; } } } ) ; new Ext.form.FormPanel({ applyTo :'target', title:'在Extjs组件中使用模板', labelSeparator :':',//分隔符 height : 100, frame : true, width : 350, items : [ new Ext.form.ComboBox({ fieldLabel:'combo', displayField:'item', valueField:'value', tpl : itemTpl,//引入自定义模板 editable : false, mode: 'local', triggerAction: 'all', store : new Ext.data.SimpleStore({ fields: ['item','value'], data : [['条目1',1],['条目2',2],['条目3',3], ['条目4',4],['条目5',5],['条目6',6]] }) }) ] }); var productTpl = new Ext.XTemplate( '<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>' ); Ext.get('addProduct').on('click',function(){ var pname = Ext.get('productName').getValue(); var pnum = Ext.get('productNum').getValue(); var pprice = Ext.get('productPrice').getValue(); productTpl.append('product-table',[pname,pnum,pprice]); }); //定义模板数据 var data1 = [ {name:'张三',age:20}, {name:'李四',age:25}, {name:'王五',age:27}, {name:'赵六',age:26} ]; var data2 = { name : 'tom', age : 24, stature : { num : 170, unit : '厘米' } }; var data3= [ {name : '张三',wage : 1000}, {name : '李四',wage : 1200}, {name : '王五',wage : 900}, {name : '赵六',wage : 1500} ]; var data4 = ['张三','李四','王五','赵六']; //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中 tpl1.append('tpl-1',data1); tpl2.append('tpl-2',data2); tpl3.append('tpl-3',data3); tpl4.append('tpl-4',data4); tpl5.append('tpl-5',data3); });
template.html
<body> <div id='tpl-1'></div> <br> <div id="tpl-2"></div> <br> <div id="tpl-3"></div> <br> <div id="tpl-4"></div> <br> <div id="tpl-5"></div> <br> <div id="target"></div> <br> 产品名称:<input type="text" id="productName"><br> 产品数量:<input type="text" id="productNum"><br> 产品价格:<input type="text" id="productPrice"> <input type="button" value="增加产品" id='addProduct'> <table id='product-table' border=1 cellspacing=0 cellpadding=0> <tr> <td width=160>产品名称</td><td width=75>数量</td><td width=75>金额</td> </tr> </table> </body>
发表评论
-
JSON查看工具
2012-03-09 22:26 0Eclipse 的json插件: 这款插件主要功能是把jso ... -
gzip压缩JavaScript
2012-02-13 17:14 5750为了提高客户端的体验效果,RIA开发逐渐兴起。这样 ... -
Ext扩展整理后吐血奉献
2012-01-19 13:58 7205对 Ext 扩展的一些小总结 1、multicombo (多 ... -
JSON LIB转化时间
2011-11-02 09:32 1385Ext Grid显示Json lib 转化时间为object的 ... -
JS计算日期差
2011-09-24 14:04 1619function Computation(sDate1,sDa ... -
将Air文件转换为EXE进行部署
2011-06-14 17:21 1739如果你的air sdk还没有升级到2.0 那显然是不行的. ... -
禁止IE的backspace键(退格键),但输入文本框时不禁止
2011-06-09 09:59 3702Ext实现方式: Ext.getDoc().on('keyd ... -
Ext中集成在线编辑器Ext.ux.TinyMCE
2011-05-31 15:46 3109Ext.ux.TinyMCE第三方对Ext 在线编辑器的扩展, ... -
Ex的Ajax请求实现同步
2011-05-31 15:29 1370Ext2,.x的Ajax实现同步 Ext.lib.Ajax. ... -
JS实现将XML转化为JSON
2011-05-31 15:09 5602直接上代码 xmlToJson={ parser: ... -
Ext表格(Grid)上面的悬浮提示
2011-05-30 16:36 7631方法一 使用render //鼠标放在Grid上面显示提示 ... -
开发者最容易犯的13个JavaScript错误
2011-04-25 10:28 7251.for.. 数组迭代的用法 U ... -
Ext皮肤切换
2011-04-22 10:46 3357/** * @author JLee * @since ... -
JS获取屏幕大小
2011-04-18 16:56 1251<html> <script> f ... -
在js中对中文和特殊字符转码
2011-04-14 14:21 3960直接上代码 js对文字进行编码涉及3个函数:escape,e ... -
Aptana 构建 Air 项目(集成ExtJS)
2011-03-17 01:00 34861、安装Aptana IDE ... -
读取Properties文件中的内容填充本地combo
2011-03-10 16:24 1856首先定义一个properties文件放到classpath路径 ... -
汉字转换为拼音
2011-03-09 10:11 4613首先定义一个html页面: ... -
Ext Grid 实现批量添加或者修改
2011-03-02 22:30 4529将ExtJS Grid 中的record逐一转化为Bean,实 ... -
ExtJS中submit与Ajax的success
2010-11-12 23:10 7922Ajax中使用Success使用response接收后台传来的 ...
相关推荐
**Node.js-Back2Front基于Express和XTemplate的模块化开发框架** 在现代Web开发中,Node.js以其异步非阻塞I/O模型和高效的性能,成为构建后端服务的热门选择。Back2Front是一个利用Node.js的强大特性,结合Express...
在本文中,我们将深入探讨如何使用ExtJS的XTemplate来实现多张图片的居中排版和自动缩放处理。ExtJS是一个强大的JavaScript框架,它提供了丰富的组件和模板功能,帮助开发者构建用户界面。XTemplate是ExtJS中的一个...
利用模板(xtemplate)表格合并行 简单实现表格分组,单元格行的合并。
**XTemplate 模板引擎详解** XTemplate 是 KISSY 框架中的一个强大而灵活的模板引擎,主要用于生成动态HTML内容。它提供了一种高效、易读的方式来结合数据和视图,使得前端开发人员可以更专注于业务逻辑,而不是...
标题中的"LwIPv2.XTemplate(CMSISRTOS2)_Copy.7z"是一个包含轻量级互联网协议(LWIP)版本2.x的模板项目,它基于CMSIS-RTOS2(ARM公司提供的实时操作系统服务接口标准)进行了适配。这个项目是针对安富莱(Altium ...
xtemplate node.js是一个轻量级的JavaScript模板引擎,专为Node.js平台设计,用于处理和渲染模板文件。它允许开发者编写HTML模板文件,在其中插入动态内容。本文通过实例详细介绍了xtemplate在Node.js中的安装和使用...
Ext.XTemplate是Ext JS框架中用于渲染数据到DOM元素的强大工具。它允许开发者使用模板语法来动态地构建HTML结构,并将数据绑定到这些结构中。在这个实例中,我们看到如何利用Ext.XTemplate来以树形结构展示省份和...
xtpl 和 xtemplate 的捆绑模块 特点 1 如果我们想使用xtpl ,我们还需要在 package.json 上安装独立的xtemplate 。 xtpl2只是将两个模块包装在一个包中。 特点 2 以另一种方式支持koa ,比如 var app = koa(); ...
X模板一个用于管理HTML片段模板的简单Javascript库要查看运行中的XTemplate,请在浏览器中下载包并打开examples目录的文件,或者在上查看它。2015-09-12:V 1.5 在设置新语言时启用了自动翻译操作现在,翻译文件以...
亲吻xtemplate 用于 KISSY 的独立 XTemplate 编译器用法节点 var XTemplate = require ( 'kissy-xtemplate' ) ;new XTemplate ( ) . compileSync ( 'xxx.xtpl.html' , 'xxx.xtpl.js' ) ; 或使用异步版本: var ...
模板浏览器和nodejs上的高速,可扩展模板引擎库。...安装资源() 在浏览器上使用支持requirejs modulex kissy kissy画廊中文教程演示 在节点上使用请使用xtpl 贡献贡献 执照xtemplate是根据MIT许可发布的。
任务-xtemplate KISSY XTemplate 编译器。 “xtemplate”任务 使用示例 var xtemplate = new ( require ( 'task-xtemplate' ) ) xtemplate . run ( inputs , options , logger ) 选项 选项.version 类型: string...
xtpl emmet借助强大的 Emmet 插件,提供 xtemplate 中常用代码片段,从而提高开发效率。使用方法基于 Emmet 插件,以 Sublime text 为例:确保已经安装了 Emmet 插件,并且可以正常使用打开菜单 Preferences→...
围绕 xtemplate 引擎的 node.js 包装器(对于 Koa 2 更容易) 安装 # npm $ npm install koa-xtpl --save # or yarn $ yarn add koa-xtpl 用法 演示.xtpl < p> {{ title }} demo.js const path = require ( ...
**XTemplate 开源模板引擎详解** XTemplate 是一个基于 XML 的高效、易用的模板引擎,主要用于构建动态 Web 页面和应用程序。它允许开发者将数据和视图逻辑分离,通过简单的 XML 结构定义模板,然后结合数据进行...
XTemplate是PHP的模板引擎,允许您将HTML代码分别存储到PHP代码中。 它具有许多有用的功能,但代码简短且经过高度优化。 代码存储在此处,其他内容则在http://www.phpxtemplate.org/上
think-view-xtemplate 使用nunjucks渲染ThinkJS 3.x的视图文件 安装 npm install think-view-xtemplate 如何使用 const xtpl = require ( 'think-view-xtpl' ) ; exports . view = { type : 'xtpl' , xtpl : { ...