使用Intellij IDEA搭建Ext JsMVC web项目
由于自己从android开发转来学习web开发，最近在学习Jsp，之前接触过一点Extjs，所以用jsp来配合ext试试。
Ext JS介绍
extjs是一个javascript框架，它的好处就是有它自己的界面和事件处理。我们根据它的语法就可以实现我们想要的功能，具体我就不介绍了，自己百度。
Ext MVC结构介绍
不管任何时候，做一个大项目总是很烦的。因为大，所以开发的时候很难去组织，维护的时候就更别说了。随着业务增长肯定更头疼了。Ext的MVC和你在其它地方了解到的所以MVC的功能一样，它的目的就是：
1、组织你的代码，让它易于维护
2、减少你的代码量
Ext MVC结构组成
- Model 就是字段和数据，类似于java当中的实体bean
- View 看名字你就爱猜到了，对，没错，用来显示的组件。
- Controllers Controllers一般就是做一些操作的地方。
MVC文件结构
先来看一下官方文档给出的一张图
好了，先有个大概的认识，接下来开始实际操作。
本例演示用的开发工具是Intellij idea
项目搭建
无论用什么工具，最开始的一步当然是创建一个web项目了
1、创建一个web项目
1、打开intellij创建一个新项目，之后勾选JavaEE下的Web application，选择自己的项目目录一个项目就创建完毕了。
2、创建完毕后，项目目录如下
src里放的就是java代码，web就是我们的项目根目录。此时还需要配置你的Tomcat容器，指定你的项目web路径。具体如下
3、点击IDE右上角的三角形editConfigurations，之后在左边点击+,寻找Tomcat Server,然后点击Local。这样一个Tomcat配置项就出现了
4、Tomcat配置项添加之后还需要指定Tomcat的目录，和web项目的目录，只需要选定你的Tomcat目录和你项目的web文件夹。
这样一个web项目就可以运行了，点击右上角run,在浏览器里输入localhost:8080可以访问就到下一步。
2、集成Ext Js
1、ext作为一个javascript框架，我们只需要在页面简单的通过引入javascript的方式就可以使用了。
在web文件夹新建一个js文件夹，把extjs的sdk放入，然后在首页引入
index.jsp代码如下
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>extjsDemo</title>
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css">
<script type="text/javascript" src="js/extjs/ext-all.js"></script>
<script type="text/javascript" src="js/extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="app/appjs/app.js"></script>
</head>
<body> </body>
</html>
这样index.jsp就能够使用ext了，注意最后一行script饮用了app.js，这是ext应用的开始的地方。
在文章开始说到ext官网给出的MVC文件结构都是在app文件夹之后的，所以在web下新建一个app文件夹
3、使用Ext Js的MVC结构
在app.js里创建应用
没个ext js 4应用都以一个Application类开始。Application包含了应用文件夹的设置，以及一个启动函数，在Application启动之后会调用。所以我们在app文件夹创建app.js，当然名字你可以随便取，我们在里面写一个Application
Ext.application({
requires: ['Ext.container.Viewport'],
name: 'AM',
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'panel',
title: 'Users',
html : 'List of users will go here'
}
]
});
}
});
上面的代码通过Ext.application创建了一个名叫AM 的Application类，并且指定了应用的文件夹为app，launch函数，在加载完毕之前会调用，这里可以看到创建了一个Viewport类，items就是它包含的内容，包含了一个panel，里面简单的设置了一段文字。
此时你再刷新index.jsp，效果是这样了,完全没写什么样式，是不是很酷，而且你可以根据皮肤换效果
定义一个Controller
ext中的Controllers一般都和application一起使用，用来监听处理事件。下面代码创建了一个简单的控制器，记得创建在controller文件夹下。
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
console.log('Initialized Users! This happens before the Application launch function is called');
}
});
创建之后还要在application中引用
Ext.application({
...
controllers: [
'Users'
],
...
});
当在浏览器中访问index.jsp的时候，由于在applicaton在指定了controller,所以controller会自动加载，controller中的 init函数会在Application类的lauch函数之前调用。
打开浏览器打开console 控制台会发现输出了Initialized Users! This happens before the Application launch function is called
Controller的init函数通常会调用－control()来设置事件监听。
如下：
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'viewport > panel': {
render: this.onPanelRendered
}
});
},
onPanelRendered: function() {
console.log('The panel was rendered');
}
});
在init函数中调用了control，查找viewport类下的任何panel类， render表示显示事件，即当panel显示是输出The panel was rendered
修改为上面代码，再刷新，console控制台就打印了。
看到这里，基本的事件处理就演示了，在深入了解之后就可以做更多事件了，哈哈。好了，下面来看view
定义一个Controller
ext含有很多view组件，下面是一个简单的例子，我们在view文件夹下建立List.js代表用户列表，代码
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',//别名，在其他地方引用可以直接用userlist
title: 'All Users',
initComponent: function() {
this.store = {
fields: ['name', 'email'],
data : [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
}; //做演示，这是指定了数据
this.columns = [
{header: 'Name', dataIndex: 'name', flex: 1},
{header: 'Email', dataIndex: 'email', flex: 1}
];//用来grid显示的列，会将store中name相同的数据显示
this.callParent(arguments);
}
});
注意这里define之后的名字，‘AM.view.user.List’,AM是我们创建application时指定的 name，view对呀mvc的view,也就是view文件夹下user文件夹下的 List，其他所有文件都是按照这个模式的，就是mvc。
view创建好之后，需要在Controller里引用，由于用了weight.userlist来作为alias别名，所以在Controller中可以直接使用别名引用
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List'
],
init: ...
onPanelRendered: ...
});
还记得之前在application中在launch之后直接显示了一个 panel吗，现在有了自己的view,我们就不用panel了，直接将view添加到application
Ext.application({
...
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});
这样在启动之后就会加载view了，重新刷新浏览器，效果如图：
简单的设置了数据源指定grid的columns就可以显示了是不是很酷，可惜现在的数据不是真实数据。
之前在controller中监听了panel的render事件，不过由于是显示事件所以可能感觉不爽。结下来我们操作grid。
Controller中操作grid
通过双击在console控制台输出一条信息,看controller代码
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List'
],
init: function() {
this.control({
'userlist': {
itemdblclick: this.editUser
}
});
},
editUser: function(grid, record) {
console.log('Double clicked on ' + record.get('name'));
}
});
只是简单的修改了control中的代码，监听userlist，itemdbclick代表的是双击事件，指向了editUser,监听的输入了Double clicked on ’ + record.get(‘name’)
再次刷新，双击
那我们要是想直接编辑gird呢
编辑的时候肯定需要一个form，来看代码
Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias: 'widget.useredit',
title: 'Edit User',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',// form表单
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
});
上面代码定义了一个用来显示的window，其中包含了一个form表单和两个按钮。
那么我们要contoller里肯定需要在双击的时候显示window，将原始数据填入 form。
好了，上代码
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
views: [
'user.List',
'user.Edit'
],
init: ...
editUser: function(grid, record) {
var view = Ext.widget('useredit');//找到window
view.down('form').loadRecord(record);window下的 form，回填数据。
}
});
创建Model和Store
之前我们在创建view的时候直接将数据写在了view里，其实可以在 view中引用Store，store是封装数据的地方，可以从服务器加载也可以本地配置。
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
fields: ['name', 'email'],
data: [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
//简单的指定了本地数据
});
需要在Controller中引用stores
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: [
'Users'
],
...
});
这样在view里我们就可以直接使用store
Ext.define('AM.view.user.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
title: 'All Users',
// we no longer define the Users store in the `initComponent` method
store: 'Users',
initComponent: function() {
this.columns = [
...
});
接下来到model
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['name', 'email']
});
store和controller里需要引用model，
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
data: [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
});
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: ['Users'],
models: ['User'],
...
});
这样和之前的效果一样。
store能够从服务端加载数据用来显示在view中。由于篇幅有限就暂时不做介绍了。这里主要讲解Ext js的MVC。
其实就是以Ext.application为开始，指定了项目名之后,
命名就以 项目名.view或controller或store或model.文件名。
中间你可以加根据功能区分的文件夹，这样就很好管理和维护了。
最后附上一下demo的文件结构
哈哈，extjs的mvc是不是很好理解了，如何在src也用上MVC就更好了。点个赞呗。
使用Intellij IDEA搭建Ext JsMVC web项目的更多相关文章
- Intellij IDEA采用Maven+Spring MVC+Hibernate的架构搭建一个java web项目
原文:Java web 项目搭建 Java web 项目搭建 简介 在上一节java web环境搭建中,我们配置了开发java web项目最基本的环境,现在我们将采用Spring MVC+Spring ...
- Intellij IDEA通过tomcat部署web项目的机制
问题 以前使用eclipse调用tomcat运行web项目时,eclipse的方式非常直接了当,就是直接将项目更新到%TOMCAT_HOME%/webapps目录下即可.然而在使用Intellij I ...
- [Intellij] 在IntelliJ IDEA 中创建运行web项目
安装工具 1.JDK7+ 2.IntelliJ Idea 工具(下载安装后,网上找注册码破解即可) 3.tomcat7+ 解压缩版 明确两个概念: 1.Project:类似于eclipse的works ...
- IntelliJ IDEA 配置 Tomcat 运行web项目
运行前提: 配置好 Java 的运行环境 配置好 Tomcat 安装 IntelliJ IDEA 开始 1.创建项目并配置 关于配置SDK,等建完项目再说 没有配置SDK的话 会出现下面的弹框,点击 ...
- Maven的环境搭建及新建web项目
第一次接触maven,做一个简单的记录 一.下载maven及环境变量的配置 下载地址 http://maven.apache.org/download.cgi 配置其环境变量 MAVEN_HOME= ...
- IntelliJ IDEA + Maven创建Java Web项目
1. Maven简介 相对于传统的项目,Maven 下管理和构建的项目真的非常好用和简单,所以这里也强调下,尽量使用此类工具进行项目构建, 它可以管理项目的整个生命周期. 可以通过其命令做所有相关的工 ...
- 【Android学习】XML文本的三种解析方式(通过搭建本地的Web项目提供XML文件)
XML为一种可扩展的标记语言,是一种简单的数据存储语言,使用一系列简单的标记来描述. 一.SAX解析 即Simple API for XML,以事件的形式通知程序,对Xml进行解析. 1.首先在Web ...
- IntelliJ IDEA运行eclipse的web项目报错的问题
用IDEA已经有一段时间了, 由于之前的IDEA版本不支持Tomcat服务器, 所以很长一段时间web项目都是由eclipse开发调试. 今天闲来无事下载了一个最新版的IDEA, 按网上的教程, 尝试 ...
- JBoss环境搭建及部署Web项目
http://blog.csdn.net/pop303/article/details/7210290 赶在年前学习了一下JBOSS,之前觉得JBOSS相关资料会有很多,不过现在发现很少,在亚马逊出也 ...
随机推荐
- 通过监控线程状态来保证socket服务器的稳定运行
云平台中使用的socket服务器是我们自己定义一套通信协议,并通过C#实现的一个socket服务. 该服务目前是和web服务一起运行在IIS容器中,通过启动一个永不退出的新线程来监听端口. 在开发的初 ...
- Jenkins+SVN+tomcat持续集成发布
有代码更新后重新打包到tomcat再发布,是不是很烦? 看了下面的东西你就不会烦了. SVN或者git等代码版本控制工具不说了,如果是本地开发,也可以安装一个svn server端 jenkins下载 ...
- hdu4833 Best Financing（DP）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4833 这道题目关键的思想是从后往前dp,dp[i]表示在第i处投资xi能获得的最大收益,其中xi表示从 ...
- 读《linux内核完全注释》的FAQ
以下只是个人看了<linux内核完全注释>的一点理解,如果有错误,欢迎指正! 1 eip中保存的地址是逻辑地址.线性地址还是物理地址? 这个应该要分情况.eip保存的是下一条要执行的指令地 ...
- iOS - 类扩展与分类的区别
类扩展 (Class Extension也有人称为匿名分类) 作用: 能为某个类附加额外的属性,成员变量,方法声明 一般的类扩展写到.m文件中 一般的私有属性写到类扩展 使用格式: @interfac ...
- 《HelloGitHub月刊》第07期
最近工作上的事比较多,<HelloGitHub>月刊第07期拖到月底才发. 本期月刊对logo和月刊的排版进行了优化,不知道大家的反馈如何,还望大家多多反馈,让<HelloGitHu ...
- 2014/11/06 Oracle触发器初步 2014-11-06 09:03 49人阅读 评论(0) 收藏
触发器我就不多解释了,保证数据的完整性的神器,嗯..也是减少程序员工作托管给数据库操作的好帮手.就不讲一些大道理了.通俗点,我们对数据库的操作,无非就是增 删 改 查. 触发器就是在删,改,增的时候( ...
- 微信公众账号 token 验证失败 解决办法
问题:微信公众账号 开发过程中配置 token 提示 验证失败 如下图: 点击修改配置: 填写相关url与token(自定义):点击提交,会出现 出现这种情况,主要是对相关参数不熟悉,要了解url与 ...
- [Web API] Web API 2 深入系列(5) 特性路由
目录 1. 特性路由注册 2. 路由解析 - 生成DataTokens - 选择HttpController - 选择Action 特性路由的目的在于更好的提供restful架构的接口,最近好忙(懒) ...
- Objective-C 对象（内容根据iOS编程编写）
开发iOS程序需要使用 Objective-C 语言和Cocoa Touch框架.Objective-C 源于 C 语言,是 C 语言的扩展. Cocoa Touch框架是一个Objective-C类 ...