{"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":"

Problem<\/strong><\/p>\n

You want to use an html template within client-side ExtJS code.<\/p>\n

Tested in ExtJS Version<\/strong><\/p>\n

4.1.1<\/p>\n

Screenshot<\/strong>
\n\"\"<\/a>
\nSolution<\/strong>
\nUse ExtJS’s xtemplates.<\/p>\n

\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    '',\n      '',\n      'Title:<\/b> {title}',\n        '',\t\t  '\n      'Genre:<\/b> {genre}',\n        '<\/tpl>',\n        '',\n           'Duration:<\/b> {duration}',\n        '<\/tpl>',\n      '<\/tpl>',\n    '<\/tpl>'\n  );\n  tpl.overwrite(panel.body, records);\n\n  });\n})\n]]><\/pre>\n
Discussion<\/strong><\/p>\n
<\/strong>A popular alternative to ExtJS templates is eJS:
\nhttp:\/\/embeddedjs.com\/<\/a><\/p>\n
See also the ExtJS ToolTips<\/a> for an example of where this could be used, and the ExtJS ListView example<\/a> to see another rendition of the same data..<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Problem You want to use an html template within client-side ExtJS code. Tested in ExtJS Version 4.1.1 Screenshot Solution Use ExtJS’s xtemplates. Ext.onReady(function() { var trackStore = new Ext.data.Store({ storeId: ‘soundCloudStore’, proxy: { type: ‘ajax’, url: ‘blues.json’, reader: { type: ‘json’, idProperty: ‘id’ } }, fields:[‘duration’, ‘genre’, ‘created_at’, ‘kind’, ‘title’, ‘id’] }); trackStore.load( function(records, operations, … <\/p>\n
Continue reading “ExtJS xtemplate Example”<\/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":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t