Question

初学Extjs，制作了一个TreePanel，运行时页面空白，求解。。

代码如下：
Ext.onReady( function(){
Ext.BLANK_IMAGE_URL = "../ext-3.3.1/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget="qtip";

var root = new Ext.tree.TreeNode({
id:"root",
text:"主干道"
});

var menu1 = new Ext.tree.TreeNode({
id:"menu1",
text:"支干1"
});

var menu2 = new Ext.tree.TreeNode({
id:"menu2",
text:"只干2"
});

var menu3 = new Ext.tree.TreeNode({
id:"menu3",
text:"只干3"
});

root.appendChild(menu1);
root.appendchild(menu2);
root.appendChild(menu3);

var menu = new Ext.tree.TreePanel({
border:false,
rootVisible:false,
root:root
});

var viewport= new Ext.Viewport({
title:"作业",
layout:"border",
items:[
{
title:"标题栏",
region:"north",
height:100

},
{
title:"导航栏",
region:"west",
width:200 ,
items:menu,
collapsible:true,
split:true
},
{
title:"操作区",
region:"center"

}
]
});

});
html文件如图，目前自学EXT在此处卡住了，久久没发现什么问题，坐等求解╯﹏╰

Answer 1

var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "alegrbra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});

Ext.create('Ext.tree.Panel', {
title: 'Simple Tree',
width: 200,
height: 150,
store: store,
rootVisible: false,
renderTo: Ext.getBody()
});