How can i open popup window in ExtJS with formpanel only

Question

I have the Form panel which constains the form with fields.

Now on click of button , i am opening the window and then adding form as item in 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 this shows two windows one shows the main window title Add and border and then one more frame of formpanel with title and borders.

Is there any way so that window only conatins form title and border but not windows title and border and background

Its like showuing only formPanle as popup , rather than formpanel inside window

Expletive

Answer 1

Make it as floating and closable config to achieve your task.

closable:true will help you to appear cross button at corner as you require.

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

I hope this will help.

Sharilyn

Did you try it @Expletive – Sharilyn

Thats great @user191542. Happy coding. – Sharilyn

How can i make the form always appear at center of screen – Expletive

please make it an new request with updated code @user191542. it will be useful for other to track it and solve their problem. – Sharilyn

Answer 2

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

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

Below call will make the form in center.

myForm.center();

Showroom

Answer 3

You can configure your form as floating:

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

Fiddle

Transcurrent

thanks but how can i have cross button at the corner – Expletive

Add a close tool to the form definition. – Transcurrent

How can i make the form always appear at center of screen – Expletive

You can use myForm.center() method to make the form center of screen. For reference see my answer. – Showroom