Click to search on your search term.
Subscribe to Fig Leaf Tutorials


Need help with a project? Contact us at sales@figleaf.com.
From code reviews to project "jumpstarts" and full life-cycle development, we've got you covered!
Check out our case studies!
Follow us on Twitter!
Click here to join our Facebook group!

Ready to upgrade your skills? Try these instructor-led classes in Washington, DC:
Ext JS 6 Bootcamp
12/04/2017

Looping through Data

Page of 168

The tpl tag and the for property are used to loop through a repeating dataset. For example, the following code snippet defines a template from which an HTML unordered list is generated :

var tpl = Ext.create('Ext.XTemplate', 
  '
    ', '', '
  • {fName} {lName}
  • ', '
    ', '
' ); var markup = tpl.apply([ {fname: 'Steve', lName: 'Drucker'}, {fname: 'Jason', lName: 'Perry'} ]);

If your repeating data structure is embedded within a JavaScript object you can still loop through it by specifying the key name as the for property as illustrated by the following:

var tpl = Ext.create('Ext.XTemplate', 
  '
    ', '', '
  • {fName} {lName}
  • ', '
    ', '
' ); var markup = tpl.apply({ authors: [ {fname: 'Steve', lName: 'Drucker'}, {fname: 'Jason', lName: 'Perry'} ], company: 'Fig Leaf Software', url: 'http://www.figleaf.com' );
Page of 168
comments powered by Disqus