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>
