JavaScript DHTML/Ext JS/Template

Материал из Web эксперт
Перейти к: навигация, поиск

Compile template

  
<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>



Declare template with field marker

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code from ext3.0.0 -->
<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>



Define template and pass in data

  
<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>



Define template data in an array

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code from ext3.0.0 -->
<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>



Define your panel to hold the template

    
<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 &gt; 0">",
       "{STREET2}<br />",
     "</tpl>",
     "<tpl if="STREET3.length &gt; 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>



Pass data to template

  

<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>



Reference user data and apply to template

   
<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 &gt; 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>



Update template data

    
<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 &gt; 0">",
       "{STREET2}<br />",
     "</tpl>",
     "<tpl if="STREET3.length &gt; 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>



Use Ext.Template to display table detail

  
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code in ext3.0.0 -->
<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>



Use if statement in template

    

<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 &gt; 0">",
       "{STREET2}<br />",
     "</tpl>",
     "<tpl if="STREET3.length &gt; 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>



Use tpl markup to extract data

  

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code from ext3.0.0 -->
<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 &gt; 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>



Write template to a Panel and link with data

   
<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.ru
 * http://www.extjs.ru/license
 */
-->
<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>
<!-- Revised from demo code from ext3.0.0 -->
<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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Ext_JS/Template&oldid=2463»