contact-form－经典弹出

ExtJS里handler
handler与Action相关联，一个Action可以有多个Component引用；

Action是一个可被共享的对象，有五个主要的属性：text, handler, iconCls, disabled, hidden

component的构建方式比较有意思：

new Ext.Button(action)

是Button接收一个Action对象作为构造参数吗？但是查看Button的API却没有发现action属性。反而Button的构造参数是一个(Object config)，也就是说，只是一个配置对象（包含各种属性），而Action的五个属性正好Button也都有，所以，可以接收一个Action来进行构造。

其他属性不考虑，看handler，Button中的handler配置项文档说明，这个handler是与click Event关联的。也就是说，click是Button这个Component的首要Event（参考Action中handler的文档），这就是Handler的运行方式：被某个组件的首要Event所触发。

Ext.require([
'Ext.form.*'
]);

Ext.onReady(function() {

var win;

function showContactForm() {
if (!win) {
var form = Ext.widget('form', {
layout: {
type: 'vbox',
align: 'stretch'
},
border: false,
bodyPadding: 10,

fieldDefaults: {
labelAlign: 'top',
labelWidth: 100,
labelStyle: 'font-weight:bold'
},
defaults: {
margins: '0 0 10 0'
},

items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Your Name',
labelStyle: 'font-weight:bold;padding:0',
layout: 'hbox',
defaultType: 'textfield',

fieldDefaults: {
labelAlign: 'top'
},

items: [{
flex: 1,
name: 'firstName',
fieldLabel: 'First',
allowBlank: false
}, {
width: 30,
name: 'middleInitial',
fieldLabel: 'MI',
margins: '0 0 0 5'
}, {
flex: 2,
name: 'lastName',
fieldLabel: 'Last',
allowBlank: false,
margins: '0 0 0 5'
}]
}, {
xtype: 'textfield',
fieldLabel: 'Your Email Address',
vtype: 'email',
allowBlank: false
}, {
xtype: 'textfield',
fieldLabel: 'Subject',
allowBlank: false
}, {
xtype: 'textareafield',
fieldLabel: 'Message',
labelAlign: 'top',
flex: 1,
margins: '0',
allowBlank: false
}],

buttons: [{
text: 'Cancel',
handler: function() {
this.up('form').getForm().reset();
this.up('window').hide();
}
}, {
text: 'Send',
handler: function() {
if (this.up('form').getForm().isValid()) {
// In a real application, this would submit the form to the configured url
// this.up('form').getForm().submit();
this.up('form').getForm().reset();
this.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: 'Contact Us',
closeAction: 'hide',
width: 400,
height: 400,
minHeight: 400,
layout: 'fit',
resizable: true,
modal: true,
items: form
});
}
win.show();
}

var mainPanel = Ext.widget('panel', {
renderTo: Ext.getBody(),
title: 'Welcome!',
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',
cls: 'contactBtn',
scale: 'large',
text: 'Contact Us',
handler: showContactForm
}]
}]
});

});