- 浏览: 3560881 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (1491)
- Hibernate (28)
- spring (37)
- struts2 (19)
- jsp (12)
- servlet (2)
- mysql (24)
- tomcat (3)
- weblogic (1)
- ajax (36)
- jquery (47)
- html (43)
- JS (32)
- ibatis (0)
- DWR (3)
- EXTJS (43)
- Linux (15)
- Maven (3)
- python (8)
- 其他 (8)
- JAVASE (6)
- java javase string (0)
- JAVA 语法 (3)
- juddiv3 (15)
- Mule (1)
- jquery easyui (2)
- mule esb (1)
- java (644)
- log4j (4)
- weka (12)
- android (257)
- web services (4)
- PHP (1)
- 算法 (18)
- 数据结构 算法 (7)
- 数据挖掘 (4)
- 期刊 (6)
- 面试 (5)
- C++ (1)
- 论文 (10)
- 工作 (1)
- 数据结构 (6)
- JAVA配置 (1)
- JAVA垃圾回收 (2)
- SVM (13)
- web st (1)
- jvm (7)
- weka libsvm (1)
- weka屈伟 (1)
- job (2)
- 排序 算法 面试 (3)
- spss (2)
- 搜索引擎 (6)
- java 爬虫 (6)
- 分布式 (1)
- data ming (1)
- eclipse (6)
- 正则表达式 (1)
- 分词器 (2)
- 张孝祥 (1)
- solr (3)
- nutch (1)
- 爬虫 (4)
- lucene (3)
- 狗日的腾讯 (1)
- 我的收藏网址 (13)
- 网络 (1)
- java 数据结构 (22)
- ACM (7)
- jboss (0)
- 大纸 (10)
- maven2 (0)
- elipse (0)
- SVN使用 (2)
- office (1)
- .net (14)
- extjs4 (2)
- zhaopin (0)
- C (2)
- spring mvc (5)
- JPA (9)
- iphone (3)
- css (3)
- 前端框架 (2)
- jui (1)
- dwz (1)
- joomla (1)
- im (1)
- web (2)
- 1 (0)
- 移动UI (1)
- java (1)
- jsoup (1)
- 管理模板 (2)
- javajava (1)
- kali (7)
- 单片机 (1)
- 嵌入式 (1)
- mybatis (2)
- layui (7)
- asp (12)
- asp.net (1)
- sql (1)
- c# (4)
- andorid (1)
- 地价 (1)
- yihuo (1)
- oracle (1)
最新评论
-
endual:
https://blog.csdn.net/chenxbxh2 ...
IE6 bug -
ice86rain:
你好,ES跑起来了吗?我的在tomcat启动时卡在这里Hibe ...
ES架构技术介绍 -
TopLongMan:
...
java public ,protect,friendly,private的方法权限(转) -
贝塔ZQ:
java实现操作word中的表格内容,用插件实现的话,可以试试 ...
java 读取 doc poi读取word中的表格(转) -
ysj570440569:
Maven多模块spring + springMVC + JP ...
Spring+SpringMVC+JPA
1、append方法
2、overwrite方法:
3、模板中使用格式化函数:
4、使用自定义格式化函数解析多层json对象
5、使用tpl标签和for运算符
6、使用parent在子模板中访问父对象
7、数组索引与简单数学运算
8、自动渲染简单数组
9、基本的条件逻辑判断
10、在模板中执行任意代码
11、使用模板成员函数
12、在Extjs组件中使用模板
13、Ext.view.View示例
- var tpl = new Ext.Template(//定义模板
- '<table border=1 cellpadding=0 cellspacing = 0>',
- '<tr><td width=90>姓名</td><td width=90>{0}</td></tr>',
- '<tr><td>年龄</td><td>{1}</td></tr>',
- '<tr><td>性别</td><td>{2}</td></tr>',
- '</table>'
- )
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.append('tpl-table',['小王',25,'男']);
2、overwrite方法:
- var tpl = new Ext.Template(//定义模板
- '<table border=1 cellpadding=0 cellspacing = 0>',
- '<tr><td width=90>姓名</td><td width=90>{name}</td></tr>',
- '<tr><td>年龄</td><td>{age}</td></tr>',
- '<tr><td>性别</td><td>{sex}</td></tr>',
- '</table>'
- )
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.overwrite('tpl-table',{name:'小王',age:25,sex:'男'});
3、模板中使用格式化函数:
- //定义模板,并指定模板数据的格式化函数
- var tpl = new Ext.Template([
- '<table border=1 cellpadding=0 cellspacing = 0>',
- '<tr><td width=90>员工姓名</td>',
- //{userName:capitalize}使用标准字符串格式化函数,字符串首字母大写
- '<td width=120>{userName:capitalize}</td></tr>',
- '<tr><td width=90>工作日期</td>',
- //{WorkDate:this.cusFormat()}使用自定义格式化函数
- '<td width=120>{WorkDate:this.cusFormat()}</td></tr>',
- '</table>'
- ]);
- //定义模板数据
- var tplData = {
- userName : 'tom',
- WorkDate : new Date(2002,7,1)
- }
- //模板的自定义格式化函数
- tpl.cusFormat = function(date,o){
- return Ext.Date.format(date,'Y年m月d');
- }
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.append('tpl-table',tplData);
4、使用自定义格式化函数解析多层json对象
- //定义模板,并指定模板数据的格式化函数
- var tpl = new Ext.Template(
- '<table border=1 cellpadding=0 cellspacing = 0>',
- '<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>'
- );
- //定义模板数据
- var tplData = {
- name : 'tom',
- age : 24,
- stature : {
- num : 170,
- unit : 'cm'
- }
- }
- //通过自定义格式化函数解析json对象
- tpl.parseJson = function(json){
- return json.num + json.unit;
- }
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.append('tpl-table',tplData);
5、使用tpl标签和for运算符
- //定义模板,使用tpl标签和for运算符
- var tpl = new Ext.XTemplate(
- '<table border=1 cellpadding=0 cellspacing = 0>',
- '<tr><td width=90 >姓名</td><td width=90 >年龄</td></tr>',
- '<tpl for=".">',
- '<tr><td>{name}</td><td>{age}</td></tr>',
- '</tpl>',
- '</table>'
- );
- //定义模板数据
- var tplData = [
- {name:'张三',age:20},
- {name:'李四',age:25},
- {name:'王五',age:27},
- {name:'赵六',age:26}
- ]
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.append('tpl-table',tplData);
6、使用parent在子模板中访问父对象
- //定义模板,使用parent在子模板中访问父对象
- var tpl = new Ext.XTemplate(
- '<table border=1 cellpadding=0 cellspacing = 0>',
- '<tr><td width=90 >姓名</td><td width=90 >年龄</td><td width=90 >公司</td></tr>',
- '<tpl for="emps">',
- '<tr><td>{name}</td><td>{age}</td><td>{parent.companyName}</td></tr>',
- '</tpl>',
- '</table>'
- );
- //定义模板数据
- var tplData = {
- companyName : 'ACB公司',
- emps:[
- {name:'张三',age:20},
- {name:'李四',age:25},
- {name:'王五',age:27},
- {name:'赵六',age:26}
- ]
- }
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.append('tpl-table',tplData);
7、数组索引与简单数学运算
- //定义模板,数组索引与简单数学运算
- var tpl = new Ext.XTemplate(
- '<table border=1 cellpadding=0 cellspacing = 0>',
- '<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 tplData = [
- {name : '张三',wage : 1000},
- {name : '李四',wage : 1200},
- {name : '王五',wage : 900},
- {name : '赵六',wage : 1500}
- ]
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.append('tpl-table',tplData);
8、自动渲染简单数组
- //定义模板,自动渲染简单数组
- var tpl = new Ext.XTemplate(
- '<table border=1 cellpadding=0 cellspacing = 0>',
- '<tr><td>序号</td><td width=90 >姓名</td></tr>',
- '<tpl for=".">',
- '<tr><td>{#}</td><td>{.}</td></tr>',
- '</tpl>',
- '</table>'
- );
- //定义模板数据
- var tplData = ['张三','李四','王五','赵六']
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.append('tpl-table',tplData);
9、基本的条件逻辑判断
- //定义模板,基本的条件逻辑判断
- var tpl = new Ext.XTemplate(
- '<table border=1 cellpadding=0 cellspacing = 0>',
- '<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}</td></tr>',
- '</tpl>',
- '</tpl>',
- '</table>'
- );
- //定义模板数据
- var tplData = [
- {name : '张三',wage : 1000},
- {name : '李四',wage : 1200},
- {name : '王五',wage : 900},
- {name : '赵六',wage : 1500}
- ]
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.append('tpl-table',tplData);
10、在模板中执行任意代码
- <style type="text/css">
- .even { background-color: #CCFFFF; }
- .odd { background-color: #FFFFFF; }
- .title {text-align: center;}
- </style>
- //定义模板,在模板中执行任意代码
- var tpl = new Ext.XTemplate(
- '<table border=1 cellpadding=0 cellspacing = 0 class=title>',
- '<tr><td>序号</td><td width=90 >姓名</td><td width=90 >工资</td><td width=90 >奖金</td></tr>',
- '<tpl for="emps">',
- '<tr class="{[xindex % 2 == 0 ? "even" : "odd"]}">',
- '<td>{[xindex]}</td><td>{[values.name]}</td>',
- '<td>{[values.wage * parent.per]}</td>',
- '<td>{[Math.round(values.wage * parent.per / xcount)]}</td></tr>',
- '</tpl>',
- '<tr><td>发薪时间</td><td colspan=3>{[fm.date(new Date,"Y年m月d日")]}</td></tr>',
- '<tr><td>工资总计</td><td colspan=3>{[this.avgWage(values)]}</td></tr>',
- '</table>'
- );
- //模板的自定义格式化函数,用于计算工资总计
- tpl.avgWage = function (o) {
- var sum = 0;
- var length = o.emps.length;
- for(var i = 0 ; i <length ; i++){
- sum += o.emps[i].wage;
- }
- return sum * o.per;
- }
- //定义模板数据,per表示发薪比例,wage表示标准工资
- var tplData = {
- per : 0.9,
- emps : [
- {name : '张三',wage : 1000},
- {name : '李四',wage : 1200},
- {name : '王五',wage : 900},
- {name : '赵六',wage : 1500}
- ]
- }
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.append('tpl-table',tplData);
11、使用模板成员函数
- //定义模板,在模板中使用模板成员函数
- var tpl = new Ext.XTemplate(
- '<table border=1 cellpadding=0 cellspacing = 0 class=title>',
- '<tr><td width=90 >姓名</td><td width=90 >工资</td></tr>',
- '<tpl for=".">',
- '<tpl if="this.check(wage)">',
- '<tr><td>{name}</td>',
- '<td>{[this.format(values.wage)]}</td>',
- '</tpl></tpl>',
- '</table>',
- {
- //定义模板成员函数
- check : function(wage) {
- if(wage > 1000){
- return true;
- }else {
- return false
- }
- },
- //定义模板成员函数
- format : function(wage) {
- if(wage > 1300){
- return '<font color=red>'+wage+'</font>';
- }else {
- return '<font color=blue>'+wage+'</font>';
- }
- }
- }
- );
- //定义模板数据,per表示发薪比例,wage表示标准工资
- var tplData = [
- {name : '张三',wage : 1000},
- {name : '李四',wage : 1200},
- {name : '王五',wage : 900},
- {name : '赵六',wage : 1500}
- ]
- //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
- tpl.append('tpl-table',tplData);
12、在Extjs组件中使用模板
- <style type="text/css">
- .even { background-color: #CCFFFF; }
- .odd { background-color: #FFFFFF; }
- </style>
- //定义组合框模板
- var itemTpl = new Ext.XTemplate(
- '<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">',
- '{#} :{[this.check(values)]}</div>',
- {
- check : function (values) {
- if(values.value > 2 ){
- return "<font color=red>"+values.item+"</font>";
- }else {
- return "<font color=blue>"+values.item+"</font>";
- }
- }
- }
- );
- //创建数据模型
- Ext.regModel('ItemInfo', {
- fields: ['item','value']
- });
- new Ext.form.Panel({
- title:'在Extjs组件中使用模板',
- renderTo: Ext.getBody(),
- bodyPadding: 5,
- height : 100,
- frame : true,
- width : 350,
- items : [{
- xtype : 'combo',
- fieldLabel:'邮政编码',
- displayField:'item',
- valueField:'value',
- labelSeparator :':',//分隔符
- listConfig : {
- itemTpl : itemTpl
- },
- editable : false,
- queryMode: 'local',
- triggerAction: 'all',
- store : new Ext.data.Store({
- model : 'ItemInfo',
- fields: ['item','value'],
- data : [{item:'条目1',value:1},
- {item:'条目2',value:2},
- {item:'条目3',value:3},
- {item:'条目4',value:4},
- {item:'条目5',value:5},
- {item:'条目6',value:6}]
- })
- }]
- });
13、Ext.view.View示例
- var inputForm = Ext.create('Ext.form.Panel',{
- bodyPadding: 5,
- width : 490,
- flex : 2,
- fieldDefaults:{//统一设置表单字段默认属性
- labelSeparator :':',//分隔符
- labelWidth : 60,//标签宽度
- width : 150,//字段宽度
- msgTarget : 'side',
- allowBlank : false,
- labelAlign : 'right'
- },
- layout: {//设置容器字段布局
- type: 'hbox',
- align: 'middle'//垂直居中
- },
- defaultType: 'textfield',//设置表单字段的默认类型
- items:[{
- fieldLabel:'产品名称',
- name : 'productName'
- },{
- fieldLabel:'数量',
- xtype : 'numberfield',
- name : 'productNum'
- },{
- fieldLabel:'金额',
- xtype : 'numberfield',
- name : 'productPrice'
- }],
- fbar : [{
- text : '添加',
- handler : function(){
- if(inputForm.getForm().isValid()){
- var data = inputForm.getForm().getValues();
- var product = Ext.ModelMgr.create(data, 'ProductInfo');
- productStore.add(product);
- inputForm.getForm().reset();
- }
- }
- }]
- });
- //创建数据模型
- Ext.regModel('ProductInfo', {
- fields: ['productName','productNum','productPrice']
- });
- //创建产品数据源
- var productStore = Ext.create('Ext.data.Store',{
- autoLoad : true,
- data : [],
- model : 'ProductInfo',
- proxy: {
- type: 'memory',
- reader: {
- type: 'json',
- root: 'datas'
- }
- }
- });
- //定义模板
- var productTpl = new Ext.XTemplate(
- '<table border=1 cellspacing=0 cellpadding=0 width=100%>',
- '<tr><td width=160>产品名称</td><td width=75>数量</td><td width=75>金额</td></tr>',
- '<tpl for=".">',
- '<tr><td>{productName}</td><td>{productNum}</td><td>{productPrice}</td></tr>',
- '</tpl>',
- '</table>'
- );
- //产品数据视图
- var productView = Ext.create('Ext.view.View',{
- store: productStore,
- tpl: productTpl,
- deferEmptyText : false,
- itemSelector:'div.thumb-wrap',
- emptyText: '请录入商品'
- });
- //产品面板
- var productViewPanel = Ext.create('Ext.panel.Panel',{
- autoScroll:true,
- width : 490,
- flex : 3,
- layout : 'fit',
- bodyStyle:'background-color:#FFFFFF',
- items: productView
- });
- Ext.create('Ext.panel.Panel',{
- renderTo: document.body,
- frame:true,
- width : 500,
- height: 200,
- layout:'vbox',
- title:'产品录入',
- items: [inputForm, productViewPanel]
- });
发表评论
-
extjs4 ajax 同步设置
2012-08-31 13:42 1963// 把新的数据发送到服务端去,保存 E ... -
extjs4 bug查询
2012-08-25 15:57 5049Bug Fixes Fix tabs mouseo ... -
ASP.NET+ExtJs4.0+表单提交submit,上传图片到服务器(转)
2012-08-22 12:44 2724ASP.NET+ExtJs4.0+表单提交submi ... -
EXTJS 4 form population with JSON read
2012-08-22 12:31 1855EXTJS 4 form population wi ... -
ExtJS Tree same parentNode
2012-08-19 17:22 1621ExtJS Tree same parentNode ... -
extjs4 一个很专业demo的博客
2012-08-19 16:57 1948http://extjstutorial.info/extjs ... -
ExtJs 4 – XTemplates
2012-08-18 20:34 1637Home › post › ExtJs 4 – XTe ... -
extjs4 tree操作
2012-08-18 20:25 5194Extjs tree 如何获得选中的节点 ... -
extjs4 打开pdf文件
2012-08-18 20:09 5884buttons: [{ text :'OPE ... -
cannot read property 'flex' of undefined
2012-08-18 13:45 7164Extjs的一个错误,谷歌浏览器捕获到的, 后来查了下原因, ... -
extjs4 初始化的一个方法
2012-08-17 21:03 1745initComponent : function() { ... -
extjs4 tree2
2012-08-16 15:26 1371http://blog.csdn.net/clskkk2222 ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2012-08-16 13:36 1612Ext中的get、getDom、getCmp、g ... -
extjs4 学习博客
2012-08-12 16:03 1443http://blog.csdn.net/zhaoqilian ... -
extjs4 上传文件
2012-08-11 23:23 1608http://blog.sina.com.cn/s/blog_ ... -
extjs4 struts2 grid 新增、删除、修改
2012-08-11 20:22 2083http://blog.csdn.net/dys1990/ar ... -
extjs4做的grid,带分页,搜索 (转)
2012-08-11 14:32 2238【原创】extjs4做的grid,带分页,搜索 最 ... -
extjs4 tree
2012-08-11 09:27 1977How To Use ExtJS 4 TreePan ... -
ExtJs xtype
2012-08-10 21:45 1674ExtJs xtype一览 (2012-06-2 ... -
ExtJS常用的正则表达式验证
2012-08-05 15:59 1337http://huyubisheng.iteye.co ...
相关推荐
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是...ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记...
目录 1. ExtJs 结构树 2 2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 ...28. extJs 2.0学习笔记(ext.js篇) 77
NULL 博文链接:https://lucky16.iteye.com/blog/1490278
在标题"extjs2----关于extjs 的使用,操作"中,我们可以看出这是一份关于ExtJS 2.0版本的使用指南,主要涵盖了其基本操作和应用。描述中提到内容较为初级,适合初学者学习,这表明我们将探讨的是ExtJS的基础概念和...
这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略,特别是在大数据量的情况下,它将数据分批加载,避免一次性加载所有记录导致的...
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
Extjs6.2 生成的admin-dashboard官方模板
语言程序设计资料:ExtJs学习笔记-2积分.doc
exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net
在本篇《ExtJS4学习笔记十一:树控件的使用》中,我们将深入探讨ExtJS框架中的树形控件(TreePanel),这是一种强大的UI组件,用于展示层次结构的数据。ExtJS4对树控件的功能进行了增强,使其更加灵活且易于使用。...
官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架,具有最新的Javascript标准支持 新的漂亮组件和主题,以创建漂亮的企业应用程序 现代工具链,用于构建优化,高性能,通用的应用程序 用于可视...
标题“ExtJS Oracle分页---Json转换”涉及的是在Web应用程序开发中,使用ExtJS框架与Oracle数据库进行分页数据交互,并通过Json格式进行数据转换的技术。以下是对这个主题的详细解释: ExtJS是一个强大的JavaScript...
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
"extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包,它集成了Bootstrap的样式,使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前,让我们先了解一下基础概念: 1. **ExtJS*...
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
Extjs4.0学习笔记大全.pdf,供大家学习
extjs4.0开发人员以及学习可以下载参考