Ext.js5表单—请联系我们(41)

view

/**
 * This shows an example of a common "Contact Us" form in a popup window. The form uses
 * vbox and hbox layouts to achieve a uniform flexible layout  even when the window is
 * resized.
 *这个例子给出了一个很普遍的一个“请联系我们”的弹出表单。表单用了vbox和hbox布局实现当窗口大小更改时的一个统一灵活布局。
 * Note that Tab based navigation within the modal window is confined to within the window.
 *
 */
Ext.define('KitchenSink.view.form.ContactForm', {
    extend: 'Ext.form.Panel',
    xtype: 'form-contact',
    controller: 'form-contact',


    title: 'Contact Us',
    width: 500,
    bodyPadding: 20,

    items: [{
        margin: '0 0 20 0',
        xtype: 'component',
        html: [
            'Thank you for visiting our site! We welcome your feedback; ',
            'please click the button below to send us a message. We will ',
            'respond to your inquiry as quickly as possible.'
        ]
    }, {
        xtype: 'container',
        layout: {
            type: 'hbox',
            pack: 'center'
        },
        items: [{
            xtype: 'button',
            cls: 'contactBtn',
            scale: 'large',
            text: 'Contact Us',
            handler: 'showWindow'
        }]
    }]
});

viewcontroller

Ext.define('KitchenSink.view.form.ContactFormController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.form-contact',

    showWindow: function() {
        var win = this.lookupReference('popupWindow');

        if (!win) {
            win = new KitchenSink.view.form.ContactFormWindow();

            // A Window is a floating component, so by default it is not connected
            // to our main View in any way. By adding it, we are creating this link
            // and allow the window to be controlled by the main ViewController,
            // as well as be destroyed automatically along with the main View.
            //窗口是浮动的组件，因此默认情况下他和主页面没有任何联系。通过添加他，我们创造了一个连接使得窗口能够被视图控制器控制，同时也会随着主页而自动销毁。
            this.getView().add(win);
        }

        win.show();
    },

    onFormCancel: function() {
        this.lookupReference('windowForm').getForm().reset();
        this.lookupReference('popupWindow').hide();
    },

    onFormSubmit: function() {
        var formPanel = this.lookupReference('windowForm'),
            form = formPanel.getForm();

        if (form.isValid()) {
            // In a real application, this would submit the form to the configured url
            // form.submit();
            //在真实的引用中，会使用form.submit将表格提交给配合好的路由
            form.reset();
            this.lookupReference('popupWindow').hide();
            Ext.MessageBox.alert(
                'Thank you!',
                'Your inquiry has been sent. We will respond as soon as possible.'
            );
        }
    }
});