ExtJS MVC的搭建（三）

3.1 在上面显示的页面中，大家可以看到左边的导航没有菜单选项，因此就不够名副其实了，下面我们添加树形菜单

还是在视图中创建Mymenutree.js，代码如下：

store=Ext.create('Ext.data.TreeStore', {
defaultRoodId:'root',

root: {
expanded: true,
children: [
{ text: "地面资料", expanded: true,
children: [
{ text: "降水", expanded: true,children:[
{ text: "1小时降水", leaf: true },
{ text: "3小时降水", leaf: true },
{ text: "6小时降水", leaf: true },
{ text: "12小时降水", leaf: true },
{ text: "24小时降水", leaf: true }
] },
{ text: "温度", leaf: true},
{ text: "气压", leaf: true },
{ text: "日照", leaf: true }
] },
{ text: "高空资料", expanded: true,children:[
{ text: "GPS/MET", leaf: true },
{ text: "闪电定位", leaf: true },
{ text: "高空分析图", leaf: true }
] },
{text:"农业和生态资料",expanded:true,children:[
{ text: "土壤水分资料", leaf: true },
{ text: "酸雨资料", leaf: true },
{ text: "冻土资料", leaf: true },
{ text: "生态环境资料", leaf: true }
]}
]
}
});
Ext.define('FLY.view.Mymenutree' ,{
extend: 'Ext.tree.TreePanel',
alias: 'widget.menutree',
border:false,
hrefTarget:'mainContent',//修改的页面显示部分的id
store: store,
rootVisible: false,
bodystyle:{
background:'#ffc',
padding:'10px'
}
});

    因为数据比较少，所以我把store的部分放在了这里，大家也可以分开放，这样便于管理。

3.2 同样需要在控制器controller中配置视图才能生效。

Ext.define('FLY.controller.Mycontroller', {
extend: 'Ext.app.Controller',

views: [
'Mymenutree','Viewport'//修改部分在此
],
//通过init函数来监听视图事件，控制视图与控制器的交互
init:function(){

this.control({

'menutree':{
itemclick:this.changePage
}
});
},
changePage:function(){

alert('success');//测试使用
}
});

这样再次保存代码，发布到服务器，显示页面如下：

本实例初见雏形，还需继续修改，待续……