Sencha architect popup window

Question

I have a grid and I try to open the view with id "popup" of type "Ext.form.panel" to edit a single entry from the grid.

I ended up with the following:

onGridpanelSelect: function(rowmodel,record,index,e0pts) {
    if(Ext.getCmp('popup')) var sample = Ext.getCmp('popup');
    else var sample = Ext.create('MyApp.view.popup');
    sample.update(record.data);
    // Ext.Viewport.add(sample);
    Ext.Viewport.setActiveItem(sample);
}

But Firefox tells me that neither Ext.Viewport.add nor Ext.Viewport.setActiveItem are functions. What exactly does he try to really tell me?

(TypeError: Ext.Viewport.add is not a function or TypeError: Ext.Viewport.setActiveItem is not a function, depending on whether the comment is there)

Answer 1

In Sencha Touch, Ext.Viewport is a singleton, but not in ExtJS. And add is not a static method, so you can only call it from a Viewport instance.

If you have already created a viewport, you can grab a reference to it with a component query:

var viewport = Ext.ComponentQuery.query('viewport')[0];
// Now, we've got an instance!
viewport.add( ... );

Now, given the name of your component (popup), I wouldn't bother trying to add it to the viewport, but rather I would display it in a modal window... You know, like a popup ;)

var sample = Ext.getCmp('popup') || new MyApp.view.popup;

sample.update(record.data);

var win = Ext.widget('window', {
    title: "Sample"

    ,autoShow: true
    ,modal: true

    ,layout: 'fit'
    ,items: [sample]

    ,width: 300
    ,height: 300

    ,buttons: [{
        text: "Ok"
        ,handler: function() {

            // maybe you'll want to process your form here

            // remove your component before closing the window
            // to avoid having it auto destroyed
            win.remove(sample, false);

            win.close();
        }
    }]
});