javascript - 将带有按钮的表单面板添加到 Ext.window.Window 时，按钮不显示

Question

这是我的 fiddle 的描述

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

    }
});

这是fiddle

这必须与表单或窗口的某些记录的行为有关。那会是什么？另外，从架构上来说，我想单独定义这些组件并根据需要使用它们。那么有没有比这更好的设计模式呢？

Answer 1

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

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