Extjs 动态输出（使用XTemplate）（一）

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
  });

//如果是panel 在render（渲染） 之前用：
//Ext.getCmp('uploadFileInfos').data = data;
//Ext.getCmp('uploadFileInfos').tpl = tpl;

//如果是panel 在render（渲染） 之后用：
// If I uncomment the next line, the data is loaded into the panel after it renders
//tpl.overwrite(thePanel.body, data);