经常遇到这样的情况:年份、单位(显示当前登录用户所属单位)等数据都加载完,然后根据这些查询条件,自动加载数据显示在下面的grid中;由于Extjs是异步请求,往往年份、单位还没有加载完就去请求数据去了,这种情况不是我们想要的。
本人的做法就是年份、单位同步去请求:(如果你有好的方法,请指点!)
一、js文件的引入
与普通的jsp文件引入没有什么区别
<script src="<c:url value="/pms/project/util/SearchToolbar.js"/>"
type="text/javascript"></script>
二、SearchToolbar.js
//调用示例 searchItem.prjYear(width,pathUrl) 返回一个ComboBox对象
//参数说明 width为选择框的大小,pathUrl为项目根路径在jsp中${contextPath}获得
var searchItem = {
//年度查询条件
prjYear: function(width, showAll){
var url = '/project/manage/common.do?action=years';
if(showAll){
url +="&withall=true";
}
var yearComboxStoreData = Synchronize(pathUrl+ url +"&t="+ Math.random());//同步请求
var yearCombox = new Ext.form.ComboBox({
id: 'project-year',
width: width,
triggerAction: 'all',
mode: 'local',
displayField: 'name',
valueField: 'id',
//typeAhead: true,
forceSelection: true,
selectOnFocus: true,
editable: false,
store: new Ext.data.Store({
data:yearComboxStoreData,
reader: new Ext.data.JsonReader({
idProperty: 'id'
}, Ext.data.Record.create(['id', 'name']))
})
});
//设置默认值
Ext.getCmp('project-year').setValue(new Date().getFullYear());
return yearCombox;
},
//单位
prjDpt: function(width){
var url = "/project/manage/common.do?action=departments";
var dptsComboxStoreData = Synchronize(contextPath+url +"&t="+ Math.random());//同步请求
var dptsCombox = new Ext.form.ComboBox({
id: 'project-dpts',
listWidth: 350,
width: width,
triggerAction: 'all',
mode: 'local',
fprceSelection: true,
selectOnFocus: true,
displayField: 'showName',
valueField: 'dptid',
editable: false,
store: new Ext.data.Store({
data : dptsComboxStoreData,
reader : new Ext.data.JsonReader({
idProperty: 'dptid'
}, Ext.data.Record.create(['dptid', 'showName']))
})
});
//设置默认值
Ext.getCmp('project-dpts').setValue(dptsCombox.getStore().getAt(0).get('dptid'));
return dptsCombox;
},
//项目编号 searchBuildProject是jsp页面上的查询方法
prjCode: function(width, searchBuildProject){
var prjCode = new Ext.form.TextField({
id:'prjCode',
name:'prjCode',
width:width,
height:20,
listeners : {
//回车事件
specialkey : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
if(typeof searchBuildProject == 'function'){
searchBuildProject();
}
}
}
}
});
return prjCode;
},
//翻页工具条 jsp页面中定义的Store
pageBar : function(store){
var pageBar = new Ext.PagingToolbar({
pageSize : GlobalParam.limit,
store : store,
displayInfo : true,
displayMsg : '显示第 {0} - {1} 条,共 {2} 条',
emptyMsg : '当前没有可以显示的数据 '
});
return pageBar;
}
};
注意:项目编号 searchBuildProject是jsp页面上的查询方法
三、Synchronize.js 同步请求
Synchronize = function(url) {
function createXhrObject() {
var http;
var activeX = ['MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP', 'Microsoft.XMLHTTP'];
try {
http = new XMLHttpRequest();
} catch (e) {
for (var i = 0; i < activeX.length; ++i) {
try {
http = new ActiveXObject(activeX[i]);
break;
} catch (e) {}
}
} finally {
return http;
}
};
var conn = createXhrObject();
conn.open("GET", url, false);
conn.send(null);
if (conn.responseText != '') {
return Ext.decode(conn.responseText);
} else {
return null;
}
};
- 大小: 2.1 KB
分享到:
相关推荐
总之,掌握ExtJS 3.1组件的使用,不仅需要熟悉其组件模型、样式系统和JavaScript API,还需要理解如何与后端(如JSP)进行数据交互,以及利用源码和工具提升开发体验。只有这样,才能充分利用ExtJS 3.1的强大功能,...
标题中提到的"extjs ajax同步请求所需js"是指ExtJS框架中用于执行同步Ajax请求的相关JavaScript代码。在ExtJS中,Ajax请求通常通过`Ext.Ajax`对象来实现。与传统的异步请求不同,同步请求会阻塞浏览器,直到请求完成...
### ExtJS 3.0 AJAX 同步请求详解 #### 一、引言 ExtJS 是一款基于 JavaScript 的开源框架,用于构建现代化的 Web 应用。它提供了丰富的 UI 组件以及强大的数据处理能力,使得开发者能够快速地开发出高质量的企业...
而js程序文件则是实现具体功能的JavaScript代码,比如定义组件、处理用户交互、操作数据等。 例如,一个简单的JSP页面可能如下: ```jsp <!DOCTYPE html> <script src="extjs/resources/ext-theme-neptune-all...
1. `UploadDialog.js`:这是EXTJS的UploadDialog组件的源代码或配置文件,定义了上传对话框的行为。 2. `jsp文件`:可能有多个JSP文件,如`upload.jsp`,用于处理前端发送的文件上传请求,以及`success.jsp`,用于...
UploadPanel.js会封装SWFUpload的功能,并与EXTJS的组件系统集成,提供了一种声明式的配置方式,使得开发者可以轻松地在EXTJS应用中嵌入多文件上传功能。 在`UploadPanel.js`中,开发者可以通过设置各种配置项来...
EXTJS是一种基于JavaScript的前端框架,它提供了丰富的用户界面组件,包括用于文件上传的组件。在EXTJS中,实现批量上传文件是一项常见的需求,尤其在处理大量数据或媒体文件时。EXTJS的文件上传组件提供了方便的...
`MultiFileUploadField.js` 文件是EXTJS框架中实现`MultiFileUploadField` 功能的具体代码,它可能包含了组件的定义、事件处理函数、上传逻辑等。通过阅读和理解这个文件,开发者可以更深入地了解EXTJS如何处理多...
在ExtJS中,树形(Tree)组件是一种用于展示层级数据的强大工具,它允许用户以树状结构浏览和操作数据。然而,在处理大量数据时,一次性加载所有节点可能导致页面响应变慢,这时就需要引入分页功能。"Extjs树分页...
ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...
ExtJS 4.2 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件、布局管理和数据绑定机制,使得开发者可以创建复杂的、交互式的用户界面。"extjs4.2 最小核心文件"这个标题所指的是运行一...
在 ExtJS 中,我们可以使用 field 组件的 validator 验证器来验证文件类型。Validator 是 filefield 的一个配置项,它的值是一个 function,该函数有唯一的参数 value(文本框中的值),函数体中对这个 value 进行...
EXTJS 是一款基于JavaScript的富客户端应用开发框架,由Sencha公司开发,它提供了一整套组件化的用户界面元素和强大的数据绑定功能。在EXTJS 中,上传组件是用于实现文件上传功能的关键部分,这对于创建交互性强、...
- 开发插件通常涉及创建一个新的JavaScript文件,定义一个类并扩展自`Ext.util.Plugin`或`Ext.grid.Panel`等特定组件的Plugin接口。 - 插件的核心方法是`init`,在这个方法中,你可以向关联的组件添加事件监听器、...
在ExtJS中,UploadDialog是一个专为文件上传设计的组件,它提供了用户友好的界面,允许用户选择并上传多个文件到服务器。这篇博客文章(虽然链接无法直接访问,但我们可以根据已知信息推测内容)可能详细介绍了如何...
1. `js`目录:这是ExtJS的核心JavaScript文件所在的地方,其中包含`ext-all.js`或`ext-core.js`(基础库)、`ext-lang.js`(语言文件,支持国际化)、`ext.js`(完整的框架,包括所有组件和功能)等。开发时,根据...
要运行EXTJS 2.0的Portal组件代码,你需要确保你的开发环境中已经安装了EXTJS库,并创建了一个基本的HTML页面来引入EXTJS库和相关的CSS样式。然后,将提供的"chapter15"文件夹中的代码集成到你的项目中。这个文件夹...
这通常包括一个或多个HTML文件(用于展示组件)、JavaScript文件(包含ExtJS库和示例代码)、以及可能的CSS文件(用于样式定义)。 4. **配置项目结构**:确保HTML文件(如index.html)设置为项目的默认启动文件。...
需求来源是这样的:上传一个很大的excel文件到server, server会解析这个excel, 然后一条一条的插入到...当用户点“上传”之后,form被提交给uploadController.jsp,同时用js启动一个ajax请求到processController.j