模板XTemplate实例

/**
 * 根据输入的小说目录页的URL下载一本小说
 */
Ext.onReady(function() {

			var Novel = Ext.data.Record.create([ {
				name:'imgUrl',mapping : 'NImgUrl'
			}, {
				name:'title',mapping : 'NTitle'
			}, {
				name:'author',mapping : 'NAuthor'
			}, {
				name:'type',mapping : 'NType'
			}, {
				name:'totalWords',mapping : 'NTotalWords'
			}, {
				name:'desc',mapping : 'NDesc'
			}]);

			/**
			 * 数据源
			 */
			var dataSource = new Ext.data.Store( {

				proxy : new Ext.data.HttpProxy( {
					url : 'http://localhost:8080/DXCollector/manager/novel/novelAnalysis.jsp?partListUrl=http://www.readnovel.com/partlist/69764/'
				}),
				reader : new Ext.data.JsonReader( {
					id : 'id',
					root : 'novelInfo'
				}, Novel)
			});

			/**
			 * 显示模板
			 */
			var resultTpl = new Ext.XTemplate('<tpl for=".">',
					'<div  class="viewTable"><table width="100%" height="100%" border="1">', '<tr>',
					'<td rowspan="3"><img src="{imgUrl}"></td>',
					'<td>书名：</td>', '<td>{title}</td>', '<td>作者：</td>',
					'<td>{author}</td>', '</tr>', '<tr>', '<td>总字数：</td>',
					'<td>{totalWords}</td>', '<td>类型：</td>',
					'<td>{type}</td>', '</tr>', '<tr>',
					'<td colspan="3" rowspan="2"><strong>书籍简介</strong>：</td>',
					'<td>{desc}</td>', '</tr>', '</table></div>', '</tpl>');

			// 下载按钮
			var downloadButton = new Ext.Button( {
				text : '下载',
				handler : download,
				iconCls : 'download'
			});

			var mainPanel = new Ext.Panel( {
				title : '单本下载',
				autoScroll : true,

				items : new Ext.DataView( {
					tpl : resultTpl,
					store : dataSource,
					itemSelector:'div.viewTable',
					loadingText:'正在分析中...'
				}),

				tbar : ['请输入小说目录页URL: ', ' ', new Ext.ux.form.SearchField( {
					store : dataSource,
					width : 320
				}), '', downloadButton]
			});

			function download() {
				Ext.Msg.alert('提示', '下载');
			}
			Ext.main.addItems([mainPanel]);
			dataSource.load({params:{}});
		});

注意事项：
使用 ”<tpl>” 标签和 ”for” 操作符，你可以把作用域切换到 ”for” 所指向的对象，然后访问这个对象的成员来组装模板。如果 ”for” 循环中的变量是一个数组，它将被自动填充，对于数组中的每个元素，重复 ”<tpl>” 标签中的模板 ( 定义 ) 块 ( 来自动填充 ) 。（译者注：这句的意思是，如果 for 循环里面指定的对象是个数组，就会自动解析这个数组，然后使用数组中的每个元素来填充模板。）

评论

1 楼 sihai0068 2010-09-16  

非常感谢 这功能貌似不常用 var resultTpl = new Ext.XTemplate('<tpl ></tpl>'不加貌似改不了样式