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

我从official documentation获取了表单，但由于某种原因，表单无法加载。那么如何将表单添加到主视图中呢？

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

首先让它通过你的方法来解决。进行以下更改＆amp;它应该在你的系统中运行（在我的运行中）： -

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

但我不想以你的方式打电话给 formpanel 。相反，你可以按照ARolek的回答或遵循这种方法： -

1）app.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）second.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'
                    }
                    ]
                }
            ]
        }           
        });

如何在视图中插入表单？

2 个答案: