PDA

View Full Version : Using a custom form I designed in a window



nfuids
4 Aug 2010, 6:14 PM
Hello,

I recently started working with Ext Designer (and Ext JS as a matter of fact).

I designed a PanelForm to match one of my model. Now I would like to pop up a window with a user click the "Add" button. The window should have the custom PanelForm I created.

I didn't find out how to do that with Ext Designer. I kinda tried to drag and drop the object from the object browser (right column of ext designer), but I think it copied it over instead of "using" it.

Is there something I'm missing here?

Thanks!

Palastanga
5 Aug 2010, 1:14 AM
You can make a new Window as a Component, and design it as you like.

In your PanelForm set an autoRef for the add button (something like btnAdd)

When you export from designer you should get a .js file and .ui.js file for each Component in your project. In your PanelForm.js (or whatever you named it) you can listen for an event on your Add button to launch your main window.

Something like:



this.btnAdd.on('click', function() {
this.win = new WindowPanelComponent();
this.win.show();

});
You do not want the Window rendered to the body, just the main panel form. Create a new instance of it when the add button is clicked.

nfuids
5 Aug 2010, 4:36 AM
What is the autoRef property for exactly?

jarrednicholls
5 Aug 2010, 7:41 AM
Hi nfuids,

The autoRef config is Designer-specific. When supplied a value, the Designer will automatically generate a "ref" with the proper path specification to put the component's reference on the top-level component. Try it out. Read more here: http://www.sencha.com/deploy/dev/docs/?class=Ext.Component&member=ref

If you want your PanelForm to be a part of the Window, do as Palastanga suggested with this addition: In the Component Tree on the right-hand side, you can drag-n-drop your PanelForm node onto the Window node. You are then presented an option to Move, Copy, or Link the PanelForm node. Choose "Link", and an instance of the PanelForm component will be added to the Window component and will be linked to the original. See screenshot: http://clip2net.com/clip/m50071/1281022870-cliptj4386-88kb.png

Hope that helps.