使用Intellij IDEA搭建Ext JsMVC web项目
2016-05-06 00:27
381 查看
由于自己从android开发转来学习web开发,最近在学习Jsp,之前接触过一点Extjs,所以用jsp来配合ext试试。
1、组织你的代码,让它易于维护
2、减少你的代码量
View看名字你就爱猜到了,对,没错,用来显示的组件。
ControllersControllers一般就是做一些操作的地方。
好了,先有个大概的认识,接下来开始实际操作。
本例演示用的开发工具是Intellijidea
2、创建完毕后,项目目录如下
src里放的就是java代码,web就是我们的项目根目录。此时还需要配置你的Tomcat容器,指定你的项目web路径。具体如下
3、点击IDE右上角的三角形editConfigurations,之后在左边点击+,寻找TomcatServer,然后点击Local。这样一个Tomcat配置项就出现了
4、Tomcat配置项添加之后还需要指定Tomcat的目录,和web项目的目录,只需要选定你的Tomcat目录和你项目的web文件夹。
这样一个web项目就可以运行了,点击右上角run,在浏览器里输入localhost:8080可以访问就到下一步。
在web文件夹新建一个js文件夹,把extjs的sdk放入,然后在首页引入
index.jsp代码如下
这样index.jsp就能够使用ext了,注意最后一行script饮用了app.js,这是ext应用的开始的地方。
在文章开始说到ext官网给出的MVC文件结构都是在app文件夹之后的,所以在web下新建一个app文件夹
此时你再刷新index.jsp,效果是这样了,完全没写什么样式,是不是很酷,而且你可以根据皮肤换效果
创建之后还要在application中引用
Ext.application({
...
controllers:[
'Users'
],
...
});
当在浏览器中访问index.jsp的时候,由于在applicaton在指定了controller,所以controller会自动加载,controller中的init函数会在Application类的lauch函数之前调用。
打开浏览器打开console控制台会发现输出了InitializedUsers!ThishappensbeforetheApplicationlaunchfunctioniscalled
Controller的init函数通常会调用-control()来设置事件监听。
如下:
在init函数中调用了control,查找viewport类下的任何panel类,render表示显示事件,即当panel显示是输出Thepanelwasrendered
修改为上面代码,再刷新,console控制台就打印了。
看到这里,基本的事件处理就演示了,在深入了解之后就可以做更多事件了,哈哈。好了,下面来看view
注意这里define之后的名字,‘AM.view.user.List’,AM是我们创建application时指定的name,view对呀mvc的view,也就是view文件夹下user文件夹下的List,其他所有文件都是按照这个模式的,就是mvc。
view创建好之后,需要在Controller里引用,由于用了weight.userlist来作为alias别名,所以在Controller中可以直接使用别名引用
还记得之前在application中在launch之后直接显示了一个panel吗,现在有了自己的view,我们就不用panel了,直接将view添加到application
这样在启动之后就会加载view了,重新刷新浏览器,效果如图:
简单的设置了数据源指定grid的columns就可以显示了是不是很酷,可惜现在的数据不是真实数据。
之前在controller中监听了panel的render事件,不过由于是显示事件所以可能感觉不爽。结下来我们操作grid。
只是简单的修改了control中的代码,监听userlist,itemdbclick代表的是双击事件,指向了editUser,监听的输入了Doubleclickedon’+record.get(‘name’)
再次刷新,双击
那我们要是想直接编辑gird呢
编辑的时候肯定需要一个form,来看代码
上面代码定义了一个用来显示的window,其中包含了一个form表单和两个按钮。
那么我们要contoller里肯定需要在双击的时候显示window,将原始数据填入form。
好了,上代码
需要在Controller中引用stores
这样在view里我们就可以直接使用store
接下来到model
store和controller里需要引用model,
这样和之前的效果一样。
store能够从服务端加载数据用来显示在view中。由于篇幅有限就暂时不做介绍了。这里主要讲解Extjs的MVC。
其实就是以Ext.application为开始,指定了项目名之后,
命名就以项目名.view或controller或store或model.文件名。
中间你可以加根据功能区分的文件夹,这样就很好管理和维护了。
最后附上一下demo的文件结构
哈哈,extjs的mvc是不是很好理解了,如何在src也用上MVC就更好了。点个赞呗。
源码下载
ExtJS介绍
extjs是一个javascript框架,它的好处就是有它自己的界面和事件处理。我们根据它的语法就可以实现我们想要的功能,具体我就不介绍了,自己百度。ExtMVC结构介绍
不管任何时候,做一个大项目总是很烦的。因为大,所以开发的时候很难去组织,维护的时候就更别说了。随着业务增长肯定更头疼了。Ext的MVC和你在其它地方了解到的所以MVC的功能一样,它的目的就是:1、组织你的代码,让它易于维护
2、减少你的代码量
ExtMVC结构组成
Model就是字段和数据,类似于java当中的实体beanView看名字你就爱猜到了,对,没错,用来显示的组件。
ControllersControllers一般就是做一些操作的地方。
MVC文件结构
先来看一下官方文档给出的一张图好了,先有个大概的认识,接下来开始实际操作。
本例演示用的开发工具是Intellijidea
项目搭建
无论用什么工具,最开始的一步当然是创建一个web项目了1、创建一个web项目
1、打开intellij创建一个新项目,之后勾选JavaEE下的Webapplication,选择自己的项目目录一个项目就创建完毕了。2、创建完毕后,项目目录如下
src里放的就是java代码,web就是我们的项目根目录。此时还需要配置你的Tomcat容器,指定你的项目web路径。具体如下
3、点击IDE右上角的三角形editConfigurations,之后在左边点击+,寻找TomcatServer,然后点击Local。这样一个Tomcat配置项就出现了
4、Tomcat配置项添加之后还需要指定Tomcat的目录,和web项目的目录,只需要选定你的Tomcat目录和你项目的web文件夹。
这样一个web项目就可以运行了,点击右上角run,在浏览器里输入localhost:8080可以访问就到下一步。
2、集成ExtJs
1、ext作为一个javascript框架,我们只需要在页面简单的通过引入javascript的方式就可以使用了。在web文件夹新建一个js文件夹,把extjs的sdk放入,然后在首页引入
index.jsp代码如下
<%@pagecontentType="text/html;charset=UTF-8"language="java"%> <html> <head> <title>extjsDemo</title> <linkrel="stylesheet"type="text/css"href="js/extjs/resources/css/ext-all.css"> <scripttype="text/javascript"src="js/extjs/ext-all.js"></script> <scripttype="text/javascript"src="js/extjs/locale/ext-lang-zh_CN.js"></script> <scripttype="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、使用ExtJs的MVC结构
在app.js里创建应用
没个extjs4应用都以一个Application类开始。Application包含了应用文件夹的设置,以及一个启动函数,在Application启动之后会调用。所以我们在app文件夹创建app.js,当然名字你可以随便取,我们在里面写一个ApplicationExt.application({ requires:['Ext.container.Viewport'], name:'AM', appFolder:'app', launch:function(){ Ext.create('Ext.container.Viewport',{ layout:'fit', items:[ { xtype:'panel', title:'Users', html:'Listofuserswillgohere' } ] }); } });
上面的代码通过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('InitializedUsers!ThishappensbeforetheApplicationlaunchfunctioniscalled'); } });
创建之后还要在application中引用
当在浏览器中访问index.jsp的时候,由于在applicaton在指定了controller,所以controller会自动加载,controller中的init函数会在Application类的lauch函数之前调用。
打开浏览器打开console控制台会发现输出了InitializedUsers!ThishappensbeforetheApplicationlaunchfunctioniscalled
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('Thepanelwasrendered'); } });
在init函数中调用了control,查找viewport类下的任何panel类,render表示显示事件,即当panel显示是输出Thepanelwasrendered
修改为上面代码,再刷新,console控制台就打印了。
看到这里,基本的事件处理就演示了,在深入了解之后就可以做更多事件了,哈哈。好了,下面来看view
定义一个Controller
ext含有很多view组件,下面是一个简单的例子,我们在view文件夹下建立List.js代表用户列表,代码Ext.define('AM.view.user.List',{ extend:'Ext.grid.Panel', alias:'widget.userlist',//别名,在其他地方引用可以直接用userlist title:'AllUsers', 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('Doubleclickedon'+record.get('name')); } });
只是简单的修改了control中的代码,监听userlist,itemdbclick代表的是双击事件,指向了editUser,监听的输入了Doubleclickedon’+record.get(‘name’)
再次刷新,双击
那我们要是想直接编辑gird呢
编辑的时候肯定需要一个form,来看代码
Ext.define('AM.view.user.Edit',{
extend:'Ext.window.Window',
alias:'widget.useredit',
title:'EditUser',
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){
varview=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:'AllUsers',
//wenolongerdefinetheUsersstoreinthe`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中。由于篇幅有限就暂时不做介绍了。这里主要讲解Extjs的MVC。
其实就是以Ext.application为开始,指定了项目名之后,
命名就以项目名.view或controller或store或model.文件名。
中间你可以加根据功能区分的文件夹,这样就很好管理和维护了。
最后附上一下demo的文件结构
哈哈,extjs的mvc是不是很好理解了,如何在src也用上MVC就更好了。点个赞呗。
相关文章推荐
- 使用Intellij IDEA搭建Ext JsMVC web项目
- js一些方法的扩展
- 扩展原生js的一些方法
- javascript实现平滑无缝滚动
- javascript创建对象的几种模式介绍
- 浅析在javascript中创建对象的各种模式
- JavaScript中的原型继承基础学习教程
- JS平滑无缝滚动效果的实现代码
- JavaScript数组方法总结分析
- 带你一分钟理解 JavaScript 闭包
- WdatePicker.js用法(转)
- 20150207--JS巩固与加强5
- JavaScript 多物体动画
- 在js中使用localeCompare函数排序出现问题
- 谷歌浏览器中,js首次打印,图片没显示
- 20150206--JS巩固与加强4-02
- 20150206--JS巩固与加强4
- JavaScript高级程序设计读书笔记——String总结
- 在Visual Studio中配置BabylonJS开发环境
- 天气JSON接口