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的搭建(二)

时间: 2024-10-08 14:20:02

ExtJS MVC的搭建(二)的相关文章

ExtJS MVC的搭建(序)

Ext JS 是一个用JavaScript 语言编写的用于浏览器端UI开发的Ajax 框架 .这种框架有几个主要特点. (1) 开源项目       Ext JS 是一个开源项目, 它提供了免费的框架代码, 完善的API文档, 以及开发人员社区.这些资源可以帮助Ext JS 快速地在项目内投入使用. (2) 兼容各种浏览器      Ext JS 框架可跨浏览器运行.基于框架开发的应用支持IE, FireFox , Safari 等多种流行的浏览器. (3) 后台技术无关性      Ext J

ExtJS MVC的搭建(一)

ExtJS是一种主要用于创建前端用户界面的ajax框架.本案例引入的是extjs4.2的开发包.结构为: 其中app文件是新建的,并在此文件下建MVC的文件夹.每个ExtJS4应用以一个application 类开始.下面为app.js和index.html的文件: app.js: Ext.application({ requires:['Ext.container.Container'], name:'FLY', appFolder:'app', controllers:['Mycontrol

ExtJS MVC的搭建(三)

3.1 在上面显示的页面中,大家可以看到左边的导航没有菜单选项,因此就不够名副其实了,下面我们添加树形菜单 还是在视图中创建Mymenutree.js,代码如下: store=Ext.create('Ext.data.TreeStore', { defaultRoodId:'root', root: { expanded: true, children: [ { text: "地面资料", expanded: true, children: [ { text: "降水&quo

Spring MVC 框架搭建及详解

一.Spring MVC环境搭建:(Spring 2.5.6 + Hibernate 3.2.0) 1. jar包引入 Spring 2.5.6:spring.jar.spring-webmvc.jar.commons-logging.jar.cglib-nodep-2.1_3.jar Hibernate 3.6.8:hibernate3.jar.hibernate-jpa-2.0-api-1.0.1.Final.jar.antlr-2.7.6.jar.commons-collections-3

Unity + iBatis + Asp.net Mvc 系统搭建

Unity + iBatis + Asp.net Mvc 系统搭建 之前用EntityFramework Code First做了一些小项目,很是方便:后来在一个 Java 项目中接触了myBatis之后,深深的喜欢上了这种最直接最原始最灵活的数据库操作,所以最终决定改造之前的项目,使用IBatis访问数据库: 一.框架搭建 1)新建一个Asp.net Mvc的应用,.Net使用4.5 2)使用 Nuget 安装 Unity 3.5,因为比较熟悉 Unity: 3)使用 Nuget 安装 Uni

spring mvc+mybatis整合 (二)

转:http://lifeneveralone.diandian.com/post/2012-11-02/40042292065 本文介绍使用spring mvc结合Mybatis搭建一个应用程序框架. demo源码下载:springMVC-Mybatis 1.准备工作: spring的jar包: spring-beans-3.1.0.RELEASE.jar spring-core-3.1.0.RELEASE.jar spring-web-3.1.0.RELEASE.jar spring-web

【深入Cocos2d-x】使用MVC架构搭建游戏Four

喜欢Four这个项目,就赶快在GitHub上Star这个项目吧! 喜欢我的文章,来微博关注我吧:王选易在学C艹 点我下载 项目起源 项目Logo: 下面是该游戏的项目地址,各位想参考源代码的同学可以到我的GitHub上下载该项目的源码. 项目主页 GitHub地址 bug反馈及建议 我做这个项目的原始目的是实验MVC在游戏中的应用. Model-View-Controller(MVC)是一种组合设计模式,它体现了一种关注点分离(Separation of concerns,SoC)的思想.MVC

Spring MVC 框架搭建及具体解释

如今主流的Web MVC框架除了Struts这个主力 外.其次就是Spring MVC了,因此这也是作为一名程序猿需要掌握的主流框架.框架选择多了.应对多变的需求和业务时,可实行的方案自然就多了. 只是要想灵活运用Spring MVC来应对大多数的Web开发,就必需要掌握它的配置及原理. 一.Spring MVC环境搭建:(Spring 2.5.6 + Hibernate 3.2.0) 1. jar包引入 Spring 2.5.6:spring.jar.spring-webmvc.jar.com

Spring MVC 环境搭建(一)

一.建立 JavaWeb 项目 1.建立一个 Java 项目. 2.在项目下新建一个文件夹 webapp (命名可自取,这个目录即是网站根目录),再在该文件夹下新建一个 WEB-INF 文件夹(命名固定),WEB-INF 作为 Tomcat 启动后的安全文件夹,浏览器不能访问到该目录下的资源.tomcat 启动会默认会在此目录下读取相应配置文件. 3.在 WEB-INF 下建立 web.xml 文件(命名固定),从 tomcat 安装路径 /conf/web.xml 中拷贝基本的文档结构,修改相