JSP引入含有ExtJs定义的组件的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;   
    }   
};