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",{ ?? ??? ??? ??? ??? ?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 ?? ??? ??? ?}] ?? ??? ?}] ?? ?}); ?? ? });