I just want to use part of the drawbox dijit but cant call my function from the widget HTML
So I have created 2 drawbox in my code now to test this.
One declarative as described above, drawBox and also one created programatic, db2.
The declarative drawBox results in nothing in my widget panel.
And the programatic db2, does appear in my widget panel but is not limited to only the extent button, I get all the geo types even though types is set to ['EXTENT'].
define(['dojo/_base/declare',
'jimu/BaseWidget',
'dijit/_WidgetsInTemplateMixin',
'dojo/_base/html',
'dojo/_base/lang',
'dojo/on',
'jimu/dijit/DrawBox',
'dojo/dom'
],
function(declare, BaseWidget, _WidgetsInTemplateMixin, html, lang, on, Drawbox, dom) {
var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
baseClass: 'jimu-widget-JimDrawbox',
name: 'JimDrawbox',
drawBox: null,
db2: null,
postCreate: function() {
this.inherited(arguments);
this.drawBox.setMap(this.map);
this.drawBox.keepOneGraphic = true;
this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawComplete)));
this._createtestingwidget();
},
_createtestingwidget: function(){
this.db2 = new Drawbox;
this.db2.setMap(this.map);
this.db2.types=['EXTENT'];
this.db2.keepOneGraphic = true;
this.own(on(this.db2, 'DrawEnd', lang.hitch(this, this._onDrawComplete)));
html.place(this.db2.domNode, this.testing);
},
_onDrawComplete: function(graphic) {
var geometry = graphic.geometry;
this.drawBox.deactivate();
console.log(geometry);
}
});
return clazz;
});<div><div>declarative</div>
<div data-dojo-attach-point="drawBox" data-dojo-type="jimu/dijit/DrawBox" data-dojo-props="types:['EXTENT'],showClear:false" style="margin-top:5px;"></div>
<div>programatic</div>
<div data-dojo-attach-point="testing"></div>
</div> Im not sure why setting the first one doesnt appear at all, and I dont know whay the second one shows all types not just extent.
These are the problems I encountered before that led me try creating my own button that calls
this.drawBox.activate('EXTENT')I've kind of gone full circle! But I would like to get this declarative method to work with only extent available...
Whats causing the first attempt to not show anything at all (drawBox)?
How do I limit it to only show extent in the second method (db2)?
Hi Robert,
I am unable to find the zip in my inbox, I can see a single entry in there for all the replies in this thread but I cant see any attachments or files.
I have used ['EXTENT'] for types and geoTypes but it seems to have no effect.
Heres my code where I have tried 3 methods to get just an extent drawbox thing:
<div>
<div>declarative</div>
<div data-dojo-attach-point="drawBox" data-dojo-type="jimu/dijit/DrawBox" data-dojo-props="types:['EXTENT'],showClear:false" style="margin-top:5px;"></div>
<div>programatic</div>
<div data-dojo-attach-point="testing"></div>
<div>Make my own button!</div>
<button class="button" data-dojo-attach-point="drawBtn">Extent</button>
</div> define(['dojo/_base/declare',
'jimu/BaseWidget',
'dijit/_WidgetsInTemplateMixin',
'dojo/_base/html',
'dojo/_base/lang',
'dojo/on',
'jimu/dijit/DrawBox',
'dojo/dom'
],
function(declare, BaseWidget, _WidgetsInTemplateMixin, html, lang, on, Drawbox, dom) {
var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {
baseClass: 'jimu-widget-JimDrawbox',
name: 'JimDrawbox',
db2: null,
postCreate: function() {
this.inherited(arguments);
//this is the declarative method, the drawBox is declared in the HTML
//But nothing appears in the widget panel...
this.drawBox.setMap(this.map);
this.drawBox.keepOneGraphic = true;
this.own(on(this.drawBox, 'DrawEnd', lang.hitch(this, this._onDrawComplete)));
this.drawBox.enable();
//This is the programatic method, unable to restrict drawing options...
//I have set types and geoTypes to no effect.
this._createtestingwidget();
//attach a function that calls this.drawBox.activate('EXTENT')
//this works but Im not really making use of the dijit and its preset icons etc.
//could this method using the same drawBox object be the reason it doesnt
//display for the first method? doesnt seem likely
this._buttonsetup();
},
_createtestingwidget: function(){
this.db2 = new Drawbox;
this.db2.setMap(this.map);
this.db2.types=['EXTENT'];
this.db2.geoTypes=['EXTENT'];
this.db2.keepOneGraphic = true;
this.own(on(this.db2, 'DrawEnd', lang.hitch(this, this._onDrawComplete)));
html.place(this.db2.domNode, this.testing);
},
_onDrawComplete: function(graphic) {
var geometry = graphic.geometry;
this.drawBox.deactivate();
console.log(geometry);
},
_buttonsetup: function(){
this.own(on(this.drawBtn, "click", lang.hitch(this, this._grabArea)))
},
_grabArea: function() {
this.drawBox.activate('EXTENT')
},
});
return clazz;
});The only one that worked was the 3rd one but I know this isnt the way Im supposed to do it.
Id really like to get the declarative one displaying but have no idea why it isnt...
Declarative: no display
Programatic : not limited to extent
Button: Works but Im not really using the dijit properly.
James,
In my attachment I have a fully functioning declarative example widget.
So you need to open the thread as I mentioned earlier you Can Not see attachments inside your inbox.
You can just click on the threads title in your inbox or right click it and choose to open in new tab.
