Reputation: 20224
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)
Upvotes: 1
Views: 1913
Reputation: 25001
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();
}
}]
});
Upvotes: 3