ExtJs4_ContactUsForm(联系我们FOMR示例)浅析;

/**
 * ContactUsForm_联系我们FOMR示例
 * 本例亮点：fieldcontainer组件的使用；
 */
Ext.require([
    "Ext.form.*"
]);
Ext.onReady(function() {
    var win;    // 存储弹出窗体；
    function showContactForm() {
        if(!win) {
            var form = Ext.widget('form', {
                layout: {
                    type: "vbox",    // 垂直布局；
                    //child items are stretched(伸展) horizontally to fill the width of the container;
                    align: "stretch"    
                },
                baseCls: "x-plain",
                border: false,
                bodyPadding: 10,
                
                fieldDefaults: {
                    labelAlign: "top",
                    labelWidth: 100,
                    labelStyle: "font-weight: bold;"
                },
                defaults: {
                    margins: "0 0 10 0"
                },
                
                items: [{
                    xtype: "fieldcontainer",
                    fieldLabel: "YourName",
                    labelStyle: "font-weight: bold; padding: 0;",
                    
                    layout: "hbox",    // 水平布局；
                    defaultType: "textfield",
                    fieldDefaults: {
                        labelAlign: "top"
                    },
                    
                    items: [{
                        fieldLabel: "First",
                        name: "firstName",
                        flex: 1,
                        allowBlank: false
                    }, {
                        fieldLabel: "MI",
                        name: "middleInitial",
                        width: 40,
                        margins: "0 0 0 5"
                    }, {
                        fieldLabel: "Last",
                        name: "lastName",
                        flex: 2,
                        allowBlank: false,
                        margins: "0 0 0 5"
                    }]
                }, {
                    fieldLabel: "邮箱地址",
                    name: "email",
                    xtype: "textfield",
                    vtype: "email",
                    allowBlank: false
                }, {
                    fieldLabel: "主题",
                    name: "subject",
                    xtype: "textfield",
                    allowBlank: false
                }, {
                    fieldLabel: "内容",
                    name: "messege",
                    xtype: "textareafield",
                    labelAlign: "top",
                    flex: 1,
                    margins: "0",
                    allowBlank: false
                }],
                
                buttons: [{
                    text: "取消",
                    handler: function(btn) {
                        btn.up("form").getForm().reset();
                        btn.up("window").hide();
                    }
                }, {
                    text: "发送",
                    handler: function(btn) {
                        var bf = btn.up("form").getForm();
                        if(bf.isValid()) {
                            bf.reset();
                            btn.up("window").hide();
                            Ext.MessageBox.alert("Thank you!",
                                "Your inquiry has been sent. We will respond as soon as possible.")
                        }
                    }
                }]
            });
            
            win = Ext.widget('window', {
                title: "联系我们",
                
                width: 400,
                height: 450,
                resizable: true,
                minHeight: 400,
                model: true,
                closeAction: "hide",
                layout: 'fit',
                
                items: form
            });
        }
        win.show();
    }
    
    var mainpanel = Ext.widget('panel', {
        renderTo: Ext.getBody(),
        
        title: "欢迎",
        frame: true,
        width: 500,
        bodyPadding: 20,
        
        items: [{
            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.",
            style: "margin-bottom: 20px;"
        }, {
            xtype: "container", // 采用容器来装载按钮；
            style: "text-align: center;",     // 居中显示容器内容；
            items: [{
                xtype: "button",
                scale: "large",
                text: "联系我们",
                handler: showContactForm
            }]
        }]
    });
    
});