extjs在panel中动态添加模板并加载数据

废话不多说，直接上代码：

js文件如下：

// Ext的panel
Ext.define('MyApp.view.misDetailPanel', {
    extend: 'Ext.panel.Panel',

    requires: [
        'Ext.panel.Panel'
    ],

    id: 'MisDetailPanel',
    layout: 'border',
    closable: true,
	width:400,
	height:300,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    region: 'west',
                    id: 'misBaseInfo',
                    width: 200
                },
                {
                    xtype: 'panel',
                    flex: 1,
                    region: 'center',
                    id: 'misDailyInfo'
                }
            ]
        });

        me.callParent(arguments);
    }

});
// 创建界面
var win = Ext.create('MyApp.view.misDetailPanel', {title:'hahaha'});

var tp1 = new Ext.XTemplate(
	'<table cellpadding=0 cellspacing=0 border=1 width=200px class="missionDetail">',
	'<tr><td colspan=2 align=center><b>{name}的详细信息</b></td></tr>',
	'<tr><td>任务名：</td><td>{name}</td></tr>',
	'<tr><td>任务下发人：</td><td>{assignPeople}</td></tr>',
	'<tr><td>预计开始时间：</td><td>{planStartTime}</td></tr>',
	'<tr><td>预计结束时间：</td><td>{planEndTime}</td></tr>',
	'<tr><td>实际开始时间：</td><td>{actualStartTime}</td></tr>',
	'<tr><td>实际结束时间：</td><td>{actualEndTime}</td></tr>',
	'<tr><td>任务状态：</td><td>{statue}</td></tr>',
	'<tr><td>难度系数：</td><td>{grade}</td></tr>',
	'<tr><td>描述：</td><td>{memo}</td></tr>'
);

tp1.compile(); // 对模板进行编译,速度比较快.
// 模板数据
var data = {
	name:'1', 
	assignPeople:'2',
	planStartTime:'3', 
	planEndTime:'5', 
	actualStartTime:'7', 
	actualEndTime:'8', 
	statue:'0',
	grade:'a',
	memo:'cc'};

var html = tp1.applyTemplate(data);
// 找到要渲染的panel
var panel = win.queryById('misBaseInfo');
    panel.html = html;


Ext.onReady(function(){
				win.render(Ext.getBody());
				});

运行结果：

在css文件中加入相应的样式就可以使页面变成自己想要的模样。

如：

table.missionDetail tr
{
    height:30px;
    font-size:15px;
    border:1em solid red;
}