sencha-touch - 如何将表单插入到视图中？

Question

我是 sencha touch 的新手，无法将表单加载到视图中。

在我的 app.js 中，我正在加载主视图

Ext.Viewport.add(Ext.create('app.view.Main'));

我的完整 app.js 如下

Ext.application({
    name: 'app',

    requires: [
        'Ext.MessageBox',
        'Ext.form.FieldSet',
    ],

    views: ['Main'],


    launch: function() {

        // Initialize the main view
        Ext.Viewport.add(Ext.create('PlanPouch.view.Main'));
    },
});

我的主要观点是：

Ext.define("app.view.Main", {
    extend: 'Ext.Container',
    config:{
        items:[
            form
        ]
    }
});

var form = Ext.create('Ext.form.Panel', {
    fullscreen: true,
    items: [
        {
            xtype: 'textfield',
            name: 'name',
            label: 'Name'
        },
        {
            xtype: 'emailfield',
            name: 'email',
            label: 'Email'
        },
        {
            xtype: 'passwordfield',
            name: 'password',
            label: 'Password'
        }
    ]
});

我从官方文档中获取了表格，但由于某种原因表格没有加载。那么如何将表单添加到我的主视图中呢？

Answer 1

如果您希望表单始终位于 app.view.Main 中，那么只需执行以下操作：

Ext.define("app.view.Main", {
    extend: 'Ext.Container',
    config:{
        items:[
            {
                xtype:'formpanel',
                items: [
                    {
                        xtype: 'textfield',
                        name: 'name',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name: 'email',
                        label: 'Email'
                    },
                    {
                        xtype: 'passwordfield',
                        name: 'password',
                        label: 'Password'
                    }                        
                ]
            }
        ]
    }
});

Answer 2

首先让它通过您的方法解决。进行以下更改，它应该可以在您的系统中运行（在我的系统上运行）：-

1.) 在 app.js 中

    Ext.Viewport.add(Ext.create('app.view.Main'));

2）。在 Main.js 中

            Ext.define("app.view.Main", {
                extend: 'Ext.Container',
                config:{
                    items:[
                       {
                         xtype: form
                       }
                    ]
                }
            });

            var form = Ext.create('Ext.form.Panel', {
                fullscreen: true,
                items: [
                    {
                        xtype: 'textfield',
                        name: 'name',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name: 'email',
                        label: 'Email'
                    },
                    {
                        xtype: 'passwordfield',
                        name: 'password',
                        label: 'Password'
                    }
                ]
            });

但我不喜欢以你正在做的方式调用窗体。
相反，您可以遵循 ARolek 答案或遵循这种方法：-

1) 应用程序.js

        Ext.application({
            name: "app",
            views: ["Main","second"],

            launch: function () {

                Ext.Viewport.add(Ext.create('app.view.Main'));
            }
        });

2) Main.js

        Ext.define("app.view.Main", {
         extend: "Ext.Container",
         requires:["app.view.second"],
         config:{
            fullscreen: true,
              layout: 
                    {
                    type: 'fit'
                    },
                items:[
                  {
                    xtype: "form"
                  }
                ]
            }
        });

3）第二个.js

        Ext.define("app.view.second", {
        extend: "Ext.form.Panel",
        requires:['Ext.form.FieldSet','Ext.Toolbar'],
        alias: "widget.form",
        config:
        {
            items: 
            [       
                {
                    xtype: 'fieldset',
                    title: 'About You', 
                   items: [             
                    {
                        xtype: 'textfield',
                        name: 'name',
                        label: 'Name'
                    },
                    {
                        xtype: 'emailfield',
                        name: 'email',
                        label: 'Email'
                    },
                    {
                        xtype: 'passwordfield',
                        name: 'password',
                        label: 'Password'
                    }
                    ]
                }
            ]
        }           
        });