Как динамически создать диалог Dojo, как на скриншоте ниже, как выполнить событие нажатия кнопки «Сохранить», получить вводимые пользователем значения при нажатии кнопки «Сохранить»?
Создать диалоговое окно, подобное этому
Я попробовал ниже:
У меня есть шаблоны HTML, которые я загружаю в виджеты:
ниже мой HTML-код:
<div style="padding:5px;" id="maindiv">
<div id="dialogconfirmtext">
<table cellspacing="5">
<tr>
<td>
<input id="rdbmh1" type="radio" data-dojo-type="dijit/form/RadioButton" data-dojo-props="name:'manhole',checked:false,value:'false'"
data-dojo-attach-point="BDMH" />
Manhole1
<br />
</td>
<td>
<input type="radio" data-dojo-type="dijit/form/RadioButton" data-dojo-props="name:'manhole',value:'false'" />
Foul Sewer Manhole
</td>
</tr>
</table>
<table id="tblMH1">
<tr>
<td><label for="name">COVER LEVEL (cm):</label></td>
<td>
<div data-dojo-type="dijit/form/Form" data-dojo-attach-point="DiameterTextFormDijit">
<input type="text" data-dojo-type="dijit/form/NumberTextBox" id="txtcoverlevel"
data-dojo-props="trim:true,required:true,style:'width:100%;',placeholder:''" />
</div>
</td>
</tr>
<tr>
<td><label for="name">INV LEVEL (cm):</label></td>
<td>
<div data-dojo-type="dijit/form/Form" data-dojo-attach-point="LengthtextFormDijit">
<input type="text" data-dojo-type="dijit/form/NumberTextBox" id="txtinvlevel"
data-dojo-props="trim:true,required:true,style:'width:100%;',placeholder:''" />
</div>
</td>
</tr>
<tr>
<td>
<label for="name">Color:</label>
</td>
<td>
<select name="select" data-dojo-type="dijit/form/Select" id="colorvalue" data-dojo-attach-point="drawDropdownFormDijit">
<option value="RED" selected="selected">RED</option>
<option value="BLACK">BLACK</option>
</select>
</td>
</tr>
</table>
<table id="tblfoulsewerMH">
<tr>
<td><label for="name">COVER LEVEL (cm):</label></td>
<td>
<div data-dojo-type="dijit/form/Form" data-dojo-attach-point="DiameterTextFormDijit">
<input type="text" data-dojo-type="dijit/form/NumberTextBox" id="txtFSMHcoverlevel"
data-dojo-props="trim:true,required:true,style:'width:100%;',placeholder:''" />
</div>
</td>
</tr>
<tr>
<td><label for="name">INV LEVEL (cm):</label></td>
<td>
<div data-dojo-type="dijit/form/Form" data-dojo-attach-point="LengthtextFormDijit">
<input type="text" data-dojo-type="dijit/form/NumberTextBox" id="txtFSMHinvlevel"
data-dojo-props="trim:true,required:true,style:'width:100%;',placeholder:''" />
</div>
</td>
</tr>
<tr>
<td><label for="name">MH NUMBER:</label></td>
<td>
<div data-dojo-type="dijit/form/Form" data-dojo-attach-point="slopehtextFormDijit">
<input type="text" data-dojo-type="dijit/form/NumberTextBox" id="txtMHnumber"
data-dojo-props="trim:true,required:true,style:'width:100%;',placeholder:''" />
</div>
</td>
</tr>
<tr>
<td>
<label for="name">Color:</label>
</td>
<td>
<select name="select" data-dojo-type="dijit/form/Select" id="FScolorvalue" data-dojo-attach-point="drawDropdownFormDijit">
<option value="RED" selected="selected">RED</option>
<option value="BLACK">BLACK</option>
</select>
</td>
</tr>
</table>
</div>
</div>
тогда у меня есть файл widget.js, в который я загружаю шаблоны HTML в свойство Content диалогового окна, которое я создал, но я не понимаю, как вызвать событие переключателя. Если я нажму на Manhole1, я хотел бы отобразить таблицу "tblMH1", если я нажму на Fhole Sewer Manhole, я бы хотел отобразить "tblfoulsewerMH"
Я могу создать диалоговое окно и загрузить шаблоны HTMl в диалоговое окно, но я не уверен, как выполнить.
Ниже мой код Widgets.js:
define([
'dojo/_base/declare',
'dijit/_WidgetBase',
'dijit/_TemplatedMixin',
'dijit/_WidgetsInTemplateMixin',
'dojo/_base/lang',
'dojo/_base/Color',
'esri/toolbars/draw',
'esri/layers/GraphicsLayer',
'esri/graphic',
'esri/renderers/SimpleRenderer',
'esri/renderers/UniqueValueRenderer',
'esri/symbols/SimpleMarkerSymbol',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/SimpleFillSymbol',
'esri/layers/FeatureLayer',
'dojo/text!./EditLayers/templates/EditLayers.html',
'dojo/text!./EditLayers/templates/HCLineInfo.html',
'dojo/text!./EditLayers/templates/SewerLineInfo.html',
'dojo/text!./EditLayers/templates/ManholeInfo.html',
'dojo/topic',
'dojo/aspect',
'dijit/form/Button',
'dijit/form/RadioButton',
'dijit/Dialog',
'dijit/registry',
'dojo/dom',
'dojox/layout/FloatingPane',
'dojo/_base/window',
'dojo/dom-attr',
'dojo/query',
'dojo/on',
'xstyle/css!./EditLayers/css/EditLayers.css',
'xstyle/css!./EditLayers/css/text-graphics.css',
], function (declare, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, lang, Color, Draw, GraphicsLayer, Graphic, SimpleRenderer,
UniqueValueRenderer, SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol, FeatureLayer, template, HCInfoTemplates, SewerLineInfoTemplates, MHInfoTemplates,
topic, aspect, Button,RadioButton,
Dialog, registry, dom, FloatingPane, window, domattr, query, on
) {
debugger;
var EditLayersDialogDijit = declare([_WidgetBase, _TemplatedMixin], {
templateString: MHInfoTemplates,
postCreate: function () {
this.inherited(arguments);
},
});
var EditLayersDijit = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
widgetsInTemplate: true,
templateString: template,
drawToolbar: null,
mapClickMode: null,
postCreate: function () {
this.inherited(arguments);
this.drawToolbar = new Draw(this.map);
this.drawToolbar.on('draw-end', lang.hitch(this, 'onDrawToolbarDrawEnd'));
this.createGraphicLayers();
this.own(topic.subscribe('mapClickMode/currentSet', lang.hitch(this, 'setMapClickMode')));
},
onDrawToolbarDrawEnd: function (evt) {
this.drawToolbar.deactivate();
var graphic = null;
switch (evt.geometry.type) {
case 'point':
graphic = new Graphic(evt.geometry);
this.pointGraphics.add(graphic);
this.createdialog(graphic);
break;
case 'polyline':
graphic = new Graphic(evt.geometry);
this.polylineGraphics.add(graphic);
this.createdialog(graphic);
break;
case 'polygon':
graphic = new Graphic(evt.geometry, null, {
ren: 1
});
this.polygonGraphics.add(graphic);
break;
default:
}
this.connectMapClick();
},
createGraphicLayers: function () {
this.pointSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 10, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([255, 0, 0, 1.0]));
this.polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASH, new Color([255, 0, 0]), 1);
this.polygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.0]));
this.pointGraphics = new GraphicsLayer({
id: 'editGraphics_point',
title: 'Draw Graphics'
});
this.pointRenderer = new SimpleRenderer(this.pointSymbol);
this.pointRenderer.label = 'User drawn points';
this.pointRenderer.description = 'User drawn points';
this.pointGraphics.setRenderer(this.pointRenderer);
this.map.addLayer(this.pointGraphics);
this.polylineGraphics = new GraphicsLayer({
id: 'editGraphics_line',
title: 'Draw Graphics'
});
this.polylineRenderer = new SimpleRenderer(this.polylineSymbol);
this.polylineRenderer.label = 'User drawn lines';
this.polylineRenderer.description = 'User drawn lines';
this.polylineGraphics.setRenderer(this.polylineRenderer);
this.map.addLayer(this.polylineGraphics);
this.polygonGraphics = new FeatureLayer({
layerDefinition: {
geometryType: 'esriGeometryPolygon',
fields: [{
name: 'OBJECTID',
type: 'esriFieldTypeOID',
alias: 'OBJECTID',
domain: null,
editable: false,
nullable: false
}, {
name: 'ren',
type: 'esriFieldTypeInteger',
alias: 'ren',
domain: null,
editable: true,
nullable: false
}]
},
featureSet: null
}, {
id: 'editGraphics_poly',
title: 'Draw Graphics',
mode: FeatureLayer.MODE_SNAPSHOT
});
this.polygonRenderer = new UniqueValueRenderer(new SimpleFillSymbol(), 'ren', null, null, ', ');
this.polygonRenderer.addValue({
value: 1,
symbol: new SimpleFillSymbol({
color: [255, 170, 0, 255],
outline: {
color: [255, 170, 0, 255],
width: 1,
type: 'esriSLS',
style: 'esriSLSSolid'
},
type: 'esriSFS',
style: 'esriSFSForwardDiagonal'
}),
label: 'User drawn polygons',
description: 'User drawn polygons'
});
this.polygonGraphics.setRenderer(this.polygonRenderer);
this.map.addLayer(this.polygonGraphics);
},
drawLine: function (e) {
this.disconnectMapClick();
this.drawToolbar.fromID = e.target.id;
this.drawToolbar.activate(Draw.POLYLINE);
},
drawPoint: function (e) {
this.disconnectMapClick();
this.drawToolbar.activate(Draw.POINT);
},
disconnectMapClick: function () {
topic.publish('mapClickMode/setCurrent', 'draw');
},
connectMapClick: function () {
topic.publish('mapClickMode/setDefault');
},
setMapClickMode: function (mode) {
this.mapClickMode = mode;
},
createdialog: function (graphic) {
//var EditLayersDialogDijit = declare([_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {
// widgetsInTemplate: true,
// templateString: DialogInfoTemplates,
// postCreate: function () {
// this.inherited(arguments);
// },
//});
//var list = [];
//var nodes = document.getElementsByTagName("*");
//// iterate over every node in the document....SLOOOW
//for (var x = 0; x < nodes.length; x++) {
// // only nodes with the class "progressIndicator":
// if (nodes[x].className == "fa fa-building fa-2x") {
// // add to array:
// list.push(nodes[x]);
// }
//}
//var el = query("fa fa-building fa-2x");
debugger;
var featureEditlayer = null;
var dialoginfoTemplates = null;
var title = null;
var editLayers = registry.byId("editLayers_widget");
var HCLayer = this.map.getLayer('HCLayer');
var SewerLayer = this.map.getLayer('SewerLayer');
var BDMHLayer = this.map.getLayer('BDMHLayer');
var fromid = editLayers.drawToolbar.fromID;
if (fromid === 'addHCLine') {
featureEditlayer = HCLayer;
dialoginfoTemplates = HCInfoTemplates;
title = "House Connection Line"
}
else if (fromid === 'addSewerLine')
{
featureEditlayer = SewerLayer;
dialoginfoTemplates = SewerLineInfoTemplates;
title = "Sewer Connection Line"
}
else
{
featureEditlayer = BDMHLayer;
dialoginfoTemplates = MHInfoTemplates;
title = "Building Manhole"
}
var p = registry.byId('infodialog');
if (p) {
p.destroyRecursive();
}
debugger;
var myDialog = new Dialog({
title: title,//"HC Line Details",
id: 'infodialog',
style: "width: 400px",
content:dialoginfoTemplates,
//"<div><h2>Group of radioBtns '${name}'</h2>" +
// "<input type='radio' manhole data-dojo-attach-point='focusNode' data-dojo-type='dijit/form/RadioButton' checked='checked' data-dojo-props='value:\"MH2\"'></input>" +
// "<input type='radio' manhole data-dojo-type='dijit/form/RadioButton' data-dojo-props='value:\"MH3\"'></input>" +
// "<input type='radio' manhole data-dojo-type='dijit/form/RadioButton' data-dojo-props='value:\"Mh4\"'></input>" +
// "<input type='hidden' value='MH1'/>" +
// "</div>",
//dialoginfoTemplates,//HCInfoTemplates,//Texttemplates,
class: 'nonModal',
onHide: function () {
var p = registry.byId('dialog');
if (p) {
p.destroyRecursive();
}
},
});
new Button({
label: 'Save',
type: 'submit'
}).placeAt(myDialog.containerNode);
myDialog.on('execute', function ()
{
debugger;
var txtDiameter = dijit.byId('txtDiameter').value;
var txtLength = dijit.byId('txtLength').value;
var txtSlope = dijit.byId('txtSlope').value;
var txtColor = dijit.byId('colorvalue').value;
if (fromid === 'addSewerLine')
{
var txtSymbology = dijit.byId('symbologyvalue').value;
if (dijit.byId('colorvalue').value.trim() == "RED" && dijit.byId('symbologyvalue').value.trim() == "DASH")
{
txtColor = "DASHRED";
}
if (dijit.byId('colorvalue').value.trim() == "RED" && dijit.byId('symbologyvalue').value.trim() == "SOLID") {
txtColor = "SOLIDRED";
}
if (dijit.byId('colorvalue').value.trim() == "BLACK" && dijit.byId('symbologyvalue').value.trim() == "DASH") {
txtColor = "DASHBLACK";
}
if (dijit.byId('colorvalue').value.trim() == "BLACK" && dijit.byId('symbologyvalue').value.trim() == "SOLID") {
txtColor = "SOLIDBLACK";
}
}
var SaveAttribute = new Object();
SaveAttribute.APPNO = 7026;
SaveAttribute.PINNO = 55430201;
var currdate = new Date();
currdate = currdate.getDate() + "-" + (currdate.getMonth() + 1) + "-" + currdate.getFullYear();
SaveAttribute.DATE_CREAT = currdate;//Date.now();
SaveAttribute.COLOR = txtColor;
SaveAttribute.DIAMATER = txtDiameter;
SaveAttribute.LENGTH = txtLength;
SaveAttribute.SLOPE = txtSlope;
if (fromid === 'addSewerLine')
{
SaveAttribute.SYMBOLOGY = txtSymbology;
}
graphic.attributes = SaveAttribute;
//graphic.setAttributes(SaveAttribute);
//HCLayer.applyEdits([graphic], null, null);
featureEditlayer.applyEdits([graphic], null, null).then(function (adds, updates, deletes) {
debugger;
console.log('success', adds);
topic.publish('growler/growl', {
title: title,//'House Connection Line',
message: 'Graphics Saved Successfully.',
level: 'success', //possible classes are default, warning, success, error, info
timeout: 10000,
opacity: 1 // 0.5
});
}, function (err) {
console.log(err);
});
editLayers.connectMapClick();
});
myDialog.startup();
myDialog.show();
debugger;
//let test = dojo.byId("rdbMH1");
//registry.byId('rdbMH1').onclick = function () {
// alert();
//};
}
});
return EditLayersDijit;
});