I've set up a Panel with an XTemplate and am trying to have some data loaded in automatically on render. From my understanding, using the tpl and data configs for a panel should make that happen. However, if I do so, the data is not loaded on the fly.

Using some example data, here is a simple panel that has tpl and data configs set. I've commented out the last line because I don't believe it should be necessary, since I have defined the data parameter, no?

The docs say this about the data config option: "The initial set of data to apply to the tpl to update the content area of the Component."

Code:
var data = {
     name: 'Jack Slocum',
     title: 'Lead Developer',
     company: 'Ext JS, LLC',
     email: 'jack@extjs.com',
     address: '4 Red Bulls Drive',
     city: 'Cleveland',
     state: 'Ohio',
     zip: '44102',
     drinks: ['Red Bull', 'Coffee', 'Water'],
     kids: [{
         name: 'Sara Grace',
         age:3
     },{
         name: 'Zachary',
         age:2
     },{
         name: 'John James',
         age:0
     }]
};
     
 var tpl = new Ext.XTemplate(
     '<p>Name: {name}</p>',
     '<p>Title: {title}</p>',
     '<p>Company: {company}</p>',
     '<p>Kids: ',
     '<tpl for="kids">',
         '<p>{name}</p>',
     '</tpl></p>'
);
      
var thePanel = new Ext.Panel({
      renderTo:'myPanel',
      title:'My Panel',
      tpl: tpl,
      data: data
  });

     // If I uncomment the next line, the data is loaded into the panel after it renders
     //tpl.overwrite(thePanel.body, data);
Is this a bug? Or is it intentionally built this way for a reason? Or am I totally missing something?