Form panel not showing by set active item - extjs

Question

Am new to sencha touch, my problem is i have a separate view to show a form panel by clicking on control event the form panel view will load, but when i click on the event nothing display on my screen. Just a blank screen to show..I dont know what am doing. The form panel is taken from sencha form panel tutorial
The following are my form panel view
Ext.define('WinReo.view.AddContact', {
extend: 'Ext.Container',
xtype: 'addcontact',
requires: [
'Ext.TitleBar'
//'Ext.Video'
],
config: {
layout:'fit'
},
initialize:function(){
console.log('inside initialize');
var formPanel = Ext.create('Ext.form.Panel', {
//xytpe:'formpanel',
fullscreen: true,
layout:'fit',
items: [{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name : 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name : 'password',
label: 'Password'
}
]
}]
});
formPanel.add({
xtype: 'toolbar',
docked: 'bottom',
layout: { pack: 'center' },
items: [
{
xtype: 'button',
text: 'Set Data',
handler: function() {
formPanel.setValues({
name: 'Ed',
email: 'ed#sencha.com',
password: 'secret'
})
}
},
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
formPanel.reset();
}
}
]
});
}
});
This is the controller event to show form panel view
onItemSwiped: function(list,index,target,record,e)
{
var addcontact= Ext.create('WinReo.view.AddContact');
Ext.Viewport.add(addcontact);
Ext.Viewport.setActiveItem(addcontact);
},
Just a simple task but am spending too much time to fix this one..please help me to solve this issue. Thanks in advance..

Answer 1

Your right about setActiveItem and you need to use it. because Ext.Viewport.add() only adds to viewPort not shows the view.
So only problem in your code is you created formPanel, but not added it in the AddContact View.
...........
// same code
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(formPanel.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
formPanel.reset();
}
}
]
});
this.add(formPanel); // add this line
}
});
See this fiddle