Extjs 表格面板未按设置活动项显示

我是sencha touch的新手，我的问题是我有一个单独的视图，通过单击控制事件来显示表单面板，表单面板视图将加载，但当我单击事件时，屏幕上不会显示任何内容。我不知道我在做什么。表单面板取自sencha表单面板教程

下面是我的表单面板视图

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();
                    }
                }
            ]
        });

    }
});

    onItemSwiped: function(list,index,target,record,e)
        {
var addcontact= Ext.create('WinReo.view.AddContact');
            Ext.Viewport.add(addcontact);
            Ext.Viewport.setActiveItem(addcontact);
        },

这是显示窗体面板视图的控制器事件

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();
                    }
                }
            ]
        });

    }
});

    onItemSwiped: function(list,index,target,record,e)
        {
var addcontact= Ext.create('WinReo.view.AddContact');
            Ext.Viewport.add(addcontact);
            Ext.Viewport.setActiveItem(addcontact);
        },

---

这只是一个简单的任务，但是我花了太多的时间来解决这个问题。请帮我解决这个问题。提前感谢..

您关于setActiveItem的权利，您需要使用它。因为Ext.Viewport.add（）只添加到视口，而不显示视图

所以代码中唯一的问题是创建了formPanel，但没有将其添加到AddContact视图中

    ........... 
    // 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
    }
});

---

请参见此

尝试将formpanel flex value设置为1，并查看发生了什么情况，如果您收到任何错误，也请告诉我。很抱歉，延迟回复，我尝试了var formpanel=Ext.create（'Ext.form.Panel'），{flex:1，…..但它不起作用..在我的控制台中没有得到任何错误..实际上，当我给出formPanel.show（）时，表单就在那里；命令在表单末尾我可以看到底部工具栏按钮，但文本文件不可见。当我单击“设置数据”和“获取数据”按钮时，我可以看到弹出的数据。唯一的问题是文本字段被隐藏。提前感谢plz帮助解决此问题…@Dibish。请参阅我更新了我的答案。感谢您的快速回复。我删除了Ext.Viewport.setActiveItem（addcontact）；…然后页面导航没有进行。窗口没有显示addcontact视图。事件正在工作，但活动项仍然是当前页面。我不知道哪里出了问题。通常我使用以下三行代码var addcontact=Ext.create进行页面导航（'WinReo.view.AddContact'）；Ext.Viewport.add（AddContact）；Ext.Viewport.setActiveItem（AddContact）；非常感谢Viswa…您真是太棒了…现在工作正常了…非常感谢亲爱的。。。