PDA

View Full Version : formpanel inside modal



jochem kuun
11 Feb 2011, 2:12 AM
Hi,

I'm developing an MVC application which consists of a main viewport with multiple cards.
Each card contains a formpanel.


I've uploaded some screenshots: http://imgur.com/a/UTmqV
The first is a view of the form as a modal (as i'd like it to be) but it's not based on mvc.

the second IS based on the mvc framework, but i cant get modal to work there.

Here's the code of the first:

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: '',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var form;
var formBase = {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 280,
width: 480,
scroll: 'vertical',
url : 'php/login.php',
standardSubmit : false,
items: [
{
xtype: 'fieldset',
...
}
],
listeners : {
...
},

dockedItems: [
{
xtype: 'toolbar',
...
}
]
};

form = new Ext.form.FormPanel(formBase);
form.show();
}
});The above has the desired effect (as seen in the screenshot).


Here's the (original) code for the second:


App.Viewport = Ext.extend(Ext.Panel,{
cls: "login-main",
id: "login-main",
ui: 'dark',
fullscreen: true,
layout: 'card',

initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'loginform'
},
{
xtype: 'loginsettings'
}]
});
App.Viewport.superclass.initComponent.apply(this, arguments);
}
});

App.views.LoginForm = Ext.extend(Ext.form.FormPanel,{
scroll: 'vertical',
url : 'php/login.php',
standardSubmit : false,
id: 'login-form',
cls: 'login-form',
items: [
{
xtype: 'fieldset',
...
}
],
listeners : {
...
},
dockedItems: [
{
xtype: 'toolbar',
...
}
]
});

Ext.reg('loginform', App.views.LoginForm);I tried to apply the settings from the first codesample to the second. This works but the modal is shown fullscreen. I've analized the kitchensink example and there, the modal is shown within a panel with layout type set to vbox and pack set to center. I've applied this principle to my code and the result is that the modal is shown correct but the size is 50 x 50 px. Here's the code:


App.Viewport = Ext.extend(Ext.Panel,{
cls: "login-main",
id: "login-main",
ui: 'dark',
fullscreen: true,
layout: 'card',
/* Make sure that content isnt scrollable so user cannot scroll to detail view */
initComponent: function() {
Ext.apply(this, {
items: [{
xtype: 'panel',
layout: {
type: 'vbox',
pack: 'center'
},
items: {
xtype: 'loginform'
}
},
{
xtype: 'loginsettings'
}]
});
App.Viewport.superclass.initComponent.apply(this, arguments);
}
});
I hope the above clarifies my problem, and hopefully someone can show me the right way to show a form inside a modal, with MVC pattern applied.


Thanks in advance

Jochem

jochem kuun
11 Feb 2011, 3:54 AM
Hmmm...

It seems that i have to call doComponentLayout() right after the show() call.
Can anybody tell me why i don't have to do that in the first example...