sencha-touch - フォームをビューに挿入するにはどうすればよいですか？

Question

私はsenchatouchを初めて使用し、フォームをビューにロードするのに問題があります。

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