Extjs-实用工具 Ext.Template()

最新推荐文章于 2019-04-10 21:58:58 发布

原创最新推荐文章于 2019-04-10 21:58:58 发布 · 4.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#工具 #function #stylesheet #html #table #border

Extjs 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了Ext JS中的模板使用方法，包括基础模板、复杂模板XTemplate、输出后台数据、创建下拉框及判断功能应用。

1.Ext.Template()

模版中的数据索引是从0开始的,创建新模版之后必须调用compile()函数进行编译

效果图

代码

<%@ page language="java"  pageEncoding="UTF-8"%>
<%	String rootpath = request.getContextPath();%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/>
	<script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script>
	<script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script>
	<style type="text/css">
		.red {
		    background: red;
		}
    </style>
	<script type="text/javascript" defer>
		Ext.onReady(function (){
			var data = [
				['1','male','李文超','李文超描述'],
				['2','female','蛋蛋','蛋蛋描述'],
				['3','male','道士','道士描述'],
				['4','female','懒蛋','懒蛋描述'],
				['5','male','吖男','吖男描述']
			];
			//我们还可以使用Ext.util.Format中预定义的格式化函数对原始数据进行格式化,比如trim
			var t = new Ext.Template(
				'<tr>',
					'<td>{0}</td>',
					'<td>{1:this.renderSex}</td>',
					'<td>{2:trim}</td>',//去掉字符串的首位空白
					'<td>{3:ellipsis(4)}</td>',//字符串超过指定长度会自动截取
				'</tr>'
			);
			//一定要放在t.compile()上面
			t.renderSex = function(value) {
		        if (value == 'male') {
		            return "<span style='color:red;'>红男</span>";
		        } else {
		            return "<span style='color:green;'>绿女</span>";
		        }
		    };
			//创建新模版后调用它来编译,现在可以通过这个生成我们需要的HTML的内容了
			t.compile();
			for(var i = 0;i<data.length;i++){
				/*
					第一个参数对应HTML中的一个表格,我们使用Ext提供的模版将JSON数据的每一行都转换为HTML,
					并添加到指定的table标签中,最终的显示结果包含5行数据的表格
				*/
				t.append(Ext.get('some-element'),data[i]);
			}
			
		});
    </script>
   </head>
   <body>
       <table border="1" id="some-element">
	       <tr>
	           <td>id</td>
	           <td>sex</td>
	           <td>name</td>
	           <td>descn</td>
	       </tr>
       </table>
    </body>
</html>

2.复杂模版Ext.XTemplate

XTemplate是对Template的增强,XTemplate不仅支持在模版内部使用子模板,
还具有for和if功能,可以让我们的模版实现循环和判断

XTemplate的内部
变量名	说明
values	当前范围内部的变量,每次使用使用时tpl都会进入一个子模板,只能使用子模板对应变量
parent	如果进入子模板,就需要通过parent引用上一级模版里的变量
xindex	循环索引值,从1开始
xcount	循环的总长度
fm		Ext.util.Format,想执行格式化操作,就直接引用它

2.1XTemplate输出后台传来的JSON对象
效果图

JSON对象

{student:[{id:'1',code:'1001',name:'',sex:'1',age:'23'}]}

代码

detailStore = new Ext.data.Store({
	url: 'list.jsp?flag=beforeUpdate',
	method : 'post',
	reader : new Ext.data.JsonReader({
		root: 'student',
       		fields: [
			{name : 'id'},
			{name : 'code'},
			{name : 'name'},
			{name : 'sex'},
			{name : 'age'}
		]
	})	
});   
var xtpl = new Ext.XTemplate(
    '<tpl for=".">',
    	'<table width="284" align="center" cellpadding="0" cellspacing="0" style="font-size:12px;" bgcolor="#C7D4E4">',
			'<tr height="30" align="center">',  
                   '<td style="border:1px solid #000000;">编号</td>',
                   '<td style="border:1px solid #000000;">&nbsp;{id}</td>',
               '</tr>',
               '<tr height="30" align="center">',  
                   '<td style="border:1px solid #000000;">学号</td>',
                   '<td style="border:1px solid #000000;">&nbsp;{code}</td>',
               '</tr>',
               '<tr height="30" align="center">',  
                   '<td style="border:1px solid #000000;">名字</td>',
                   '<td style="border:1px solid #000000;">&nbsp;{name}</td>',
               '</tr>',
               '<tr height="30" align="center">',  
                   '<td style="border:1px solid #000000;">性别</td>',
                   '<td style="border:1px solid #000000;">&nbsp;{sex}</td>',
               '</tr>',
               '<tr height="30" align="center">',  
                   '<td style="border:1px solid #000000;">年龄</td>',
                   '<td style="border:1px solid #000000;">&nbsp;{age}</td>',
               '</tr>',
		'</table>',
	'</tpl>'
  	);
//详细信息面板
var detailPanel =  new Ext.Panel({
	/*
		能够为自己设计模板和特定格式而提供的一种数据显示机制.
		DataView采用Ext.XTemplate为其模板处理的机制,
		并依靠Ext.data.Store来绑定数据,
		这样的话store中数据发生变化时便会自动更新前台.
	*/
	items : new Ext.DataView({
          store : detailStore,
          //构成这个DataView的HTML片断,或片断的数组
          tpl : xtpl,
       //True表示为允许同时可以选取多个对象项,false表示只能同时选择单个对象项或根本没有选区
       multiSelect: true,
       /*
       		此项是必须的设置
       		任何符号Ext.DomQuery格式的CSS选择符(如div.some-class or span:first-child)
       		以确定DataView所使用的节点是哪一种元素
       */
       itemSelector:'div.thumb-wrap',
       //没有数据显示时，向用户提示的信息
       emptyText: ''
      })
});
//详细信息窗体
detailWindow = new Ext.Window({
      		id : 'detailMessageWindow',
      		title : '学生信息详细',
	width:300,  
             height:184,
             closeAction:'hide',
             layout : 'fit',
	items : [detailPanel]
     	});

//详细信息
var detailRenderer = function(recordId){
	return '<input  type="button" value="...." onclick="detailMessage('+recordId+')"/>';
};
//打开详细信息窗口
function detailMessage(recordId){
	detailStore.load({
		params:{id : recordId}
	});
  	detailWindow.show();
};

2.1XTemplate输出一个下拉框

效果图

代码一:

<script type="text/javascript" defer>
	Ext.onReady(function (){
		var data = {
			//data中包含两部分内容:主体部分name和size,以及options数组
			name : 's',
			size : 5,
			options : [{
				text : '陕西省',
				value : '陕西'
			},{
				text : '西安市',
				value : '西安'
			},{
				text : '碑林区',
				value : '长安立交'
			}]
		};
		var xtpl = new Ext.XTemplate(
			'<select name = "{name}" size = "{5}">',
				/*
					使用tpl标签定义一个子模板,for="options"表示我们要对原始数据中的options属性进行循环操作,
					这样子模板会自动调用options的数据,循环输出为<option>标签
				*/
				'<tpl for="options">',
					'<option value="{value}">{text}</option>',
				'</tpl>',
			'</select>'
		);
		xtpl.append(Ext.getBody(),data);
	});
</script>

代码二:

<script type="text/javascript" defer>
	Ext.onReady(function (){
		var data = {
			name : 's',
			size : 5,
			options : ['陕西省','西安市','长安立交']
		};
		var xtpl = new Ext.XTemplate(
			'<select name = "{name}" size = "{5}">',
				'<tpl for="options">',
					//如果data.options中包含3个简单数组,子模板tpl可以使用{.}表示数组的每一项
					'<option value="{.}">{.}</option>',
				'</tpl>',
			'</select>'
		);
		xtpl.append(Ext.getBody(),data);
	});
</script>

2.2默认选奇数行

<script type="text/javascript" defer>
	Ext.onReady(function (){
		var data = {
			name : 's',
			size : 5,
			options : ['陕西省','西安市','长安立交']
		};
		var xtpl = new Ext.XTemplate(
			'<select name = "{name}" size = "{5}">',
				'<tpl for="options">',
					/*
						XTemplate()没有提供else功能,我们只好用if来判断
						这里使用xindex是for内置的一个变量,它表示循环项的索引值
						xindex是从1开始的
					*/
					'<tpl if="xindex%2==0">',
						'<option value="{.}">{.}</option>',
					'</tpl>',
					'<tpl if="xindex%2==1">',
						'<option value="{.}" selected>{.}</option>',
					'</tpl>',
				'</tpl>',
			'</select>'
		);
		xtpl.append(Ext.getBody(),data);
	});
</script>

2.3简化判断

<script type="text/javascript" defer>
	Ext.onReady(function (){
		var data = {
			name : 's',
			size : 5,
			options : ['陕西省','西安市','长安立交']
		};
		var xtpl = new Ext.XTemplate(
			'<select name = "{name}" size = "{5}">',
				'<tpl for="options">',
					//因为这个xidex不是外部提供的数据,所以要在{}上加上[],在XTemplate中调用内部变量都要这样用
					'<option value="{.}" {[xindex%2==1?"selected":""]}>{.}</option>',
				'</tpl>',
			'</select>'
		);
		xtpl.append(Ext.getBody(),data);
	});
</script>