关于Desktop放置GridPanel的问题

请问，我怎么在Desktop中放置自己定义的那些组件？
例如下面的代码:
这是一个Desktop的Module
MyDesktop.XTemplate = Ext.extend(Ext.app.Module,{
id:"xTemplate",
init:function(){
this.launcher = {
text:"XTemplate",
scope:this,
iconCls:"settings",
handler:this.showXTemplate
}
},
showXTemplate:function(){
var desktop = this.app.getDesktop();
var xTemplateWin = desktop.getWindow("xTemplateWindow");
if(!xTemplateWin){
xTemplateWin = desktop.createWindow({
id:"xTemplateWindow",
title:"Ext XTemplate",
width:400,
height:300,
items:[panel] ///就是这里了
});
}
xTemplateWin.show();
}
});
我的这个panel应该在那个地方定义？我试过了 在onReady()中定义不行，然后就在script中定义也不行？
除了 只能在item中 items:[new Ext.grid.GridPanel()]的方法就没别的了吗?

[code="js"]
MyDesktop.XTemplate = Ext.extend(Ext.app.Module, {
id: "xTemplate",
init: function () {
this.launcher = {
text: "XTemplate",
scope: this,
iconCls: "settings",
handler: this.showXTemplate
}
},
showXTemplate: function () {
var desktop = this.app.getDesktop();
var xTemplateWin = desktop.getWindow("xTemplateWindow");
if (!xTemplateWin) {
xTemplateWin = desktop.createWindow({
id: "xTemplateWindow",
title: "Ext XTemplate",
width: 400,
height: 300,
items: [createPanel()] ///就是这里了
});
}
xTemplateWin.show();
}
});

function createPanel() {
var panel = new Ext.Panel({
width: 300,
height: 400
});
return panel;
}
[/code]

这个是别人实现的一个扩展的组建,等于就是一个类