1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    jacobsr is on a distinguished road

      0  

    Default Using an HTML5 canvas in Architecht 2.0

    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

  2. #2
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    136
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

    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.
    Aaron Conran
    @aconran

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    jacobsr is on a distinguished road

      0  

    Default

    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.

  4. #4
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    136
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

    For this specific example, you would need to write an override.
    Aaron Conran
    @aconran

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    New Zealand
    Posts
    127
    Vote Rating
    48
    wayne.rudd has a spectacular aura about wayne.rudd has a spectacular aura about wayne.rudd has a spectacular aura about

      0  

    Default

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

  6. #6
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,485
    Vote Rating
    136
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

    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.
    Aaron Conran
    @aconran

  7. #7
    Sencha Premium Member
    Join Date
    Mar 2012
    Location
    New Zealand
    Posts
    127
    Vote Rating
    48
    wayne.rudd has a spectacular aura about wayne.rudd has a spectacular aura about wayne.rudd has a spectacular aura about

      0  

    Default

    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);
    }


    });

  8. #8
    Sencha User
    Join Date
    May 2012
    Posts
    5
    Vote Rating
    0
    jacobsr is on a distinguished road

      0  

    Default

    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?

Thread Participants: 2