Easyui弹出Dialog时，Dialog中的Combobox的url会加载两次，不明原因，只能其他方法解决。

         一直不擅长UI，也可以说UI一直是我很头疼的事情，可现在公司都人手缺乏，恨不能你一个人把公司的活全担了，然而我又不能一夜之间变成美工，没办法，只能借助界面组件，extjs是好，不免费，所以，我选择了easyui。我用的easyui是1.4.4，jquery为1.11.3。

        不得不说easyui用起来确实很easy，但也确实有很多问题让你摸不着头脑，有时候，去解决一个easyui的问题，竟然比重新设计一个模块用的时间还长，受制于人，受制于自己的技术，没办法啊。

        这次碰到的问题就是我死活都查不出来原因的。

        我主页面（A）是一个gridlist，上面一个按钮，点击会弹出增加页面（B），主页面A中使用的是dialog，在A中代码如下：

<div id="inputdialog"
		data-options="iconCls:'icon-save',resizable:true,modal:true,closed: false,collapsible:false,cache: false"></div>

        然后B就是一个Input页，具体内容我就不写了，反正就是简单的一个easyui输入框，其中包括两个combobox的下拉列表，都是从服务器端获取数据的。这里不得不说两个问题：

        一、我的页面用了sitemesh；

        二、用过easyui的Dialog弹出新页的人应该知道，在上述B页中，只有Body内的代码才会载入，也就是说，如果你在这个页面有javascript，要把角本写入到body内，包括link的style和js文件也一样，否则（比如说你写到了head里），如果你的主页面A里没有这些角本和css，你这个B页面在A页面弹出后，是不能执行这些角本的。当然，你如果单独打开这个B页，不管写哪儿都一样。

        我主页面里加载了easyui的css和javascript，input的sitemesh模板页也有easyui的css和js，但肯定会在head中，这是为了可以随意切换弹出和单独页面方式而无需改代码。这时，奇怪的事情发生了，上面说了，我的B页里有两个下拉列表，是从服务器端获取数据的，其中一个直接在data-options中写入了url，而另一个没写url，而是根据前面下拉框的选值在onSelect方法中再加载url的，代码如下：

<td >所属省份 <input id="province"
					name="province" class="easyui-combobox"
					data-options="url:'province.action',valueField: 'name',textField: 'name',          
        onSelect: function(rec){
            var url = 'regonSelections.action?parent_id='+rec.id;
            $('#city').combobox('reload', url);
        }, required:true"
					style="width: 150px;" >

				</td>
<td>所属城市 <input id="city" name="city"
					class="easyui-combobox"
					data-options="valueField:'name',textField:'name', required:true"
					style="width: 150px;">

				</td>

        奇怪的事情发生了，这个页面一弹出来，就会执行provice.action两次，而单独执行这个页面，就只执行一次。

        是不是重复加载了easyui造成的呢？试验一下，我在B页上加载了两次easyui的文件，OK，单独执行B页确实也会执行两次province.action。

        那是这个问题吗，难道弹出的dialog也会加载head中的文件了？于是我把input页也就是B页sitemesh模板页中的css和js链接全去掉，单独执行起来都不渲染了，看源代码这个页也没有任何外部的链接文件了，好，用A页弹出，province.action仍是执行两次，这不见鬼吗?

        最可气的是，弹出的页面，你根本看不到源码，你不知道到底弹出了个什么鬼。

        最后没办法，因为第二个下拉框是根据第一个下拉框的值才加载URL的，没有出现加载两次的问题，又受到下面文章《easyui combobox 点击下拉框才加载数据》的启发，最终用第一个下拉列表中不写url而在其onShowPanel方法中加载url的方法解决了这个问题。代码如下：

<td >所属省份 <input id="province"
					name="province" class="easyui-combobox"
					data-options="valueField: 'name',textField: 'name',          
        onShowPanel:function(){
        	var s=$(this).combobox('getData');
		    if(s.length==0){
		       var url= 'province.action'
		       $(this).combobox('reload',url);
		    }
        }, onSelect: function(rec){
            var url = '../basedata/regon!regonSelections.action?moduleid=${module.id}&parent_id='+rec.id;
            $('#city').combobox('reload', url);
        }, required:true"
					style="width: 150px;" value="${city }">

				</td>
<td>所属城市 <input id="city" name="city"
					class="easyui-combobox"
					data-options="valueField:'name',textField:'name', required:true"
					style="width: 150px;">

				</td>

        问题虽然暂时解决了，但是为什么这个combobox直接写url而从dialog弹出的时候会加载两次url始终不解。记录于此希望高人解答。

终于找到原因了：

原来我弹出dialog时，是用的以下代码

popdialog.dialog({
			title : dialogtitle,
			width : dialogwidth,
			height : dialogheight,
			href : url
		});
popdialog.dialog('open');

其实easyui在定义dialog也就是上面那条语句时，已经打开了dialog，页面已经加载，再用下面open页面第二次加载，所以会造成执行两次。