Change default editor for node in AlloYUI Diagram Builder

Question

I have to make a diagram editor, so I'm using AlloYUI, I've added a custom node following the answer for this question.

I've successfully set new nodes and retreive it's values via diagramBuilder.toJSON()

What I'm trying to do is change the default editor widget for the custom attribute of my custom node, I'd like to change the textbox for date picker widget, but my goal is being able to use any other form elements, like a select, or a set of radio buttons.

Toying around with the javascript debugger included in WebStorm, I've found that the default fields have an 'editor' attribute where is defined a "textAreaCellEditor".

But my custom property doesn't have this attribute, So I'm trying to attach an editor, but I cannot get it to work, I've tried with this:

Y.DiagramNodeCustom = Y.Component.create({
        NAME: 'diagram-node',

        ATTRS: {
          type: {
            value: 'custom'
          },
          custom_attr: {
            value: 'customAttr'
          }
        },
        EXTENDS: Y.DiagramNodeTask,

        prototype: {
          getPropertyModel: function () {
            var instance = this;

            var model = Y.DiagramNodeTask.superclass.getPropertyModel.apply(
                instance, arguments);

            model.push({
              attributeName: 'customAttr',
              name: 'Custom Attribute',
              editor: Y.Component.create({
                NAME: "DateField",
                EXTENDS: Y.DateCellEditor
              })
            });

            return model;
          },
          SERIALIZABLE_ATTRS: ['description', 'name', 'required', 'type',
            'width', 'height', 'zIndex', 'xy', 'customAttr']
        }

      });
      Y.DiagramBuilder.types['custom'] = Y.DiagramNodeCustom;

I've also tried to change the "model.push" section to:

model.push({
      attributeName: 'customAttr',
      name: 'Custom Attribute',
      editor: {name: "textCellEditor"}
    });

and to:

model.push({
          attributeName: 'customAttr',
          name: 'Custom Attribute',
          editor: Y.DateCellEditor({
            name: 'DateCellEditor'
          })
        });

But nothing works. Do you have any idea how can I change the default editor?

Answer 1

Thanks to Robert Frampton, who anwered my question in google groups, the way to do it is:

model.push({
   attributeName: 'customAttr',
   name: 'Custom Attribute',

   editor: new Y.DateCellEditor()
});

You have to create a new instance of the Y.DateCellEditor object with adding 'new' before the constructor.