使用ExtDirectSpring整合Spring3和ExtJs4 - 命运之惑 - ITeye技术网站
博客分类：
ExtDirectSpring是一个用于ExtJs4直接调用远程Spring方法的第三方库。我们不再需要在spring方法中封装json对象供外界调用，ExtJs4也不再需要手动解析远程服务器返回过来的Json对象，所有这些操作都由ExtDirectSpring去处理，ExtJs4只需要象调用本地方法一样去操作远程资源。
ExtDirectSpring主页地址:
/ralscha/extdirectspring
以下是一个简要的工程搭建过程（我们假设你已经创建了一个Spring MVC的工程)
1: 在pom.xml中添加相关依赖
&dependency&
&groupId&ch.ralscha&/groupId&
&artifactId&extdirectspring&/artifactId&
&version&1.2.0&/version&
&/dependency&
&dependency&
&groupId&commons-fileupload&/groupId&
&artifactId&commons-fileupload&/artifactId&
&version&1.2.2&/version&
&/dependency&
&dependency&
&groupId&commons-io&/groupId&
&artifactId&commons-io&/artifactId&
&version&2.1&/version&
&/dependency&
2: 将含有@ExtDirectMethod标签的类所在包添加到Spring组件管理中
注：所有被暴露出来允许远程访问的方法都需要添加@ExtDirectMethod注解
&context:component-scan base-package="com.train.extdirectspring,ch.ralscha.extdirectspring" /&
3: 在Spring配置文件中添加对ExtDirectSpring的全局配置信息
&bean id="extDirectSpringConfiguration" class="ch.ralscha.extdirectspring.controller.Configuration" p:timeout="12000"
p:maxRetries="10" p:enableBuffer="false"&
&property name="exceptionToMessage"&
&entry key="java.lang.IllegalArgumentException" value="illegal argument" /&
&entry key="org.springframework.beans.factory.NoSuchBeanDefinitionException"&
&/property&
到此为止，服务器端的配置基本完成，下面开始讲述页面前端如何配置调用远程后端方法。
4: 下载并复制ExtJs4的关联文件到工程中去
从官网下载并解压/products/extjs
复制文件夹locale, resources及文件ext-all-debug.js and ext-all.js到WEB工程目录中
5: 引入ExtJs4的CSS和JS文件到你的页面中
&link rel="stylesheet" type="text/css" href="/resources/extjs/resources/css/ext-all.css" /&
&script type="text/javascript" src="/resources/extjs/ext-all-debug.js" &&/script&
6: 引入ExtDirectSpring提供的api.js/api-debug.js文件到你的页面中
&script type="text/javascript" src="/spring/api-debug.js"&&/script&
注：这里的/spring/前缀取决于你的web.xml中的Spring Dispatcher的配置。并且该api-debug.js是由系统生成而非一个静态文件。
7: 引入用于当前页面布局的js文件
&script type="text/javascript" src="/SpringMVC/resources/app/welcome.js"&&/script&
注：该文件由用户自定义
从下面开始我们就要开始编写Extjs代码，我们采用Extjs的MVC框架，编写的一般过程为：编写页面布局js(上面的welcome.js) -& 编写model(MVC) -& 编写store(这个对象主要用于数据集的展示，如实现分页排序等功能) -& 编写视图层(MVC)
-& 编写控制层(MVC) -& 编写SpringMVC方法与ExtJs控制层交互
8: 编写上面定义的welcome.js
Ext.Loader.setConfig({
enabled: true
Ext.require('Ext.direct.*', function() {
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
Ext.application({
controllers : [ 'sample'], //与第12个步骤中文件名一致
autoCreateViewport : true,
name : 'Mtx', //应用名，可以任取，不重复即可
appFolder: 'resources/app', //这里配置当前应用下你的ExtJs MVC代码的存放路径
launch : function() {
Ext.create('Ext.container.Viewport', {
items : [ {
xtype : 'sampleList', //参考第11步中的视图别名
layout : 'fit',
margins: 5
编写模型Model
按照ExtJs的规范，我们默认将model文件存放在resources/app/model目录下，其中'resources/app'由第8个步骤中的appFolder配置所决定,model是默认的模型存放文件夹名。我们在这里创建一个路径为resources/app/model/sample.js的用于描述model的文件。我们只简单定义id和name两个字段(实际开发中，一般需要根据数据库中的表结构来定义)
Ext.define('Mtx.model.Sample', {
extend : 'Ext.data.Model',//所有定义的model对象都需要继承该父对象
fields : [ {
name : 'id',
type : 'int'
name : 'name',
type : 'string',
type : 'direct',
read : helloController.read, //这里的四个方法是ExtJs框架默认集成好的，一般我们只需要实现对应的方法就可以轻松实现增删改查操作
create : helloController.save,
update : helloController.save,
destroy : helloController.destroy
reader : {
root : 'records'
10: 编写store(这个对象主要用于数据集的展示，如实现分页排序等功能)
和model一样，store的默认存放路径为$appFolder+'/store', 这里对应路径为resources/app/store/sample.js
Ext.define('Mtx.store.Skus', {
extend: 'Ext.data.Store',
model: 'Mtx.model.Sample', //参考第9步中定义的model
autoLoad: true,
pageSize: 25,
remoteSort: true,
autoSync: true,
sorters: [ {
property: 'name',
direction: 'ASC'
11: 编写视图层View
与上面一样，store的默认存放路径为$appFolder+'/view', 这里对应路径为resources/app/view/sample.js
Ext.define('Mtx.view.Sample', {
extend : 'Ext.grid.Panel',
alias : 'widget.sampleList', //别处如果需要引用该View,可以使用别名sampleList
store : 'sample',//必须与第9步中创建的model文件名一致
initComponent : function() {
Ext.applyIf(me, {
columns : [ {
xtype : 'gridcolumn',
dataIndex : 'id', //列中显示数据在model中与之对应的变量名
text : 'ID', //表中的列名
xtype : 'gridcolumn',
dataIndex : 'name',
text : 'Name',
dockedItems : [ {
xtype : 'toolbar',
dock : 'top',
items : [ {
fieldLabel : 'Filter', //增加过滤功能，根据输入的字符与name字段进行模糊匹配
labelWidth : 40,
xtype : 'textfield',
itemId : 'filtertextfield'
}, '-&', {
xtype : 'pagingtoolbar', //加上分页功能
store : me.getStore(),
displayInfo : true
me.callParent(arguments);
12: 编写控制层Controller
还是和上面一样，store的默认存放路径为$appFolder+'/controller', 这里对应路径为resources/app/controller/sample.js。控制层主要用于为视图中的组件绑定不同的事件。
zhoulei984623
浏览: 352614 次
来自: 苏州
工作了好多年，今天刚好用到它。
有一个外部引用谷歌api没办法download
这里写错了应该。。。--sm-plugins=......,+ ...
spring的 threadpool
没有submit方法呀 ...人气：21307
访问用户量：24
笔记经验：
总积分：116
级别：普通会员
搜索本笔记
ta的交流分类
ta的全部笔记
浏览(15668)|(2)
&&交流分类：|笔记分类:
&&&&&1.1 Extjs简介
&&& &Extjs是一个类似于Jquery的ajax框架。他主要是用于创建前端用户界面。其中ext的表格控件都高居榜首。单选行，多选行，高亮显示选中的行，拖拽改变列宽度。按列排序。这些基本功能都是extjs的轻量级实现，自动生成行号，支持checkbox全选。动态选择显示那些列。支持本地以及远程分页。可以对单元格按照自己的想法进行渲染。
&&&&& 目前Extjs的版本很多。可以直接在官方网站进行下载：。进入官方网站可以看到目前的版本已经有ext-4.1.1了。但是这里的讲解用的是ext-3.4.0。将下载到的ZIP文件解压，目录结构如下所示：
&&& 1.2 Extjs的应用
&&& 应用extjs需要在页面中引入extjs的样式和extjs的库文件。样式文件为resources/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js，以及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。
&link rel=&stylesheet& type=&text/css& href=&ext-3.4.0/resources/css/ext-all.css& /&&script type=&text/javaScript& src=&ext-3.4.0/adapter/ext/ext-base.js&&&/script&&script type=&text/javaScript& src=&ext-3.4.0/ext-all.js&&&/script&
&&& 1.2.1 测试Extjs是否可以使用
&&&& &html&&head&&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&&title&测试HelloWorld&/title&&!-- ext-base.js表示框架的基础库。。。ext-all.js表示框架的核心库 --&&link rel=&stylesheet& type=&text/css& href=&ext-3.4.0/resources/css/ext-all.css& /&&script type=&text/javaScript& src=&ext-3.4.0/adapter/ext/ext-base.js&&&/script&&script type=&text/javaScript& src=&ext-3.4.0/ext-all.js&&&/script&&script&& Ext.onReady(&function(){&&Ext.MessageBox.alert(&hello&,&HelloWorld&);&//hello表示弹出框的标题。。HelloWorld表示弹出框的内容&&var win = new Ext.Window({title:&hello&,width:300,height:200,html:'&h1&Hello,easyjf open source&/h1&'});&}&& & );&/script&&/head&&body&&/body&&/html&
显示结果图如下：
&& 1.2.2 extjs表格控件的使用
表格由类Ext.grid.GridPanel定义，继承自Panel,其中xtype为grid，ExtJS中，表格Grid必须包含列定义信息，并指定表格的数据存储器Store。表格的列信息由类Ext.grid.ColumnModel定义，而表格的数据存储器由Ext.data.Store定义。
示例代码如下：
&html&&head&&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&&title&表格&/title&&!-- ExtJs的表格功能非常的强大，包括排序，缓存，拖动，隐藏某一列，自动显示行号，列汇总，单元格编辑等实用功能。数据存储器根据解析的数据不同分类JsonStore,SimpleStore,GroupingStore.&--&&link rel=&stylesheet& type=&text/css& href=&ext-3.4.0/resources/css/ext-all.css& /&&script type=&text/javaScript& src=&ext-3.4.0/adapter/ext/ext-base.js&&&/script&&script type=&text/javaScript& src=&ext-3.4.0/ext-all.js&&&/script&&script&& Ext.onReady(function(){&& && &//创建复选框对象。singleSelect=true表示当前的复选框只能作为单选按钮来使用。&& &var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:true});&&&& &//定义表格的列标题& & var cm = new Ext.grid.ColumnModel([&&&&//new Ext.grid.RowNumberer(),&& 显示行号&&&&sm,& &&&&&&&& {header:&编号&,dataIndex:&id&},& &&&&&&&& {header:&名称&,dataIndex:&name&},& &&&&&&&& {header:&描述&,dataIndex:&description&}& &&& ]);&& &//对表格填充数据&& &var data = [&& &&&&&&&& [&1&,&&,&&],&& &&&&&&&& [&2&,&&&,&&],&& &&&&&& &[&3&,&333333&,&&],&& &&&& &[&4&,&&,&&],&& && &&[&5&,&&,&&]&& &&&&&&&& ];&& &//定义数据源&& &var ds = new Ext.data.Store({&& &&&proxy:new Ext.data.MemoryProxy(data),&& &&&reader:new Ext.data.ArrayReader({},[&& &&&&&&&&& {name:&id&},&& &&&&&&&&& {name:&name&},&& &&&&&&&&& {name:&description&}&& &&&& ])&& &&& && &});&& &ds.load();&& &&& &var grid = new Ext.grid.GridPanel({&& &&//enableColumnMove: false, //禁止拖放列&& &&//enableColumnResize: false,& //禁止改变列的宽度&& &&stripeRows: true,& //斑马线效果&& &&//loadMask: true,& //读取数据时的遮罩和提示功能&& &&renderTo:Ext.getBody(),&& &&ds:ds,&& &&cm:cm,&& &&sm:sm,&& &&width:300,&& &&autoHeight:true,&& &&//height:80,&& && &&&& &&//初始化一些字段名称后的参数。。。&& &&viewConfig: {&& &&&&&&&& columnsText: '隐藏/显示列',& //设置下拉菜单提示文字&& &&&&&&&& scrollOffset: 15,&&& //设置右侧滚动条的预留宽度&& &&&&&&&& sortAscText: '升序',&&& //设置下拉菜单提示文字&& &&&&&&&& sortDescText: '降序',&& //设置下拉菜单提示文字&& &&&&&&&& forceFit: true&& //自动延展每列的长度&& &&&& }&& &});& });&/script&&/head&&body&&/body&&/html&
显示结果如下图所示：
精品视频课程推荐
深入浅出的讲解JavaBen的写法、JavaBean的用法、JavaBean的实现机制、JavaBean对应翻译的代码理解。
内容概述：Shiro是目前最热门、最易用、功能超强大的Java权限管理框架，强烈推荐，每个项目都必备的权限管理技术！通过本课程，你将从零开始直到彻底掌握Shiro的相关开发知识，达到可以进行实际项目开发的能力。包括：权限管理基础、Shiro入门、配置、身份认证、授权、Realms、Session管理、和Spring的集成、Web、Cache等众多开发细节技术
技术要点：源码级分析Shiro的授权过程、自定义开发Realm、多个Realms的开发配置、自定义开发AuthenticationStrategy、自定义开发自定义SessionDAO、和Struts2+Spring3的集成（包括修正struts2的bug）、Shiro和SpringMVC+Spring3的集成、包装使用其他的Cache框架、缓存数据同步更新的解决方案等等实际开发中常用的内容
深入浅出的讲解Struts2对AJAX的支持，包括使用stream的Result Type来应用Ajax；使用Struts2提供的Ajax标签；使用JSON插件
JavaScript的内置对象--Array、String、Date、Math等，可以通过DOM对象进行对象控制，创建控制菜单及复选框的控制，创建二级联动列表框及列表框选项的移动，JavaScript项目，创建基于JS的商品管理系统。
创建规范的XML文档，DTD的作用，并且可以根据要求创建私用的DTD，通过JavaScript解析XML DOM
浏览(15668)|(2)
&&交流分类：|笔记分类:
EXT是不是虎4.x了
版权所有 Copyright(C) 私塾在线学习网温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(2701)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'extjs 3.4 开发前准备',
blogAbstract:'最近有时间要好好研究一下extjs 代码, 上了一个extjs的官网, 发现版本更新的特别快, 2012年7月已经发布4.1版本了....因为以前弄过3.x版本, 所以对extjs还是有一定的熟悉程度;& extjs相关联的技术也是比较熟悉的, 所以特决定: 把extjs3.4的开发前的准备这篇文章写好以后, 好好研究下4.1版本, 后续会写很多观看的感受和例子实现的文章, 详见后续动作 ;下面就开始我的ExtJS学习之路吧……1. extjs的下载:4.1 版本: /products/extjs/download/ext-js-4.1.1/16833.4 版本:/products/extjs3/download/ext-js-3.4.0/203',
blogTag:'extjs',
blogUrl:'blog/static/1',
isPublished:1,
istop:false,
modifyTime:6,
publishTime:3,
permalink:'blog/static/1',
commentCount:0,
mainCommentCount:0,
recommendCount:1,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list} 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
ExtJS4 1安装与配置
下载积分：30
内容提示：ExtJS4 1安装与配置
文档格式：PDF|
浏览次数：535|
上传日期： 12:14:56|
文档星级：
全文阅读已结束，如果下载本文需要使用
 30 积分
下载此文档
该用户还上传了这些文档
ExtJS4 1安装与配置
官方公共微信Ext3.3.1颜色主题(ext3.3.1-theme) - 很技术，很生活！ - ITeye技术网站
博客分类：
支持ext3.3.X
css文件见附件
下载次数: 1952
论坛回复 /
(6 / 7579)
浏览: 547214 次
来自: 广州
不知道楼主能不能解决下浏览器兼容的问题，目前好像火狐和谷歌浏览 ...
你好！我后台用的是C#，为什么一直上传失败，好像是后台取不到参 ...
楼主,可以给一份源码吗?
capaa52007 写道LZ你好！我用的是Ext4.2 既然 ...