All,
Here are my fixes commented in the code for this sample:
jsong-esristaff
Settings.js:
define([
'dojo/_base/declare',
'jimu/BaseWidgetSetting',
'dojo/_base/lang',
'dojo/_base/array',
'dijit/_WidgetsInTemplateMixin',
'dijit/form/Select',
'jimu/LayerInfos/LayerInfos'
],
function(declare, BaseWidgetSetting, lang, array, _WidgetsInTemplateMixin, Select, LayerInfos) {
return declare([BaseWidgetSetting, _WidgetsInTemplateMixin], {
baseClass: 'jimu-widget-listview-setting',
postCreate: function() {
this.setConfig(this.config);
},
setConfig: function(config) {
this.headerTextNode.value = config.widgetHeaderText;
var layerInfosObj = LayerInfos.getInstanceSync();
var infos = layerInfosObj.getLayerInfoArray();
var options = [];
array.forEach(infos, function(info) {
if(info.originOperLayer.layerType === 'ArcGISFeatureLayer') {
options.push({
label: info.title,
value: info.id
});
}
});
this.layerSelect.set('options', options);
if(config.layerId){
this.layerSelect.set('value', config.layerId);
}
this.layerSelect.on('change', lang.hitch(this, function(value) {
var selectedLayer = layerInfosObj.getLayerInfoById(value);
if(selectedLayer) {
var fieldOptions = array.map(selectedLayer.layerObject.fields, function(field) {
return {
label: field.alias || field.name,
value: field.name
}
});
this.thumbnailSelect.set('options', fieldOptions);
this.titleSelect.set('options', fieldOptions);
if(config.thumbnailField){
this.thumbnailSelect.set('value', config.thumbnailField);
}
if(config.titleField){
this.titleSelect.set('value', config.titleField);
}
}
}));
},
getConfig: function() {
return {
widgetHeaderText: this.headerTextNode.value,
layerId: this.layerSelect.get('value'),
thumbnailField: this.thumbnailSelect.get('value'),
titleField: this.titleSelect.get('value')
};
}
});
});
Widget.js:
define(['dojo/_base/declare',
'jimu/BaseWidget',
'dojo/_base/lang',
'dojo/Deferred',
'dgrid/OnDemandList',
'dgrid/Selection',
"dojo/store/Memory",
"esri/tasks/query",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/symbols/SimpleFillSymbol"
],
function(declare, BaseWidget,
lang, Deferred,
OnDemandList, Selection, Memory,
Query, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol) {
return declare([BaseWidget], {
baseClass: 'jimu-widget-listview',
postCreate: function() {
this.inherited(arguments);
this.headerNode.innerHTML = this.config.widgetHeaderText;
this.featureLayer = this.map.getLayer(this.config.layerId);
var highlightSymbol;
switch(this.featureLayer.geometryType) {
case 'esriGeometryPoint':
highlightSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20, null, '#e74c3c');
break;
case 'esriGeometryPolyline':
highlightSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, '#e74c3c', 3);
break;
case 'esriGeometryPolygon':
highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, '#fff', 2),
'#e74c3c');
break;
}
this.featureLayer.setSelectionSymbol(highlightSymbol);
this.createList();
},
getDataStore: function() {
var def = new Deferred();
var layer = this.map.getLayer(this.config.layerId);
var query = new Query();
query.returnGeometry = false;
query.outFields = ["*"];
query.where = '1=1';
layer.queryFeatures(query, lang.hitch(this, function(featureSet) {
var featureSetRemapped = [];
for(var index in featureSet.features) {
var feature = featureSet.features[index];
featureSetRemapped.push({
'id': feature.attributes[this.featureLayer.objectIdField],
'title': feature.attributes[this.config.titleField],
'thumbnailImg': feature.attributes[this.config.thumbnailField]
});
}
def.resolve(new Memory({
data: featureSetRemapped
}));
}));
return def;
},
createList: function() {
this.getDataStore().then(lang.hitch(this, function(datastore) {
var list = new(declare([OnDemandList, Selection]))({
'store': datastore,
'selectionMode': 'single',
'renderRow': lang.hitch(this, function(object, options) {
return this._createListItem(object);
})
}, this.ListNode);
list.startup();
list.on('.dgrid-row:click', lang.hitch(this, function(evt) {
var row = list.row(evt);
var query = new Query();
query.objectIds = [row.data.id];
this.featureLayer.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW, lang.hitch(this, function(result) {
if(result.length) {
var feature = result[0],
newMapCenter,
geometry = feature.geometry,
extent = geometry.getExtent(),
shape = feature.getShape();
if(extent && extent.getCenter) {
newMapCenter = extent.getCenter();
} else {
newMapCenter = geometry;
}
this.map.centerAt(newMapCenter);
if(shape) shape.moveToFront();
}
}));
}));
}));
},
_createListItem: function(featureObj) {
var listItemRoot = document.createElement('DIV');
listItemRoot.className = 'list-item';
if(featureObj) {
var thumbnailImgWrapper, thumbnailImg, listItemTitle;
if(featureObj.thumbnailImg) {
thumbnailImgWrapper = document.createElement('div');
thumbnailImgWrapper.className = 'thumbnail-wrapper';
thumbnailImg = document.createElement('img');
thumbnailImg.src = featureObj.thumbnailImg;
thumbnailImgWrapper.appendChild(thumbnailImg);
listItemRoot.appendChild(thumbnailImgWrapper);
}
if(featureObj.title && typeof featureObj.title === 'string') {
listItemTitle = document.createElement('H4');
listItemTitle.innerHTML = featureObj.title;
listItemRoot.appendChild(listItemTitle);
if(thumbnailImg)
thumbnailImg.alt = featureObj.title;
}
} else {
listItemRoot.innerHTML = 'NO DATA AVAILABLE';
}
return listItemRoot;
}
});
});
