將帶有按鈕的窗體面板添加到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設計模式構建的小型應用程序的不同示例。 （從該鏈接中選擇一個示例，然后展開右側的“詳細信息”窗格。）