Developing Mobile…Force.com and Sencha-Part 2, Step 2: Add A Lead Form View

PocketCRM.view.LeadEditor

Ext.define("PocketCRM.view.LeadEditor", {
    extend: "Ext.form.Panel",
    requires: "Ext.form.FieldSet",
    alias: "widget.leadeditorview",

    config: {

        scrollable: 'vertical',

        items: [{
            xtype: "toolbar",
            docked: "top",
            title: "Edit Lead",

            items: [
                {
                xtype: "button",
                ui: "back",
                text: "Home",
                itemId: "backButton"
            },
                {
                xtype: "spacer"
            },
                  {
                xtype: "button",
                ui: "action",
                text: "Save",
                itemId: "saveButton"
            }]
        },
                     {
            xtype: "toolbar",
            docked: "bottom",
            items: [
                {
                xtype: "button",
                iconCls: "trash",
                iconMask: true,
                itemId: "deleteButton"
            }]
        },
                     {
            xtype: "fieldset",
            title: 'Lead Info',
            items: [
                {
                xtype: 'textfield',
                name: 'FirstName',
                label: 'First Name'
            },
                {
                xtype: 'textfield',
                name: 'LastName',
                label: 'Last Name',
                required: true
            },
                {
                xtype: 'textfield',
                name: 'Company',
                label: 'Company',
                required: true
            },
                {
                xtype: 'textfield',
                name: 'Title',
                label: 'Title'
            },
                {
                xtype: 'selectfield',
                name: 'Status',
                label: 'Status',
                required: true,
                value: 'Open - Not Contacted',
                options: [
                    {
                    text: 'Open - Not Contacted',
                    value: 'Open - Not Contacted'
                },
                    {
                    text: 'Working - Contacted',
                    value: 'Working - Contacted'
                },
                    {
                    text: 'Closed - Converted',
                    value: 'Closed - Converted'
                },
                    {
                    text: 'Closed - Not Converted',
                    value: 'Closed - Not Converted'
                }
                ],
            },
                ]
        },
                     {
            xtype: "fieldset",
            title: 'Contact Info',
            items: [
                {
                xtype: 'textfield',
                name: 'Phone',
                label: 'Phone',
                component: {
                    type: 'tel'
                }
            },
                {
                xtype: 'textfield',
                name: 'MobilePhone',
                label: 'Mobile',
                component: {
                    type: 'tel'
                }
            },
                {
                xtype: 'emailfield',
                name: 'Email',
                label: 'Email Address'
            },
                ]
        },
                   ],
        listeners: [
            {
            delegate: "#backButton",
            event: "tap",
            fn: "onBackButtonTap"
        },
            {
            delegate: "#saveButton",
            event: "tap",
            fn: "onSaveButtonTap"
        },
            {
            delegate: "#deleteButton",
            event: "tap",
            fn: "onDeleteButtonTap"
        }
        ]
    },

    onSaveButtonTap: function () {
        console.log("saveLeadCommand");
        this.fireEvent("saveLeadCommand", this);
    },

    onDeleteButtonTap: function () {
        console.log("deleteLeadCommand");
        this.fireEvent("deleteLeadCommand", this);
    },

    onBackButtonTap: function () {
        console.log("backToHomeCommand");
        this.fireEvent("backToHomeCommand", this);
    }

});