esri.dijit.editing.Editor not starting correctly

[MichaelRollins]

I am creating a map using the JavaScript API.  For some reason, despite verifying everything against the samples, my Editor will not startup correctly.  In Chrome I'm getting a "DOM exception 8", which is indicative that an object is not in the DOM when it is referenced.  When I inspect the div which the editor should be contained in, there are plenty of nested divs, but I'm not sure which ones may be missing.

I'm putting everything in Ext components.  So far, the map and the template picker work correctly, just not the editor.

Any help would be greatly appreciated.

Here is the code for the function to set up the template picker and the editor:

[PHP]
initEditor: function(results){

       
       
        var editorPanel = this.get('editorpanel');
        var templatePickerPanel = editorPanel.get('templatepickerpanel');
        var editorWidgetPanel = editorPanel.get('editorwidgetpanel');
       
        var layers = dojo.map(results, function(result) {
            return {featureLayer:result.layer};
          });
       
        var templateLayers = dojo.map(results, function(result){
            return result.layer;
        });
       
        this.templatePicker = new esri.dijit.editing.TemplatePicker({
            featureLayers: templateLayers,
            group: true,
            rows: 'auto',
            columns: 2
        }, templatePickerPanel.body.dom);
       
        this.templatePicker.startup();
       
        var settings = {
            map: this.map,
            templatePicker: this.templatePicker,
            geometryService: new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"),
            layerInfos: layers,
            toolbarVisible: true,
            createOptions: {
            polygonDrawTools: [ esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON,
                                esri.dijit.editing.Editor.CREATE_TOOL_POLYGON,
                                esri.dijit.editing.Editor.CREATE_TOOL_AUTOCOMPLETE]
            },
            toolbarOptions: {
                reshapeVisible: true,
                cutVisible: true,
                mergeVisible: true
            }
        };
        var params = {settings: settings};

        this.editorWidget = new esri.dijit.editing.Editor(params, editorWidgetPanel.body.dom); 
        this.editorWidget.startup();
    }
[/PHP]

[MichaelRollins]

Looks like it was a layer definition problem.  I'm defining the layers by hand for testing and apparently didn't define one properly.

[JasonMielke]

Michael,

I'm having a similar problem with getting the Editor Widget to work in my extjs app.  The Template Picker part is working/rendering fine.  Was wondering if you would be willing to elaborate on your solution and our share a bit more of your code?

Thank you,
Jason

[MichaelRollins]

Jason, we had to abandon the attempt to get complex ExtJS working with ArcGIS.  The ultimate problem we ran into was that there is a problem with how Ext handles divs when in a panel.  Anything that relied on a div for display (like a popup window) was rendering without css styles applied correctly.  We switched to a pure dojo/jsapi approach and have had more success with that.

However, I'm more than willing to share the code we did get to.  You can download it from BitBucket:

https://bitbucket.org/rollinsio/extarcgis

Download with Mercurial.

A few caveats:

1.  Check your paths, I guarantee that they're not all right (especially the Ext main paths).
2.  It's way undocumented and uncommented.
3.  It's not complete and it's not completely working in its current state.
4.  We were defining feature layers by hand.  It's messy and there is a lot that I've updated in the dojo/jsapi version, but that's not reflected here.

If you have any questions, feel free to ping me here.  If you need more access to the repo, let me know.

[MichaelRollins]

Jason, just reread your post more closely, most likely the editor widget not showing is due to the div problem.  I never did get it showing at all.  The Template Picker worked fine, but the editor never showed.

[JasonMielke]

Michael,  Thanks a ton for your replies.  So it's not just us..., you describe exactly the experience we've been having with the Editor Widget in ExtJS.  We've been banging our heads against our desk for a week trying to troubleshoot this one (what should have been a 30 minute coding exercise). 

In FF, examing the HTML 'editorDiv' element with FireBug, I can definitely see that the <div> for the "drawingToolbar" is getting hosed.  It is missing the dijitToolbarFocused and dijitFocused classes, and no additional HTML is generated inside this div.  Very frustrating.

Maybe we will need to abandon extjs too.  If we somehow figure it out, I'll be sure to report back to you.  Thanks also for sharing the code you've been developing.

Jason

[MichaelRollins]

When I finally figured out what was going on, I thought I would back things out a bit, use dojo components for hosting my views and layouts but still use the Ext plumbing to do my ajax and DOM manipulation.  However, simply including the Ext libraries hosed the divs that the dojo components lived in.  It was very frustrating.  When I removed Ext, things went back to loading properly.  I'm sure there's some kind of DOM conflict going on between dojo and Ext.

I don't know if you're having to do a lot of ajax calls, but let me offer up a few useful tools in dojo that are life savers:

1.  dojo.xhrGet (or xhrPost, etc):  Basic ajax calls
2.  xhrGet/xhrPost return a dojo.Deferred object, which is a promise to execute later.  They're great for turning synchronous code asynchronous:  http://www.dojotoolkit.org/api/dojo/Deferred.html
3.  dojo.hitch:  A wrapper for scope, kind of like Ext delegates.  http://docs.dojocampus.org/dojo/hitch

Those have helped me get off the ground with dojo, which is a pretty fantastic library, but it does do a lot of things different than Ext.  I prefer Ext's components and layouts, but dojo is still pretty fantastic.