HOW TO: Custom Editor / CanvasItem subclassing

[jaredm]

I had the need this evening to put together a custom editor for a ListGrid field. I had a DataSource with 'currency' (text) and amount (integer) fields and I wanted to make one editor for them.

After reading around on the forums it seemed like subclassing CanvasItem was the way to go. I couldn't find a complete example of what I wanted so I thought I'd share my efforts.

The code below extends CanvasItem to embed a dynamic form with a Currency drop down and a monetary amount input box.

Note: It isn't perfect (tabbing out doesn't cause it to lose focus and I get a JavaScript error).

In any case, I hope someone might find it useful as an example.

isc.defineClass("CurrencyAmountEditor", "CanvasItem").addProperties({
    shouldSaveValue: true
});
CurrencyAmountEditor.addMethods({
    init : function() {
        this.Super("init", arguments);
    }
    ,createCanvas: function() {
        var canvas = isc.DynamicForm.create({
            values: this.getValue()
           ,cellPadding: 0
           ,items: [ { name: 'currency', type: 'select', dataPath: 'currency', valueMap: ['USD','EUR'], showTitle: false, width: 50}
                    ,{ name: 'amount', type: 'integer', dataPath: 'amount', showTitle: false, stopOnError: true
                       ,width: 70
                       ,selectOnFocus: true
                       //,mask: '999,999,999'
                       ,keyDown: "if (keyName == 'Enter' || keyName == 'Tab') "+this.ID+".endEditing(form.values)"
                     }
                   ]
        });
        return canvas;
    }
    ,endEditing: function(values) {
        if ( this.grid ) {
            this.grid.endEditing();
        }
    }
});

I'll edit this sample if I make it better.