How to open popup in ExtJS with form only

Question

I have a Form panel that contains a form with fields.

Now when I click the button, I open the window and then add the form as an element in the window, like this

win = new Ext.Window({ title: 'Add', layout: 'fit', autoScroll: true, y: 120, width: 600, height: 600, modal: true, closeAction: 'hide', items: [formpanel] }); win.show(); 

Now it shows two windows: one shows the title bar of the main Add window and the border, and then another frame of the form with the title and borders.

Is there a way for windows to only conatiate the shape of the title bar and border, but not the title bar of the window and border and background

This is similar to displaying only the formPanle as a popup, not the formpanel inside the window

Answer 1

Do this as a floating and closable config to achieve your task.

closable:true helps you display the cross button in the corner as you need.

 var myForm = new Ext.form.Panel({ width: 500, height: 400, title: 'Foo', floating: true, closable : true }); myForm.show(); 

Hope this helps.

Answer 2

floating: true automatically matches the shape in the center. If not, you can use the center () method of the .panel form.

 var myForm = new Ext.form.Panel({ width: 500, height: 400, title: 'Form Window', floating: true, closable : true }); myForm.show(); 

Below the call will make the form in the center.

 myForm.center(); 

Answer 3

You can configure the form as floating:

 var f = new Ext.form.Panel({ width: 400, height: 400, title: 'Foo', floating: true }); f.show(); 

Fiddle