CODEWITHSUNDEEP
javascriptextjs
user6123723
user6123723

Reputation: 11106

Buttons not showing up when adding a Form Panel with buttons to an Ext.window.Window

Here's a description of my Fiddle

The form Panel declaration includes the buttons. But now the buttons do not show up.

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();

    }
});

Here's the fiddle

This must be related to some documented behavior of the Form or the Window. What could that be? Also, architecturally, I would like to define these components separately and use them as needed. So is there a design pattern that is better than this?

Upvotes: 0

Views: 570

Answers (1)

zeke
zeke

Reputation: 3663

Any component that is going to contain other components will generally need to have a layout specified. Add layout: 'fit' to your MyWindow config and it should work.

Google ExtJS MVC for guidelines on the recommended way to design ExtJS applications. I also find that the ExtJS 6 examples page can be quite useful. The KitchenSink one is nice because it contains a ton of different examples of small applications built using the MVC design pattern. (Pick an example from that link and then expand the Details pane on the right.)

Upvotes: 1

Related Questions