关于在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");}  )}