Javascript 将带有按钮的窗体面板添加到Ext.window.window时，按钮不显示

这是对我小提琴的描述

• 我已经定义了一个窗口和一个窗体面板
• 我已经创建了上面定义的窗口和表单面板的实例
• 将窗体面板添加到窗口中
• 在窗口上调用.show（）以显示窗口（其中 现在还包括表格）

表单面板声明包括按钮。但是现在按钮不显示了

Ext.application({
    name: 'My Window',

    launch: function () {

        Ext.define('MyWindow', {
            extend: 'Ext.window.Window',
            title: 'My Window'//,
            // renderTo: Ext.getBody()
        });

        Ext.define('MyForm', {
            extend: 'Ext.form.Panel',
            bodyPadding: 5,
            width: 350,

            // The form will submit an AJAX request to this URL when submitted
            url: '',

            // Fields will be arranged vertically, stretched to full width
            layout: 'anchor',
            defaults: {
                anchor: '100%'
            },

            // The fields
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'First Name',
                name: 'first',
                allowBlank: false
            }, {
                fieldLabel: 'Last Name',
                name: 'last',
                allowBlank: false
            }],

            // Reset and Submit buttons
            buttons: [{
                text: 'Reset',
                handler: function () {
                    this.up('form').getForm().reset();
                }
            }, {
                text: 'Submit',
                formBind: true, //only enabled once the form is valid
                disabled: true,
                handler: function () {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            success: function (form, action) {
                                Ext.Msg.alert('Success', action.result.msg);
                            },
                            failure: function (form, action) {
                                Ext.Msg.alert('Failed', action.result.msg);
                            }
                        });
                    }
                }
            }]
        });

        var myWindow = new MyWindow();
        var myForm = new MyForm();

        myWindow.items.add(myForm);
        myWindow.show();
        // var myForm = new MyForm();

    }
});

这是我的建议

这必须与表单或窗口的某些记录行为有关。那会是什么？

---

另外，在架构上，我想分别定义这些组件，并根据需要使用它们。那么有没有比这更好的设计模式呢？

任何包含其他组件的组件通常都需要指定布局。在MyWindow配置中添加

layout:'fit'

，它应该可以工作

---

Google ExtJS MVC提供了关于设计ExtJS应用程序的推荐方法的指南。我还发现extjs6示例页面非常有用。其中一个很好，因为它包含大量使用MVC设计模式构建的小型应用程序的不同示例。（从该链接中选择一个示例，然后展开右侧的详细信息窗格。）

是否定义了布局配置丢失时的行为？奇怪的是，当布局丢失时，按钮被忽略了。您的答案说明，如果没有布局，窗口配置将无法正常工作。但这种情况下的症状很奇怪。或者可能不是？它默认为“自动”布局。不是奇怪的行为或任何事情。。。如果组件将包含其他组件，则只需指定布局。