в 09:59, 26 мая 2010

2010-05-26T09:59:51Z

Admin: 1 версия

2010-05-26T07:21:30Z

1 версия

Новая страница

==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(
"<div style="background-color: {color}; margin: 10;">",
"<b> Name :</b> {name}<br />",
"<b> Age :</b> {age}<br />",
"<b> DOB :</b> {dob}<br />",
"</div>"
);

myTpl.rupile();

var doTplAppend = function(obj) {
myTpl.append(document.body, obj);
}

doTplAppend({
color : "red",
name : "Name",
age : 20,
dob : "10/20/2009"
});

});
</script>
<div id="div1">asdf</div>
</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 <B>here</B>",
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("<div>Hello {0}.</div>");
myTpl.append(document.body, ["A"]);

});
</script>
<div id="div1">asdf</div>
</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 <B>here</B>",
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([
"<b>{FIRSTNAME} {LASTNAME}</b><br />",
"<p id="emailEdit_{ID}">{EMAIL}, {PHONE} ({PHONETYPE})</p>",
"<b>{ADDRESSTYPE} Address</b><br />",
"<tpl if="STREET2.length > 0">",
"{STREET2}<br />",
"</tpl>",
"<tpl if="STREET3.length > 0">",
"{STREET3}<br />",
"</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>
<div id="my" style="margin:25px;"></div>
<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(
"<div style="background-color: {color}; margin: 10;">",
"<b> Name :</b> {name}<br />",
"<b> Age :</b> {age}<br />",
"<b> DOB :</b> {dob}<br />",
"</div>"
);

myTpl.rupile();

var doTplAppend = function(obj) {
myTpl.append(document.body, obj);
}

doTplAppend({
color : "red",
name : "Name",
age : 20,
dob : "10/20/2009"
});

});
</script>
<div id="div1">asdf</div>
</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([
"<b>{FIRSTNAME} {LASTNAME}</b><br/>",
"<b>{ADDRESSTYPE} Address</b><br />",
"<b id="addrEdit_{ID}"/>{STREET1}<br />",
"<tpl if="STREET2.length > 0">",
"<img src="s.gif" width="21" height="16" />{STREET2}<br />",
"</tpl>",
"<p/>{CITY}, {STATE} {ZIP}"
]),
listeners:{
render:{
fn: function(el){
this.tpl.overwrite(this.body,this.data);
}
}
}
});
});

</script>
<body>
<div id="my" style="margin:25px;"></div>
</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([
"<b>{FIRSTNAME} {LASTNAME}</b><br />",
"<p id="emailEdit_{ID}">{EMAIL}, {PHONE} ({PHONETYPE})</p>",
"<b>{ADDRESSTYPE} Address</b><br />",
"<tpl if="STREET2.length > 0">",
"{STREET2}<br />",
"</tpl>",
"<tpl if="STREET3.length > 0">",
"{STREET3}<br />",
"</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>
<div id="my" style="margin:25px;"></div>
<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><br/>",
"Author: {Author}<br/>",
"Manufacturer: {Manufacturer}<br/>",
"Product Group: {ProductGroup}<br/>"
];
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>
<div id="binding-example"></div>
</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([
"<b>{FIRSTNAME} {LASTNAME}</b><br />",
"<p id="emailEdit_{ID}">{EMAIL}, {PHONE} ({PHONETYPE})</p>",
"<b>{ADDRESSTYPE} Address</b><br />",
"<tpl if="STREET2.length > 0">",
"{STREET2}<br />",
"</tpl>",
"<tpl if="STREET3.length > 0">",
"{STREET3}<br />",
"</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>
<div id="my" style="margin:25px;"></div>
<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: "<p><i>Apply the template to see results here</i></p>",
tbar: [{
text: "Apply Template",
handler: function(){
var tpl = new Ext.XTemplate(
"<p>Name: {name}</p>",
"<p>Company: {company}</p>",
"<p>Location: {city}, {state}</p>",
"<p>Kids: ",
"<tpl for="kids" if="name==\"Jack Slocum\"">",
"<tpl if="age > 1"><p>{#}. {parent.name}\"s kid - {name}</p></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 <B>here</B>",
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>

← Предыдущая	Версия 09:59, 26 мая 2010
(нет различий)

JavaScript DHTML/Ext JS/Template - История изменений

в 09:59, 26 мая 2010

Admin: 1 версия