Using an HTML5 canvas in Architecht 2.0

[jacobsr]

Greetings All,

I'm very new to Sencha Architect; and I couldn't readily discover a way to add an html5 canvas object to my view. is there any way to achieve this?

I'm evaluating Sencha as an alternative to Adobe Flex for our company.

Thanks!
-Raymond

[aconran]

If you drag out a Component, you can then create a canvas element inside of that component.

If you give me some idea of what you are trying to do in straight html/javascript, I can show you how you would do so in Architect.

[jacobsr]

We're writing simulation applications that are originally in Flex, but we've done some conversion to Javascript; we're thinking about using Sencha for all of it, as we'd like the benefit of the 'windowing' toolkit.

So normally our application would run in a browser where most of the browser was taken up by a window or form, with some toolbar type controls and a large portion of it occupied by an HTML5 canvas for graphics output.

From what Ive done with Sencha so far it doesn't seem to let me write any custom html or JS (the source files appear as 'read only') it would seem that you need to create an override to add something custom; but the IDE seems to warn against that.

[aconran]

For this specific example, you would need to write an override.

[wayne.rudd]

Why would you need an override? Surely you just put the custom rendering code in Controller actions and/or functions?

[aconran]

You could do that sure... but that would sort of break the rules of self containment for the particular class wouldn't it? As I said, without a specific example of what you're trying to implement its difficult to give you good advice of a "good way" to build it.

[wayne.rudd]

True - then why not add a function to the View which does the rendering to the canvas element. Just doesn't seem to warrant 'resorting' to an override.

edit: just tried it out - works a treat

Ext.define('Ezybook.view.MyEzybook', {
extend: 'Ext.container.Container',
alias: 'widget.myezybook',


height: 600,
itemId: 'myezybook',
width: 800,
layout: {
type: 'fit'
},


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'panel',
Test: function() {
var canvas = document.getElementById('theCanvas');




if (canvas.getContext){


// use getContext to use the canvas for drawing
var ctx = canvas.getContext('2d');


// Draw shapes
ctx.fillRect(25,25,100,100);
ctx.clearRect(45,45,60,60);
ctx.strokeRect(50,50,50,50);
}


},
html: '<canvas id=\'theCanvas\'></canvas>',
itemId: 'canvasPanel',
title: 'My Panel'
}
]
});


me.callParent(arguments);
}


});

[jacobsr]

I think the biggest issue is that I have _no_ experience with Sencha Architecht; I've started going through the tutorials, but so far they're not working.


So, a question, if I drag a component onto a form, click the "Flyout config", then "Edit Template"

and add some HTML markup in it; I see the markup (as html) in the designer; but when i run it, I only see the form, I don't see the result of my markup, any idea why?