关于在ArcGIS WebAppBuilder的widget开发中引入EasyUI的一些方法

widget分为两种，一种是弹出式的（点击弹框），一种是一直停留在地图上的，类似于导航条那种widget。前者参考http://blog.csdn.net/liumengcheng/article/details/70177179

下面说一下后者的开发方式

先看效果：

这个就是驻留在屏幕上的widget，跟导航条widget类似。开发方式如下：

首先在框架的index.html中引入EasyUI，这个跟任何普通的项目引入EasyUI都是类似的：

配置config.json，找到驻留屏幕的widget，然后接着往下配置：

{
   "uri":"widgets/XZQList/Widget",
"visible": true,
"position":{"right":18,"top":18,"width":160,"height":30,"relativeTo": "map"},
"version":"2.3",
"id": "widgets_XZQList_Widget_17",
"name":"XZQList"
      }

其实没啥难度，就是参考其他驻留在屏幕上的widget的配置方法

示例中widget的代码结构如下：

Widget.js的代码如下：

define([
        'dojo/_base/declare',
        'dojo/_base/html',
        'dijit/_WidgetsInTemplateMixin',
        'jimu/BaseWidget',
		"dojo/text!./List.html",
        "dojo/dom-construct",
        "dojo/dom-style",
        "dojo/dom-class",
        'dojo/_base/lang',
        "dojo/on",
    ],
    function (declare, html, _WidgetsInTemplateMixin, BaseWidget,ListHTML,
              domConstruct, domStyle, domClass, lang, on) {
        var clazz = declare([BaseWidget], {
            name: 'XZQList',
            //baseClass: 'jimu-widget-BasemapToggle',
            //创建面板
			templateString: ListHTML,
			loadScript:function (url) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = url;
            document.body.appendChild(script);
            },
            startup: function () {
                this.inherited(arguments);
				mainMap=this.map;
				this.loadScript("widgets/XZQList/code.js");
            },
			
            destroy: function () {
            },

            onOpen: function () {
            },

            onClose: function () {
            }
        });

        clazz.inPanel = false;
        clazz.hasUIFile = false;
        return clazz;
    });

这里面的"dojo/text!./List.html"非常重要，就是把外部的html作为文本引入widget的templateString，这是驻留屏幕式widget的GUI界面开发的核心，其实在infoWindow里面引入EasyUI的界面也是一样的，也是通过dojo/text!这种方式引入的：

代码：

//设置弹框
				    this.map.infoWindow.setContent(this.htmlString);
				    //设置infoWindow的html的后台jQuery代码 
				    this.loadScript("widgets/LYCX/code.js");
					var attributes = result.features[0].attributes;
					console.info(attributes);
					this.map.infoWindow.setTitle("楼宇查询:"+attributes.Name);
                    this.map.infoWindow.resize(615, 570);
					
					this.map.infoWindow.show(mapPoint);

List.html内容很简单：

<div>
 <input id="myXZQComboBox" value="全部地区">  
</div>

code.js如下，跟普通的jQuery，EasyUI开发方式没啥区别：

$(document).ready(
	function (){
	   //初始化下拉列表框
	   $('#myXZQComboBox').combobox({    
		url:null,
		valueField:'id',    
		textField:'text'   
		});  
		var data2=[{"id":1,"text":"全部地区","selected":true},{"id":2,"text":"00001白洋湾"},{"id":3,"text":"00002彩香"},
		{"id":4,"text":"00003石路"},{"id":5,"text":"00004留园"}];  
		$('#myXZQComboBox').combobox('loadData', data2);  
		$("#myXZQComboBox").combobox({
			onChange: function (n,o) {
			var code=$('#myXZQComboBox').combobox('getText').substr(0,5);
			console.info(code);
			var layerDefinitions = [];
			if(code=="全部地区"){
			  layerDefinitions[0] = "1=1";
			}
			else
			{
			 layerDefinitions[0] = "code like '"+code+"%'";
			}
			  var suzhouLayer=mainMap.getLayer("suzhouly_48");
			  suzhouLayer.setLayerDefinitions(layerDefinitions);
			}});
	    gisCode();
	}		
);

function gisCode(){
     require([
      "dojo/dom",
      "dojo/on",
	  "dojo/Deferred",
	  "jimu/WidgetManager",
	  "jimu/LayerInfos/LayerInfos",
      "esri/Color",
      "esri/config",
      "esri/geometry/webMercatorUtils",
      "esri/graphic",
      "esri/geometry/Extent",
      "esri/lang",
      "esri/map",
	  "esri/SpatialReference",
	  "esri/tasks/ProjectParameters",
      "esri/symbols/SimpleFillSymbol",
      "esri/symbols/SimpleLineSymbol",
      "esri/symbols/SimpleMarkerSymbol",
      "dojo/domReady!"
    ],
    function (dom, on,Deferred,WidgetManager,LayerInfos,Color, esriConfig, webMercatorUtils, Graphic,Extent,lang,Map,SpatialReference,ProjectParameters,SimpleFillSymbol, SimpleLineSymbol,
      SimpleMarkerSymbol){
		console.info("gis code");
	}
  )
}