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

Question

这是我的小提琴的描述

• 我定义了一个窗口和一个表单面板
• 我已经创建了上面定义的Window和Form面板的实例
• 将“窗体”面板添加到窗口
• 在窗口上调用.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();

    }
});

这是小提琴

这必须与窗体或窗口的某些记录的行为有关。 那可能是什么？ 另外，在架构上，我想分别定义这些组件并根据需要使用它们。 那么，有没有比这更好的设计模式？

Answer 1

任何要包含其他组件的组件通常都需要指定布局。 将layout: 'fit'添加到您的MyWindow配置中，它应该可以工作。

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