JavaScript DHTML/Ext JS/Template
Содержание
- 1 Compile template
- 2 Declare template with field marker
- 3 Define template and pass in data
- 4 Define template data in an array
- 5 Define your panel to hold the template
- 6 Pass data to template
- 7 Reference user data and apply to template
- 8 Update template data
- 9 Use Ext.Template to display table detail
- 10 Use if statement in template
- 11 Use tpl markup to extract data
- 12 Write template to a Panel and link with data
Compile template
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myTpl = new Ext.Template("
" Name : {name}"
", " Age : {age}
", " DOB : {dob}
",
); myTpl.rupile(); var doTplAppend = function(obj) { myTpl.append(document.body, obj); } doTplAppend({ color : "red", name : "Name", age : 20, dob : "10/20/2009" });
}); </script>
</body> </html>
</source>
Declare template with field marker
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body>
<script type="text/javascript"> Ext.onReady(function() {
var data = { name: "A", company: "B", city: "D", state: "E" }; var p = new Ext.Panel({ title: "Title", width: 300, html: "html code here", tbar: [{ text: "Template", handler: function(){ var tpl = new Ext.Template( "Name: {name}", "Company: {company}", "Location: {city}, {state}" ); tpl.overwrite(p.body, data); p.body.highlight("#00ff00", {block:true}); } }], renderTo: Ext.getBody() });
}); </script>
</body> </html>
</source>
Define template and pass in data
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myTpl = new Ext.Template("myTpl.append(document.body, ["A"]);
}); </script>
</body> </html>
</source>
Define template data in an array
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body>
<script type="text/javascript"> Ext.onReady(function() {
var data = { name: "A", company: "B", city: "D", state: "E" }; var p = new Ext.Panel({ title: "Title", width: 300, html: "html code here", tbar: [{ text: "Template", handler: function(){ var tpl = new Ext.Template( "Name: {name}", "Company: {company}", "Location: {city}, {state}" ); tpl.overwrite(p.body, data); p.body.highlight("#00ff00", {block:true}); } }], renderTo: Ext.getBody() });
}); </script>
</body> </html>
</source>
Define your panel to hold the template
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
var userData = [ {ID:1,FIRSTNAME:"A",LASTNAME:"B",EMAIL:"a@b.ru",PASSWORD:"a",ADDRESSTYPE:"Home",STREET1:"Road",STREET2:"",STREET3:"",CITY:"New York",STATE:"NY",ZIP:"12345",PHONETYPE:"Cell",PHONE:"123-456-7890"}, {ID:2,FIRSTNAME:"B",LASTNAME:"C",EMAIL:"d@e.ru",PASSWORD:"a",ADDRESSTYPE:"Work",STREET1:"Lane",STREET2:"",STREET3:"",CITY:"Los Angeles",STATE:"CA",ZIP:"67890",PHONETYPE:"Home",PHONE:"456-789-0123"}, ]; var userDetail = new Contact.panels.ContactDetails({ applyTo: "my", title: "Example", data: userData[0] }); updateContact = function(event,el,data){ userDetail.update(data.data); } Ext.get("actionLink").on("click",updateContact,this,{data:userData[1]});
});
Ext.namespace("Contact.panels"); Contact.panels.ContactDetails = Ext.extend(Ext.Panel,{
width: 350, height: 250, data: { ID: 0, FIRSTNAME: "", LASTNAME: "", EMAIL: "", ADDRESSTYPE: "Home (mailing)", STREET1: "", STREET2: "", STREET3: "", CITY: "", STATE: "", ZIP: "", PHONETYPE: "Home", PHONE: "" }, tpl: new Ext.XTemplate([ "{FIRSTNAME} {LASTNAME}"
",
{EMAIL}, {PHONE} ({PHONETYPE})
","{ADDRESSTYPE} Address
", "<tpl if="STREET2.length > 0">", "{STREET2}
", "</tpl>", "<tpl if="STREET3.length > 0">", "{STREET3}
", "</tpl>", "{CITY}, {STATE} {ZIP}" ]), initComponent: function(){ Contact.panels.ContactDetails.superclass.initComponent.call(this); if (typeof this.tpl ==="string") { this.tpl = new Ext.XTemplate(this.tpl); } }, onRender: function(ct, position) { Contact.panels.ContactDetails.superclass.onRender.call(this, ct, position); if (this.data) { this.update(this.data); } }, update: function(data) { this.data = data; this.tpl.overwrite(this.body, this.data); }
}); </script> <body>
<a href="javascript:void(0)" id="actionLink">Update Data</a> </body> </html>
</source>
Pass data to template
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body> <script type="text/javascript"> Ext.onReady(function() {
var myTpl = new Ext.Template("
" Name : {name}"
", " Age : {age}
", " DOB : {dob}
",
); myTpl.rupile(); var doTplAppend = function(obj) { myTpl.append(document.body, obj); } doTplAppend({ color : "red", name : "Name", age : 20, dob : "10/20/2009" });
}); </script>
</body> </html>
</source>
Reference user data and apply to template
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
var userData = [ {ID:1,FIRSTNAME:"A",LASTNAME:"B",EMAIL:"a@b.ru",PASSWORD:"a",ADDRESSTYPE:"Home",STREET1:"Road",STREET2:"",STREET3:"",CITY:"New York",STATE:"NY",ZIP:"12345",PHONETYPE:"Cell",PHONE:"123-456-7890"}, {ID:2,FIRSTNAME:"B",LASTNAME:"C",EMAIL:"b@c.ru",PASSWORD:"b",ADDRESSTYPE:"Work",STREET1:"Lane",STREET2:"",STREET3:"",CITY:"Los Angeles",STATE:"CA",ZIP:"67890",PHONETYPE:"Home",PHONE:"456-789-0123"}, ]; var userDetail = new Ext.Panel({ applyTo: "my", width: 350, height: 250, title: "Example", data: userData[0], tpl: new Ext.XTemplate([ "{FIRSTNAME} {LASTNAME}
", "{ADDRESSTYPE} Address
", "<b id="addrEdit_{ID}"/>{STREET1}
", "<tpl if="STREET2.length > 0">", "<img src="s.gif" width="21" height="16" />{STREET2}
", "</tpl>", "<p/>{CITY}, {STATE} {ZIP}" ]), listeners:{ render:{ fn: function(el){ this.tpl.overwrite(this.body,this.data); } } } });
});
</script> <body>
</body> </html>
</source>
Update template data
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
var userData = [ {ID:1,FIRSTNAME:"A",LASTNAME:"B",EMAIL:"a@b.ru",PASSWORD:"a",ADDRESSTYPE:"Home",STREET1:"Road",STREET2:"",STREET3:"",CITY:"New York",STATE:"NY",ZIP:"12345",PHONETYPE:"Cell",PHONE:"123-456-7890"}, {ID:2,FIRSTNAME:"B",LASTNAME:"C",EMAIL:"d@e.ru",PASSWORD:"a",ADDRESSTYPE:"Work",STREET1:"Lane",STREET2:"",STREET3:"",CITY:"Los Angeles",STATE:"CA",ZIP:"67890",PHONETYPE:"Home",PHONE:"456-789-0123"}, ]; var userDetail = new Contact.panels.ContactDetails({ applyTo: "my", title: "Example", data: userData[0] }); updateContact = function(event,el,data){ userDetail.update(data.data); } Ext.get("actionLink").on("click",updateContact,this,{data:userData[1]});
});
Ext.namespace("Contact.panels"); Contact.panels.ContactDetails = Ext.extend(Ext.Panel,{
width: 350, height: 250, data: { ID: 0, FIRSTNAME: "", LASTNAME: "", EMAIL: "", ADDRESSTYPE: "Home (mailing)", STREET1: "", STREET2: "", STREET3: "", CITY: "", STATE: "", ZIP: "", PHONETYPE: "Home", PHONE: "" }, tpl: new Ext.XTemplate([ "{FIRSTNAME} {LASTNAME}"
",
{EMAIL}, {PHONE} ({PHONETYPE})
","{ADDRESSTYPE} Address
", "<tpl if="STREET2.length > 0">", "{STREET2}
", "</tpl>", "<tpl if="STREET3.length > 0">", "{STREET3}
", "</tpl>", "{CITY}, {STATE} {ZIP}" ]), initComponent: function(){ Contact.panels.ContactDetails.superclass.initComponent.call(this); if (typeof this.tpl === "string") { this.tpl = new Ext.XTemplate(this.tpl); } }, onRender: function(ct, position) { Contact.panels.ContactDetails.superclass.onRender.call(this, ct, position); if (this.data) { this.update(this.data); } }, update: function(data) { this.data = data; this.tpl.overwrite(this.body, this.data); }
}); </script> <body>
<a href="javascript:void(0)" id="actionLink">Update Data</a> </body> </html>
</source>
Use Ext.Template to display table detail
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head>
<body> <script type="text/javascript"> /*!
* Ext JS Library 3.0.0 * Copyright(c) 2006-2009 Ext JS, LLC * licensing@extjs.ru * http://www.extjs.ru/license */
Ext.onReady(function(){
// create the Data Store var store = new Ext.data.Store({ // load using HTTP url: "ext-3.0.0/examples/grid/sheldon.xml", // the return will be XML, so lets set up a reader reader: new Ext.data.XmlReader({ // records will have an "Item" tag record: "Item", id: "ASIN", totalRecords: "@total" }, [ // set up the fields mapping into the xml doc // The first needs mapping, the others are very basic {name: "Author", mapping: "ItemAttributes > Author"}, "Title", "Manufacturer", "ProductGroup", // Detail URL is not part of the column model of the grid "DetailPageURL" ]) }); // create the grid var grid = new Ext.grid.GridPanel({ store: store, columns: [ {header: "Author", width: 120, dataIndex: "Author", sortable: true}, {header: "Title", width: 180, dataIndex: "Title", sortable: true}, {header: "Manufacturer", width: 115, dataIndex: "Manufacturer", sortable: true}, {header: "Product Group", width: 100, dataIndex: "ProductGroup", sortable: true} ], sm: new Ext.grid.RowSelectionModel({singleSelect: true}), viewConfig: { forceFit: true }, height:210, split: true, region: "north" }); // define a template to use for the detail view var bookTplMarkup = [ "Title: <a href="{DetailPageURL}" target="_blank">{Title}</a>
", "Author: {Author}
", "Manufacturer: {Manufacturer}
", "Product Group: {ProductGroup}
" ]; var bookTpl = new Ext.Template(bookTplMarkup); var ct = new Ext.Panel({ renderTo: "binding-example", frame: true, title: "Book List", width: 540, height: 400, layout: "border", items: [ grid, { id: "detailPanel", region: "center", bodyStyle: { background: "#ffffff", padding: "7px" }, html: "Please select a book to see additional details." } ] }) grid.getSelectionModel().on("rowselect", function(sm, rowIdx, r) { var detailPanel = Ext.getCmp("detailPanel"); bookTpl.overwrite(detailPanel.body, r.data); }); store.load();
}); </script>
</body> </html>
</source>
Use if statement in template
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <script type="text/javascript"> Ext.onReady(function(){
var userData = [ {ID:1,FIRSTNAME:"A",LASTNAME:"B",EMAIL:"a@b.ru",PASSWORD:"a",ADDRESSTYPE:"Home",STREET1:"Road",STREET2:"",STREET3:"",CITY:"New York",STATE:"NY",ZIP:"12345",PHONETYPE:"Cell",PHONE:"123-456-7890"}, {ID:2,FIRSTNAME:"B",LASTNAME:"C",EMAIL:"d@e.ru",PASSWORD:"a",ADDRESSTYPE:"Work",STREET1:"Lane",STREET2:"",STREET3:"",CITY:"Los Angeles",STATE:"CA",ZIP:"67890",PHONETYPE:"Home",PHONE:"456-789-0123"}, ]; var userDetail = new Contact.panels.ContactDetails({ applyTo: "my", title: "Example", data: userData[0] }); updateContact = function(event,el,data){ userDetail.update(data.data); } Ext.get("actionLink").on("click",updateContact,this,{data:userData[1]});
});
Ext.namespace("Contact.panels"); Contact.panels.ContactDetails = Ext.extend(Ext.Panel,{
width: 350, height: 250, data: { ID: 0, FIRSTNAME: "", LASTNAME: "", EMAIL: "", ADDRESSTYPE: "Home (mailing)", STREET1: "", STREET2: "", STREET3: "", CITY: "", STATE: "", ZIP: "", PHONETYPE: "Home", PHONE: "" }, tpl: new Ext.XTemplate([ "{FIRSTNAME} {LASTNAME}"
",
{EMAIL}, {PHONE} ({PHONETYPE})
","{ADDRESSTYPE} Address
", "<tpl if="STREET2.length > 0">", "{STREET2}
", "</tpl>", "<tpl if="STREET3.length > 0">", "{STREET3}
", "</tpl>", "{CITY}, {STATE} {ZIP}" ]), initComponent: function(){ Contact.panels.ContactDetails.superclass.initComponent.call(this); if (typeof this.tpl === "string") { this.tpl = new Ext.XTemplate(this.tpl); } }, onRender: function(ct, position) { Contact.panels.ContactDetails.superclass.onRender.call(this, ct, position); if (this.data) { this.update(this.data); } }, update: function(data) { this.data = data; this.tpl.overwrite(this.body, this.data); }
}); </script> <body>
<a href="javascript:void(0)" id="actionLink">Update Data</a> </body> </html>
</source>
Use tpl markup to extract data
<source lang="html4strict">
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body> <script type="text/javascript"> Ext.onReady(function() {
var data = { name: "Jack Slocum", company: "Ext JS, LLC", address: "4 Red Bulls Drive", city: "Cleveland", state: "Ohio", zip: "44102", kids: [{ name: "Sara Grace", age:3 },{ name: "Zachary", age:2 },{ name: "John James", age:0 }] };
var p2 = new Ext.Panel({ title: "XTemplate", width: 300,html: "
Apply the template to see results here
",tbar: [{ text: "Apply Template", handler: function(){ var tpl = new Ext.XTemplate("
Name: {name}
", "Company: {company}
", "Location: {city}, {state}
", "Kids: ", "<tpl for="kids" if="name==\"Jack Slocum\"">", "<tpl if="age > 1"><p>{#}. {parent.name}\"s kid - {name}
</tpl>","</tpl></p>" ); tpl.overwrite(p2.body, data); p2.body.highlight("#c3daf9", {block:true}); } }], renderTo: document.body });
}); </script>
</body> </html>
</source>
Write template to a Panel and link with data
<source lang="html4strict">
<html> <head> <title>Hello World Window</title> <link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.0.0/ext-all.js"></script> </head> <body>
<script type="text/javascript"> Ext.onReady(function() {
var data = { name: "A", company: "B", city: "D", state: "E" }; var p = new Ext.Panel({ title: "Title", width: 300, html: "html code here", tbar: [{ text: "Template", handler: function(){ var tpl = new Ext.Template( "Name: {name}", "Company: {company}", "Location: {city}, {state}" ); tpl.overwrite(p.body, data); p.body.highlight("#00ff00", {block:true}); } }], renderTo: Ext.getBody() });
}); </script>
</body> </html>
</source>