1. MessageBox.1
/*global Ext:false */
Ext.onReady(function () {
Ext.Msg.alert('Status', 'Changes saved successfully.');
});
=========================================================================================
2. Prompt Box
/*global Ext:false */
Ext.onReady(function () {
Ext.Msg.prompt('Name', 'Please enter your name:', function (btn, text) {
if (btn == 'ok') {
// process text value and close...
}
});
});
=========================================================================================
3. Confirm Box
/*global Ext:false */
Ext.onReady(function () {
Ext.Msg.show({
title: 'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. Would you like to save your changes?',
buttons: Ext.Msg.YESNOCANCEL,
icon: Ext.Msg.QUESTION
});
});
==============================================================================================
4. Button.1
Ext.onReady(function () {
Ext.create('Ext.Button', {
text: 'Click me',
renderTo: Ext.getBody(),
handler: function () {
alert('You clicked the button!');
}
});
});
===============================================================================================
5. Button.2
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.Button', {
text: 'Dynamic Handler Button',
renderTo: Ext.getBody(),
handler: function () {
// this button will spit out a different number every time you click it.
// so firstly we must check if that number is already set:
if (this.clickCount) {
// looks like the property is already set, so lets just add 1 to that number and alert the user
this.clickCount++;
alert('You have clicked the button "' + this.clickCount + '" times.\n\nTry clicking it again..');
} else {
// if the clickCount property is not set, we will set it and alert the user
this.clickCount = 1;
alert('You just clicked the button for the first time!\n\nTry pressing it again..');
}
}
});
});
=====================================================================================================
6. forms.1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'User Form',
height: 500,
width: 1200,
bodyPadding: 10,
defaultType: 'textfield',
layout: {
type: 'vbox'
},
items: [{
fieldLabel: 'First Name',
name: 'firstName',
allowBlank:false
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
},{
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}]
});
});
====================================================================================================
7. forms.2
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'User Form',
height: 100,
width: 800,
defaults: {
xtype: 'textfield',
labelAlign: 'top',
padding: 10
},
layout: {
type: 'hbox'
},
items: [{
fieldLabel: 'First Name',
name: 'firstName'
}, {
fieldLabel: 'Last Name',
name: 'lastName'
}, {
xtype: 'datefield',
fieldLabel: 'Date of Birth',
name: 'birthDate'
}]
});
});
====================================================================================================
8. Grid.Panel
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
});
=============================================================================================
Panel
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
});
=================================================================================================
Checkbox
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
bodyPadding: 10,
width: 300,
title: 'Pizza Order',
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Toppings',
defaultType: 'checkboxfield',
items: [{
boxLabel: 'Anchovies',
name: 'topping',
inputValue: '1',
id: 'checkbox1'
}, {
boxLabel: 'Artichoke Hearts',
name: 'topping',
inputValue: '2',
checked: true,
id: 'checkbox2'
}, {
boxLabel: 'Bacon',
name: 'topping',
inputValue: '3',
id: 'checkbox3'
}]
}],
bbar: [{
text: 'Select Bacon',
handler: function () {
Ext.getCmp('checkbox3').setValue(true);
}
}, '-',
{
text: 'Select All',
handler: function () {
Ext.getCmp('checkbox1').setValue(true);
Ext.getCmp('checkbox2').setValue(true);
Ext.getCmp('checkbox3').setValue(true);
}
}, {
text: 'Deselect All',
handler: function () {
Ext.getCmp('checkbox1').setValue(false);
Ext.getCmp('checkbox2').setValue(false);
Ext.getCmp('checkbox3').setValue(false);
}
}],
renderTo: Ext.getBody()
});
});
===============================================================================================
Combobox1
/*global Ext:false */
Ext.onReady(function () {
// The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}
//...
]
});
// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
renderTo: Ext.getBody()
});
});
=========================================================================================
Combobox2
/*global Ext:false */
Ext.onReady(function () {
var states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose State',
store: states,
queryMode: 'local',
valueField: 'abbr',
renderTo: Ext.getBody(),
// Template for the dropdown menu.
// Note the use of "x-boundlist-item" class,
// this is required to make the items selectable.
tpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '<div class="x-boundlist-item">{abbr} - {name}</div>', '</tpl>'),
// template for the content inside text field
displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '{abbr} - {name}', '</tpl>')
});
});
==========================================================================================
Field.date1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'From',
name: 'from_date',
maxValue: new Date() // limited to the current date or prior
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'To',
name: 'to_date',
value: new Date() // defaults to today
}]
});
});
=============================================================================================
Field.date2
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 300,
bodyPadding: 10,
title: 'Dates',
items: [{
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'Date',
name: 'date',
// The value matches the format; will be parsed and displayed using that format.
format: 'm d Y',
value: '2 4 1978'
}, {
xtype: 'datefield',
anchor: '100%',
fieldLabel: 'Date',
name: 'date',
// The value does not match the format, but does match an altFormat; will be parsed
// using the altFormat and displayed using the format.
format: 'm d Y',
altFormats: 'm,d,Y|m.d.Y',
value: '2.4.1978'
}]
});
});
=================================================================================================
Field.Display1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 175,
height: 120,
bodyPadding: 10,
title: 'Final Score',
items: [{
xtype: 'displayfield',
fieldLabel: 'Home',
name: 'home_score',
value: '10'
}, {
xtype: 'displayfield',
fieldLabel: 'Visitor',
name: 'visitor_score',
value: '11'
}],
buttons: [{
text: 'Update'
}]
});
});
====================================================================================================
Field.File1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
title: 'Upload a Photo',
width: 400,
bodyPadding: 10,
frame: true,
renderTo: Ext.getBody(),
items: [{
xtype: 'filefield',
name: 'photo',
fieldLabel: 'Photo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Select Photo...'
}],
buttons: [{
text: 'Upload',
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: 'photo-upload.php',
waitMsg: 'Uploading your photo...',
success: function (fp, o) {
Ext.Msg.alert('Success', 'Your photo "' + o.result.file + '" has been uploaded.');
}
});
}
}
}]
});
});
===================================================================================================
Field.Htmleditior
/*global Ext:false */
Ext.onReady(function () {
Ext.tip.QuickTipManager.init(); // enable tooltips
Ext.create('Ext.form.HtmlEditor', {
width: 580,
height: 250,
renderTo: Ext.getBody()
});
});
===================================================================================================
Field.Number1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
title: 'On The Wall',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'numberfield',
anchor: '100%',
name: 'bottles',
fieldLabel: 'Bottles of Beer',
value: 99,
maxValue: 99,
minValue: 0
}],
buttons: [{
text: 'Take one down, pass it around',
handler: function () {
this.up('form').down('[name=bottles]').spinDown();
}
}]
});
});
==================================================================================================
Field.Radio1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
title: 'Order Form',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Size',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [{
boxLabel: 'M',
name: 'size',
inputValue: 'm',
id: 'radio1'
}, {
boxLabel: 'L',
name: 'size',
inputValue: 'l',
id: 'radio2'
}, {
boxLabel: 'XL',
name: 'size',
inputValue: 'xl',
id: 'radio3'
}]
}, {
xtype: 'fieldcontainer',
fieldLabel: 'Color',
defaultType: 'radiofield',
defaults: {
flex: 1
},
layout: 'hbox',
items: [{
boxLabel: 'Blue',
name: 'color',
inputValue: 'blue',
id: 'radio4'
}, {
boxLabel: 'Grey',
name: 'color',
inputValue: 'grey',
id: 'radio5'
}, {
boxLabel: 'Black',
name: 'color',
inputValue: 'black',
id: 'radio6'
}]
}],
bbar: [{
text: 'Smaller Size',
handler: function () {
var radio1 = Ext.getCmp('radio1'),
radio2 = Ext.getCmp('radio2'),
radio3 = Ext.getCmp('radio3');
//if L is selected, change to M
if (radio2.getValue()) {
radio1.setValue(true);
return;
}
//if XL is selected, change to L
if (radio3.getValue()) {
radio2.setValue(true);
return;
}
//if nothing is set, set size to S
radio1.setValue(true);
}
}, {
text: 'Larger Size',
handler: function () {
var radio1 = Ext.getCmp('radio1'),
radio2 = Ext.getCmp('radio2'),
radio3 = Ext.getCmp('radio3');
//if M is selected, change to L
if (radio1.getValue()) {
radio2.setValue(true);
return;
}
//if L is selected, change to XL
if (radio2.getValue()) {
radio3.setValue(true);
return;
}
//if nothing is set, set size to XL
radio3.setValue(true);
}
}, '-',
{
text: 'Select color',
menu: {
indent: false,
items: [{
text: 'Blue',
handler: function () {
var radio = Ext.getCmp('radio4');
radio.setValue(true);
}
}, {
text: 'Grey',
handler: function () {
var radio = Ext.getCmp('radio5');
radio.setValue(true);
}
}, {
text: 'Black',
handler: function () {
var radio = Ext.getCmp('radio6');
radio.setValue(true);
}
}]
}
}]
});
});
===============================================================================================
Field.Spinner
/*global Ext:false */
Ext.onReady(function () {
Ext.define('Ext.ux.CustomSpinner', {
extend: 'Ext.form.field.Spinner',
alias: 'widget.customspinner',
// override onSpinUp (using step isn't neccessary)
onSpinUp: function () {
var me = this;
if (!me.readOnly) {
var val = parseInt(me.getValue().split(' '), 10) || 0; // gets rid of " Pack", defaults to zero on parse failure
me.setValue((val + me.step) + ' Pack');
}
},
// override onSpinDown
onSpinDown: function () {
var me = this;
if (!me.readOnly) {
var val = parseInt(me.getValue().split(' '), 10) || 0; // gets rid of " Pack", defaults to zero on parse failure
if (val <= me.step) {
me.setValue('Dry!');
} else {
me.setValue((val - me.step) + ' Pack');
}
}
}
});
Ext.create('Ext.form.FormPanel', {
title: 'Form with SpinnerField',
bodyPadding: 5,
width: 350,
renderTo: Ext.getBody(),
items: [{
xtype: 'customspinner',
fieldLabel: 'How Much Beer?',
step: 6
}]
});
});
==================================================================================================
Field.Text1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
allowBlank: false // requires a non-empty value
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
vtype: 'email' // requires value to be a valid email address format
}]
});
});
===================================================================================================
Field.TestArea1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.FormPanel', {
title: 'Sample TextArea',
width: 400,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'textareafield',
grow: true,
name: 'message',
fieldLabel: 'Message',
anchor: '100%'
}]
});
});
==================================================================================================
Field.Time1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
title: 'Time Card',
width: 300,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'timefield',
name: 'in',
fieldLabel: 'Time In',
minValue: '6:00 AM',
maxValue: '8:00 PM',
increment: 30,
anchor: '100%'
}, {
xtype: 'timefield',
name: 'out',
fieldLabel: 'Time Out',
minValue: '6:00 AM',
maxValue: '8:00 PM',
increment: 30,
anchor: '100%'
}]
});
});
====================================================================================================
Field.Trigger1
/*global Ext:false */
Ext.onReady(function () {
Ext.define('Ext.ux.CustomTrigger', {
extend: 'Ext.form.field.Trigger',
alias: 'widget.customtrigger',
// override onTriggerClick
onTriggerClick: function () {
Ext.Msg.alert('Status', 'You clicked my trigger!');
}
});
Ext.create('Ext.form.FormPanel', {
title: 'Form with TriggerField',
bodyPadding: 5,
width: 350,
renderTo: Ext.getBody(),
items: [{
xtype: 'customtrigger',
fieldLabel: 'Sample Trigger',
emptyText: 'click the trigger'
}]
});
});
=======================================================================================================
Form.Fieldcontainer
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
title: 'FieldContainer Example',
width: 550,
bodyPadding: 10,
items: [{
xtype: 'fieldcontainer',
fieldLabel: 'Last Three Jobs',
labelWidth: 100,
// The body area will contain three text fields, arranged
// horizontally, separated by draggable splitters.
layout: 'hbox',
items: [{
xtype: 'textfield',
flex: 1
}, {
xtype: 'splitter'
}, {
xtype: 'textfield',
flex: 1
}, {
xtype: 'splitter'
}, {
xtype: 'textfield',
flex: 1
}]
}],
renderTo: Ext.getBody()
});
});
=========================================================================================================
Form.Fieldset1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
title: 'Simple Form with FieldSets',
labelWidth: 75,
// label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
layout: 'column',
// arrange fieldsets side by side
items: [{
// Fieldset in Column 1 - collapsible via toggle button
xtype: 'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
defaultType: 'textfield',
defaults: {
anchor: '100%'
},
layout: 'anchor',
items: [{
fieldLabel: 'Field 1',
name: 'field1'
}, {
fieldLabel: 'Field 2',
name: 'field2'
}]
}, {
// Fieldset in Column 2 - collapsible via checkbox, collapsed by default, contains a panel
xtype: 'fieldset',
title: 'Show Panel',
// title or checkboxToggle creates fieldset header
columnWidth: 0.5,
checkboxToggle: true,
collapsed: true,
// fieldset initially collapsed
layout: 'anchor',
items: [{
xtype: 'panel',
anchor: '100%',
title: 'Panel inside a fieldset',
frame: true,
height: 52
}]
}]
});
});
=====================================================================================================
Form.Label1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
title: 'Field with Label',
width: 400,
bodyPadding: 10,
renderTo: Ext.getBody(),
layout: {
type: 'hbox',
align: 'middle'
},
items: [{
xtype: 'textfield',
hideLabel: true,
flex: 1
}, {
xtype: 'label',
forId: 'myFieldId',
text: 'My Awesome Field',
margin: '0 0 0 10'
}]
});
});
======================================================================================================
Form.panel1
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
title: 'Simple Form',
bodyPadding: 5,
width: 350,
// The form will submit an AJAX request to this URL when submitted
url: 'save-form.php',
// Fields will be arranged vertically, stretched to full width
layout: 'anchor',
defaults: {
anchor: '100%'
},
// The fields
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
allowBlank: false
}, {
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}],
// Reset and Submit buttons
buttons: [{
text: 'Reset',
handler: function () {
this.up('form').getForm().reset();
}
}, {
text: 'Submit',
formBind: true,
//only enabled once the form is valid
disabled: true,
handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
success: function (form, action) {
Ext.Msg.alert('Success', action.result.msg);
},
failure: function (form, action) {
Ext.Msg.alert('Failed', action.result.msg);
}
});
}
}
}],
renderTo: Ext.getBody()
});
});
====================================================================================================
Form.RadioGroup
/*global Ext:false */
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
title: 'RadioGroup Example',
width: 300,
height: 125,
bodyPadding: 10,
renderTo: Ext.getBody(),
items: [{
xtype: 'radiogroup',
fieldLabel: 'Two Columns',
// Arrange radio buttons into two columns, distributed vertically
columns: 2,
vertical: true,
items: [{
boxLabel: 'Item 1',
name: 'rb',
inputValue: '1'
}, {
boxLabel: 'Item 2',
name: 'rb',
inputValue: '2',
checked: true
}, {
boxLabel: 'Item 3',
name: 'rb',
inputValue: '3'
}, {
boxLabel: 'Item 4',
name: 'rb',
inputValue: '4'
}, {
boxLabel: 'Item 5',
name: 'rb',
inputValue: '5'
}, {
boxLabel: 'Item 6',
name: 'rb',
inputValue: '6'
}]
}]
});
});
