`
hnhnhnhnhn
  • 浏览: 77141 次
社区版块
存档分类
最新评论

ExtJS4学习笔记八－－Template的使用

ExtJS4 
阅读更多
1、append方法 
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 &gt; 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学习笔记七－－事件绑定相关
评论
发表评论

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

相关推荐

    Extjs4.0学习笔记

    Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式，就是...ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(十)---ExtJS4图片验证码的实现 ExtJS4学习笔记(十一)---TabPanel ExtJS4学习笔记(十三)---上传文件(upload) ExtJS4学习笔记...

    extJs 2.1学习笔记

    目录 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

    ExtJS笔记----FormPanel的使用

    NULL 博文链接：https://lucky16.iteye.com/blog/1490278

    Extjs 6.2 最新sdk ext-6.2.0-gpl.zip

    官方最新版本Extjs6.2版本sdk,创建新项目的时候需要用, 全面的核心框架，具有最新的Javascript标准支持 新的漂亮组件和主题，以创建漂亮的企业应用程序 现代工具链，用于构建优化，高性能，通用的应用程序 用于可视...

    Extjs6.2 生成的admin-dashboard官方模板

    Extjs6.2 生成的admin-dashboard官方模板

    ExtJS笔记---Grid实现后台分页

    这篇“ExtJS笔记——Grid实现后台分页”探讨了如何在ExtJS的Grid组件中实现高效的后台分页功能。 后台分页是一种常见的数据处理策略，特别是在大数据量的情况下，它将数据分批加载，避免一次性加载所有记录导致的...

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具，它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    语言程序设计资料：ExtJs学习笔记-2积分.doc

    语言程序设计资料：ExtJs学习笔记-2积分.doc

    extjs4 学习笔记源码

    exjts4 学习笔记源码，源码包含windws，hbox,vbox和Grid的应用，其中grid介绍比较多。下载解压后，部署后就可以使用，所有代码均在demo文件夹下。更多extjs4教程，请关注http://www.mhzg.net

    extjs2----关于extjs 的使用，操作

    在标题"extjs2----关于extjs 的使用，操作"中，我们可以看出这是一份关于ExtJS 2.0版本的使用指南，主要涵盖了其基本操作和应用。描述中提到内容较为初级，适合初学者学习，这表明我们将探讨的是ExtJS的基础概念和...

    extjs-theme-bootstrap-master.zip

    "extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包，它集成了Bootstrap的样式，使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前，让我们先了解一下基础概念： 1. **ExtJS*...

    extjs-OA extjs-oa

    一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa

    ExtJS4学习笔记十一 树控件的使用

    在本篇《ExtJS4学习笔记十一：树控件的使用》中，我们将深入探讨ExtJS框架中的树形控件（TreePanel），这是一种强大的UI组件，用于展示层次结构的数据。ExtJS4对树控件的功能进行了增强，使其更加灵活且易于使用。...

    extjs4.0帮助文档 extjs-docs-4.0.2.zip

    extjs4.0开发人员以及学习可以下载参考

    Extjs4.0学习笔记大全.pdf

    Extjs4.0学习笔记大全.pdf，供大家学习

    ExtJS学习笔记.doc

    ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc

    extJs例子-------

    ext基本的控件例子ext基本的控件例子ext基本的控件例子ext基本的控件例子

Magicbox
Global site tag (gtag.js) - Google Analytics