1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    24
    Vote Rating
    0
    Answers
    1
    the_skua is on a distinguished road

      0  

    Default Answered: MVC Drawing

    Answered: MVC Drawing


    Still learning the ropes with ExtJS4 and the MVC architecture. I'm trying to draw stuff in a Window that gets popped up when someone clicks a button. The problem is that I need to draw a bunch of stuff dynamically, with loops, and the surface doesn't appear to be available until after the Window has been popped up, so I'm looking for a solution.

    This works, but doesn't let me draw dynamically.
    VIEW
    Code:
    Ext.define('RiskMap.view.Forecast.ForecastHelp', {    extend: 'Ext.window.Window',
        alias: 'widget.forecasthelp',
        title: 'Forecast Mode',
        width: 250,
        height: 250,
        layout: 'fit',
        initComponent: function() {
            var drawComponent = Ext.create('Ext.draw.Component', {
                viewBox: false,
                items: [{
                    type: 'circle',
                    fill: '#79BB3F',
                    radius: 100,
                    x: 100,
                    y: 100
                }]
            });
            
            this.items = [drawComponent];
            
            this.callParent(arguments);
        }
    });
    Controller
    Code:
    onHelpClick: function(myB, e) {
            var view = Ext.widget('forecasthelp');
            view.setPosition(myB.getPosition()[0]+30,myB.getPosition()[1]);
            view.show();
            
            myB.disable();
        },
    This doesn't work:
    Code:
    Ext.define('RiskMap.view.Forecast.ForecastHelp', {
        extend: 'Ext.window.Window',
        alias: 'widget.forecasthelp',
        title: 'Forecast Mode',
        width: 250,
        height: 250,
        layout: 'fit',
        initComponent: function() {
            var drawComponent = Ext.create('Ext.draw.Component', {
                viewBox: false
            });
            
            drawComponent.surface.add({
                type: 'circle',
                fill: '#79BB3F',
                radius: 100,
                x: 100,
                y: 100
            });
            
            this.items = [drawComponent];
            
            this.callParent(arguments);
        }
    });
    What's the best way to draw a bunch of stuff dynamically, either before the Window.show() function is called, or after...using MVC?

  2. I have answered my own question, it took a little while. I really wish the sprite.show(true) need had been included in the documentation. Also, it would have been helpful to know that I couldn't add to drawComponent until it's parent .show() function had been called.

    This works. I call drawStuff() after I call show() on the Window.
    Code:
    Ext.define('RiskMap.view.Forecast.ForecastHelp', {    
    extend: 'Ext.window.Window',
        alias: 'widget.forecasthelp',
        title: 'Forecast Mode',
        width: 250,
        height: 250,
        layout: 'fit',
        initComponent: function() {
            var drawComponent = Ext.create('Ext.draw.Component', {
                viewBox: false
            });
            
            this.items = [drawComponent];
            this.callParent(arguments);
        },
        drawStuff: function() {
            var dc = this.getComponent(0);
            dc.surface.add({
                type: 'circle',
                fill: '#79BB3F',
                radius: 100,
                x: 100,
                y: 100
            }).show(true);
        }
    });

  3. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    24
    Vote Rating
    0
    Answers
    1
    the_skua is on a distinguished road

      0  

    Default


    I have answered my own question, it took a little while. I really wish the sprite.show(true) need had been included in the documentation. Also, it would have been helpful to know that I couldn't add to drawComponent until it's parent .show() function had been called.

    This works. I call drawStuff() after I call show() on the Window.
    Code:
    Ext.define('RiskMap.view.Forecast.ForecastHelp', {    
    extend: 'Ext.window.Window',
        alias: 'widget.forecasthelp',
        title: 'Forecast Mode',
        width: 250,
        height: 250,
        layout: 'fit',
        initComponent: function() {
            var drawComponent = Ext.create('Ext.draw.Component', {
                viewBox: false
            });
            
            this.items = [drawComponent];
            this.callParent(arguments);
        },
        drawStuff: function() {
            var dc = this.getComponent(0);
            dc.surface.add({
                type: 'circle',
                fill: '#79BB3F',
                radius: 100,
                x: 100,
                y: 100
            }).show(true);
        }
    });

  4. #3
    Sencha User
    Join Date
    Sep 2009
    Location
    There
    Posts
    21
    Vote Rating
    0
    aeiou is on a distinguished road

      0  

    Default


    Quote Originally Posted by the_skua View Post
    I have answered my own question, it took a little while. I really wish the sprite.show(true) need had been included in the documentation. Also, it would have been helpful to know that I couldn't add to drawComponent until it's parent .show() function had been called.
    Buffffff, ok, +10 for you and so on. Absolutely agree with your wishes and your solution.

    In addition, specially for panels which don't call the show method (so, no show event is fired), the afterrender event works as well as callback placement to add sprites.

    cheers

Thread Participants: 1

Tags for this Thread