Extjs Template 두 가지 예제

3816 단어 template
오늘 Extjs Template로 두 가지 예를 들었습니다.
 
코드는 다음과 같습니다.
 
 
 
<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Button</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.7-commercial/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js"></script>
</head>
<body>
<div id="template1"></div>
<div id="template2"></div>
<script type="text/javascript">
	<!--
		var data = {
			name: 'Tommy Maintz',
			title: 'Lead Developer',
			company: 'Sencha Inc.',
			email: '[email protected]',
			address: '5 Cups Drive',
			city: 'Palo Alto',
			state: 'CA',
			zip: '44102',
			drinks: ['Coffee', 'Soda', 'Water'],
			kids: [{
				name: 'Joshua',
				age:3
			},
			{
				name: 'Matthew',
				age:2
			},
			{
				name: 'Solomon',
				age:0
			}]
		};
		var tpl = new Ext.XTemplate(
			'<p>Kids: ',
			'<tpl for=".">',
			'<p>{#}. {name}</p>',
			'</tpl></p>'
		);
		tpl.overwrite("template1", data.kids);
		var tpl = new Ext.XTemplate(
			'<p>Name: {name}</p>',
			'<p>Title: {title}</p>',
			'<p>Company: {company}</p>',
			'<p>Kids: ',
			'<tpl for="kids">',
			'<p>{name}</p>',
			'</tpl></p>'
		);
		tpl.overwrite("template2", data);
	//-->

</script>

</body>
</html>

 
 
 
 
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Button</title>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.7-commercial/resources/css/ext-all.css"/>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.7-commercial/ext-all-debug.js"></script>
</head>
<body>
<div id="template1"></div>
<div id="template2"></div>
<script type="text/javascript">
	<!--
		var container = Ext.create('Ext.Container', {
			renderTo: Ext.getBody(),
			items   : [{
				xtype: 'button',
				text : 'My Button'
			}]
		});
		var t = new Ext.Template("<div>Hello {0}.</div>");
		t.append(container.getEl(), ['foo']);

		var t = new Ext.Template([
			'<div name="{id}">',
			'<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>',
			'</div>',
		]);
		t.compile();
		t.append('template2', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
	//-->
</script>
</body>
</html>
 

좋은 웹페이지 즐겨찾기