Ext JavaScripit

 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'
            }]
        }]
    });
});