Nesting FormPanel in Modal Window

[stan229]

What is the best way about going about nesting a Ext.form.Panel in a modal popup

var popup = Ext.create('Ext.Panel', {
            floating : true,
            modal : true,
            centered : true,
            width : 300,
            height : 400,
            items : [{
                docked : 'top',
                xtype : 'toolbar',
                title : 'Add Borrower'
            }, {
                xtype : 'formpanel',
                items : [{
                    xtype : 'textfield',
                    name : 'hello',
                    label : 'hello'
                }]
            }],
            scrollable : true
        });

        popup.show()

Doesn't show the fields, renders the window with toolbar. If I make the xtype to be fieldset it draws the textfield. If I nest a fieldset xtype with the textfield in it, also doesn't work.

[AndreaCammarata]

Hi Stan.
You just need to set your panel layout as 'fit'.
Please even notice that the "floating" config has been deprecated, so you only need to set the "centered" config as true.

var popup = Ext.create('Ext.Panel', {
            modal : true,
            centered : true,
            width : 300,
            height : 400,
	    layout: 'fit',
            items : [{
                docked : 'top',
                xtype : 'toolbar',
                title : 'Add Borrower'
            }, {
                xtype : 'formpanel',
                items : [{
                    xtype : 'textfield',
                    name : 'hello',
                    label : 'hello'
                }]
            }],
            scrollable : true
        });


        popup.show()

Hope this helps.

[stan229]

That works, thanks!

I'm having an issue with the hideOnMaskTap (default: true) though. I'm not sure if it's a bug or not. Whenever I click anywhere, even in the Panel it hides.

See video:

[AndreaCammarata]

You are welcome.
About your question, the "hideOnMaskTap" config should close the popup only when you tap the mask element outside the panel.
That's a strange behaviour.
Do you even have some other functions in your code that close this overlay panel?

[stan229]

Nope. Fortunately, I don't need hideOnMaskTap for that component. I will try to make a simplified test case. If I still see the issue I'll post a bug report.

Edit: Still there with test case, will post bug report.