MVC Drawing

[the_skua]

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

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

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:

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?

[the_skua]

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.

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

[aeiou]

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