Skip to content

Instantly share code, notes, and snippets.

@ExtAnimal
Created May 10, 2017 07:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ExtAnimal/89bc46993136f10cd201b3fe54935b11 to your computer and use it in GitHub Desktop.
Save ExtAnimal/89bc46993136f10cd201b3fe54935b11 to your computer and use it in GitHub Desktop.
/**
* 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.
*
* Note that Tab based navigation within the modal window is confined to within the window.
*/
Ext.define('KitchenSink.view.forms.ContactForm', {
extend: 'Ext.form.Panel',
xtype: 'form-contact',
controller: 'forms-contact',
title: 'Contact Us',
requires: [
'Ext.Dialog'
],
//<example>
otherContent: [{
type: 'Controller',
path: 'modern/src/view/forms/ContactFormController.js'
}],
profiles: {
defaults: {
maxDialogWidth: 550,
nameLayout: undefined,
nameMargin: '0 5',
width: 500
},
phone: {
maxDialogWidth: undefined,
maximized: true,
nameLayout: 'vbox'
}
},
//</example>
bodyPadding: 20,
width: '${width}',
autoSize: true,
dialog: {
xtype: 'dialog',
title: 'Dialog',
maximized: '${maximized}',
closable: true,
defaultFocus: 'textfield',
maskTapHandler: 'onCancel',
bodyPadding: 10,
layout: 'fit',
maxWidth: '${maxDialogWidth}',
items: [{
xtype: 'formpanel',
reference: 'form',
autoSize: true,
items: [{
xtype: 'containerfield',
label: 'Name',
required: true,
layout: '${nameLayout}',
defaults: {
flex: 1
},
items: [{
name: 'firstName',
placeholder: 'First',
required: true
}, {
flex: null,
name: 'middleInitial',
placeholder: 'Middle',
margin: '${nameMargin}',
width: 50
}, {
name: 'lastName',
placeholder: 'Last',
required: true
}]
}, {
xtype: 'emailfield',
label: 'Email',
allowBlank: false,
required: true,
validators: 'email'
}, {
label: 'Subject',
allowBlank: false,
required: true
}, {
xtype: 'textareafield',
label: 'Message',
flex: 1,
allowBlank: false,
required: true
}]
}],
// We are using standard buttons on the button
// toolbar, so their text and order are consistent.
buttons: {
ok: 'onOK',
cancel: 'onCancel'
}
},
items: [{
xtype: 'component',
margin: '0 0 20 0',
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.'
}],
buttons : ['->', {
text: 'Contact Us',
handler: 'showWindow'
}, '->']
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment