PDA

View Full Version : calling a popup component from another file



ibagur
7 Sep 2011, 5:24 AM
Hi,

I got a component (a pop up form) defined inside a script called 'popupForm.js'. I register this component in Ext as follows


popupForm = Ext.extend(popupFormUi, { initComponent: function() { popupForm.superclass.initComponent.call(this); }});Ext.reg('popupForm', popupForm);




Now, I want to call this popup form from another script, actually the one where I have the main application controller. The popup window will have to appear when I click on a button.

If I try to retrieve this component, I got nothing:


Ext.getCmp('popupForm');

What's the proper way in order to register a component in a script, and calling it from another? I'm including both scripts in my html file.

Thanks

dmackerman
7 Sep 2011, 5:40 AM
When you 'reg' a component, what you're doing is creating an xtypefor that particular. The component doesn't exist yet, so when you do Ext.getCmp(), you aren't retrieving anything. What I would do is create an object for the component, and use your xtype you've defined, and then give it an ID. Something like:


{
xtype: 'popupform',
id: 'popup'
}

Then Ext.getCmp() should work.

ibagur
7 Sep 2011, 5:46 AM
Thank you very much, I see...

So where should I create this object? Basically what I want is for this popup form to appear floating when I click a button in the main interface. Where and how should I instantiate the 'popupForm' object?

Thanks again

dmackerman
7 Sep 2011, 5:51 AM
Well, on the page that you need to open the popup from the button, you could do something like:


var popupWindow = {
xtype: 'popup',
id: 'popup'
}

button.on('click', function() {
Ext.getCmp('popup').show();
})

Uberdude
7 Sep 2011, 6:13 AM
@dmackerman, that won't work, nothing makes the new popup form.


var popupWindow = {

xtype: 'popup',
id: 'popup'
}
Is just a regular javascript object. It only makes an Ext Component when you pass it as a config literal in the 'items' array to some container component.

To make your new popup form, simply construct it:


button.on('click', function() {
new popupForm().show();
})

However, I strongly recommend you follow conventions and call your class PopupForm with initial caps. Camel-case popupForm would conventionally be the name for an instance variable.

ibagur
7 Sep 2011, 6:22 AM
Hi, thanks everyone for your prompt help. I actually did like this, I guess it's more or less the same:



handler = function(btn) { new popupForm().show(); }

MyButton.setHandler(handler);

thanks again.