廢話不多說，直接上程式碼：

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