ExtJS MVC的搭建（二）

2.1要搭建一个MIS系统首先需要构建系统框架，建立框架视图viewport.js,代码如下所示：

Ext.define(‘FLY.view.Viewport‘,{
extend:‘Ext.container.Viewport‘,
layout:‘border‘,
items: [{
region: ‘north‘,
xtype:‘image‘,
src:‘image/bj2.png‘,
height:100
}, {
region: ‘west‘,
collapsible: true,
title: ‘资料导航‘,
width:180,
items:[{
xtype:‘menutree‘   //此处的‘menutree’为菜单面板视图的别名
}]
}, {
region: ‘east‘,
title: ‘摘要数据‘,
collapsible: true,
split: true,
width: 150
}, {
region: ‘center‘,
id:‘mainContent‘,
xtype: ‘panel‘,
items:[{xtype:‘toolbar‘,
items:[
{xtype:‘datefield‘,
fieldLabel: ‘时间‘,
labelWidth:40,
width:140,
maxValue: new Date(),
format: ‘Y-m-d‘,
editable:false,
value: new Date().getDate()-1
},
{xtype:‘label‘,
text:‘站号‘},
{xtype:‘textfield‘},
{xtype:‘button‘,
text:‘查询‘}]
}
]

},
{
region: ‘south‘,
xtype:‘toolbar‘,
padding:10,
items:[{xtype:‘label‘,
html: "<a href=‘#‘ onclick=‘aboutUs()‘ style=‘text-decoration:none;‘>关于我们</a>"  //此处的单机鼠标监听事件还需要在后面添加aboutUs函数才能响应
},‘-‘,‘-‘,
{xtype:‘label‘,
text:‘Copyright ©fly.cn. All Rights Reserved.‘
}]
}
]
});

2.2添加视图以后，还需要在控制器里进行配置才能生效

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

views: [
‘Viewport‘          //在此处添加视图
],
//通过init函数来监听视图事件，控制视图与控制器的交互
init:function(){

this.control({

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

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

代码写完后，发布到tomcat服务器上，效果如下

ExtJS MVC的搭建（二）