`

JSP引入含有ExtJs定义的组件的js文件并同步请求

    博客分类:
  • JS
 
阅读更多


经常遇到这样的情况:年份、单位(显示当前登录用户所属单位)等数据都加载完,然后根据这些查询条件,自动加载数据显示在下面的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 组件 使用

    总之,掌握ExtJS 3.1组件的使用,不仅需要熟悉其组件模型、样式系统和JavaScript API,还需要理解如何与后端(如JSP)进行数据交互,以及利用源码和工具提升开发体验。只有这样,才能充分利用ExtJS 3.1的强大功能,...

    extjs ajax同步请求所需js

    标题中提到的"extjs ajax同步请求所需js"是指ExtJS框架中用于执行同步Ajax请求的相关JavaScript代码。在ExtJS中,Ajax请求通常通过`Ext.Ajax`对象来实现。与传统的异步请求不同,同步请求会阻塞浏览器,直到请求完成...

    extjs3.0 ajax 同步请求

    ### ExtJS 3.0 AJAX 同步请求详解 #### 一、引言 ExtJS 是一款基于 JavaScript 的开源框架,用于构建现代化的 Web 应用。它提供了丰富的 UI 组件以及强大的数据处理能力,使得开发者能够快速地开发出高质量的企业...

    Extjs配置文件和示例文件

    而js程序文件则是实现具体功能的JavaScript代码,比如定义组件、处理用户交互、操作数据等。 例如,一个简单的JSP页面可能如下: ```jsp &lt;!DOCTYPE html&gt; &lt;script src="extjs/resources/ext-theme-neptune-all...

    jSP+EXTJS实现upload

    1. `UploadDialog.js`:这是EXTJS的UploadDialog组件的源代码或配置文件,定义了上传对话框的行为。 2. `jsp文件`:可能有多个JSP文件,如`upload.jsp`,用于处理前端发送的文件上传请求,以及`success.jsp`,用于...

    EXTJS3.0多文件上传组件

    UploadPanel.js会封装SWFUpload的功能,并与EXTJS的组件系统集成,提供了一种声明式的配置方式,使得开发者可以轻松地在EXTJS应用中嵌入多文件上传功能。 在`UploadPanel.js`中,开发者可以通过设置各种配置项来...

    批量上传文件 EXTJS文件上传 上传组件

    EXTJS是一种基于JavaScript的前端框架,它提供了丰富的用户界面组件,包括用于文件上传的组件。在EXTJS中,实现批量上传文件是一项常见的需求,尤其在处理大量数据或媒体文件时。EXTJS的文件上传组件提供了方便的...

    EXTJS 多文件上传

    `MultiFileUploadField.js` 文件是EXTJS框架中实现`MultiFileUploadField` 功能的具体代码,它可能包含了组件的定义、事件处理函数、上传逻辑等。通过阅读和理解这个文件,开发者可以更深入地了解EXTJS如何处理多...

    Extjs树分页组件扩展

    在ExtJS中,树形(Tree)组件是一种用于展示层级数据的强大工具,它允许用户以树状结构浏览和操作数据。然而,在处理大量数据时,一次性加载所有节点可能导致页面响应变慢,这时就需要引入分页功能。"Extjs树分页...

    ExtJS原生多文件拖动上传组件

    ExtJS原生多文件拖动上传组件 使用时修改包路径 1.多文件上传 2.支持拖动上传 3.支持图片压缩 4.支持图片合并 5.文件排序 可扩展实时图片预览 api //初始化画板 initCanvas //上传文件窗口 uploadWindow //初始化...

    extjs4.2 最小核心文件

    ExtJS 4.2 是一个流行的JavaScript框架,用于构建富客户端Web应用程序。它提供了一整套组件、布局管理和数据绑定机制,使得开发者可以创建复杂的、交互式的用户界面。"extjs4.2 最小核心文件"这个标题所指的是运行一...

    ExtJS验证上传文件类型

    在 ExtJS 中,我们可以使用 field 组件的 validator 验证器来验证文件类型。Validator 是 filefield 的一个配置项,它的值是一个 function,该函数有唯一的参数 value(文本框中的值),函数体中对这个 value 进行...

    EXTJS 上传组件及示例

    EXTJS 是一款基于JavaScript的富客户端应用开发框架,由Sencha公司开发,它提供了一整套组件化的用户界面元素和强大的数据绑定功能。在EXTJS 中,上传组件是用于实现文件上传功能的关键部分,这对于创建交互性强、...

    ExtJS开发插件及Ext包

    - 开发插件通常涉及创建一个新的JavaScript文件,定义一个类并扩展自`Ext.util.Plugin`或`Ext.grid.Panel`等特定组件的Plugin接口。 - 插件的核心方法是`init`,在这个方法中,你可以向关联的组件添加事件监听器、...

    ExtJs文件上传组件(UploadDialog)

    在ExtJS中,UploadDialog是一个专为文件上传设计的组件,它提供了用户友好的界面,允许用户选择并上传多个文件到服务器。这篇博客文章(虽然链接无法直接访问,但我们可以根据已知信息推测内容)可能详细介绍了如何...

    extjs开发需要的最少文件

    1. `js`目录:这是ExtJS的核心JavaScript文件所在的地方,其中包含`ext-all.js`或`ext-core.js`(基础库)、`ext-lang.js`(语言文件,支持国际化)、`ext.js`(完整的框架,包括所有组件和功能)等。开发时,根据...

    extjs portal组件代码

    要运行EXTJS 2.0的Portal组件代码,你需要确保你的开发环境中已经安装了EXTJS库,并创建了一个基本的HTML页面来引入EXTJS库和相关的CSS样式。然后,将提供的"chapter15"文件夹中的代码集成到你的项目中。这个文件夹...

    ExtJs各组件简单应用例子导入到eclipse即可

    这通常包括一个或多个HTML文件(用于展示组件)、JavaScript文件(包含ExtJS库和示例代码)、以及可能的CSS文件(用于样式定义)。 4. **配置项目结构**:确保HTML文件(如index.html)设置为项目的默认启动文件。...

    利用jsp+Extjs实现动态显示文件上传进度

    需求来源是这样的:上传一个很大的excel文件到server, server会解析这个excel, 然后一条一条的插入到...当用户点“上传”之后,form被提交给uploadController.jsp,同时用js启动一个ajax请求到processController.j

Global site tag (gtag.js) - Google Analytics