Change default editor for node in AlloYUI Diagram Builder

[Hector Armando Vela Santos]

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?

[Robert Frampton]

Hello Hector,

Try the following.

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. Hope that helps!

-Rob

[Hector Armando Vela Santos]

OMG thanks a lot, I was so close :p

Thanks for your help Rob :D