{"id":501,"date":"2012-09-06T01:13:23","date_gmt":"2012-09-06T01:13:23","guid":{"rendered":"http:\/\/garysieling.com\/blog\/?p=501"},"modified":"2012-09-06T01:13:23","modified_gmt":"2012-09-06T01:13:23","slug":"extjs-xtemplate-example","status":"publish","type":"post","link":"https:\/\/www.garysieling.com\/blog\/extjs-xtemplate-example\/","title":{"rendered":"ExtJS xtemplate Example"},"content":{"rendered":"<p><strong>Problem<\/strong><\/p>\n<p>You want to use an html template within client-side ExtJS code.<\/p>\n<p><strong>Tested in ExtJS Version<\/strong><\/p>\n<p>4.1.1<\/p>\n<p><strong>Screenshot<\/strong><br \/>\n<a href=\"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/09\/xtemplate-example1.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/172.104.26.128\/wp-content\/uploads\/2012\/09\/xtemplate-example1.png\" alt=\"\" title=\"xtemplate-example\" width=\"475\" height=\"192\" class=\"alignnone size-full wp-image-508\" srcset=\"https:\/\/www.garysieling.com\/blog\/wp-content\/uploads\/2012\/09\/xtemplate-example1.png 475w, https:\/\/www.garysieling.com\/blog\/wp-content\/uploads\/2012\/09\/xtemplate-example1-300x121.png 300w\" sizes=\"(max-width: 475px) 100vw, 475px\" \/><\/a><br \/>\n<strong>Solution<\/strong><br \/>\nUse ExtJS&#8217;s xtemplates.<\/p>\n<pre lang=\"javascript\">\n Ext.onReady(function() {\n  var trackStore = new Ext.data.Store({\n    storeId: 'soundCloudStore',\n    proxy: {\n      type: 'ajax',\n      url: 'blues.json',\n      reader: {\n        type: 'json',\n        idProperty: 'id'\n      }\n    },\n    fields:['duration', 'genre', 'created_at', 'kind', 'title', 'id']\n  });\n  trackStore.load(\n    function(records, operations, successful) { \n      var panel =  Ext.create('Ext.panel.Panel', {\n        title: 'Tracks',\n        store: trackStore,\n        height: 190,\n        width: 550,\n        renderTo: Ext.getBody()\n  });\n\n  var tpl = new Ext.XTemplate(\n    '<tpl for=\".\">',\n      '<tpl for=\"data\">',\n      '<b>Title:<\/b> {title}',\n        '<tpl if=\"genre != &quot;&quot;\">',\t\t  '\n      '<b>Genre:<\/b> {genre}',\n        '<\/tpl>',\n        '<tpl if=\"duration &gt; 1\">',\n           '<b>Duration:<\/b> {duration}',\n        '<\/tpl>',\n      '<\/tpl>',\n    '<\/tpl>'\n  );\n  tpl.overwrite(panel.body, records);\n\n  });\n})\n]]><\/pre>\n<p><strong>Discussion<\/strong><\/p>\n<p><strong><\/strong>A popular alternative to ExtJS templates is eJS:<br \/>\n<a href=\"http:\/\/embeddedjs.com\/\">http:\/\/embeddedjs.com\/<\/a><\/p>\n<p>See also the <a href=\"http:\/\/garysieling.com\/blog\/extjs-tooltip-example\">ExtJS ToolTips<\/a> for an example of where this could be used, and the <a href=\"http:\/\/garysieling.com\/blog\/extjs-listview-example\">ExtJS ListView example<\/a> to see another rendition of the same data..<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Problem You want to use an html template within client-side ExtJS code. Tested in ExtJS Version 4.1.1 Screenshot Solution Use ExtJS&#8217;s xtemplates. Ext.onReady(function() { var trackStore = new Ext.data.Store({ storeId: &#8216;soundCloudStore&#8217;, proxy: { type: &#8216;ajax&#8217;, url: &#8216;blues.json&#8217;, reader: { type: &#8216;json&#8217;, idProperty: &#8216;id&#8217; } }, fields:[&#8216;duration&#8217;, &#8216;genre&#8217;, &#8216;created_at&#8217;, &#8216;kind&#8217;, &#8216;title&#8217;, &#8216;id&#8217;] }); trackStore.load( function(records, operations, &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.garysieling.com\/blog\/extjs-xtemplate-example\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;ExtJS xtemplate Example&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4],"tags":[216,218,224,302],"aioseo_notices":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/501"}],"collection":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/comments?post=501"}],"version-history":[{"count":0,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/posts\/501\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/media?parent=501"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/categories?post=501"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.garysieling.com\/blog\/wp-json\/wp\/v2\/tags?post=501"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}