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

Binding a Template to a Component

Page of 168

You can bind a template directly to a container via its tpl config property as illustrated below:

Ext.define('MyApp.view.MyPanel', {
 alias: 'widget.mypanel',
 styleHtmlContent: true, // apply default html styling
 tpl: [
  '',
   'First Name: {fName} 
', 'Last Name: {lName}', '
', '
' ], autoScroll: true, // add scroll bar if necessary title: 'Details' });

Panels that are bound to a template will automatically refresh their markup whenever the setData() method is called as illustrated by the following:

Ext.ComponentQuery.query('mypanel')[0].setData([
 {fName: 'Steve', lName: 'Drucker', bonus: 5},
 {fName: 'Jason', lName: 'Perry',   bonus: 7},
 {fName: 'Tracey',lName: 'Dunn',    bonus: 8},
]);
Page of 168
comments powered by Disqus