Developing Mobile…Force.com and Sencha-Part 2, Step 1: Add Controls and Event Handling

PocketCRM.view.LeadsList

//The Lead list view.
Ext.define("PocketCRM.view.LeadsList", {
    extend: "Ext.Container",

    //It uses the base list class.
    requires: "Ext.dataview.List",
    alias: "widget.leadslistview",

    config: {

        //Take up the full space available in the parent container.
        layout: {
            type: 'fit'
        },

        //Add the components to include within the list view.
        items: [
            {
            xtype: "toolbar",
            title: "PocketCRM",
            docked: "top",

            items: [
                {
                xtype: 'spacer'
            },
                {
                xtype: "button",
                text: 'New',
                ui: 'action',
                itemId: "newButton"
            }
            ]
        },
            {
            xtype: "toolbar",
            docked: "bottom",
            items: [
                {
                xtype: "button",
                iconCls: "refresh",
                iconMask: true,
                itemId: "syncButton"
            }
            ]
        },
            {
            //The main list and its properties.
            xtype: "list",
            store: "Leads",
            itemId: "leadsList",

            onItemDisclosure: true,
            indexBar: true,
            grouped: true,
            disableSelection: false,

            //The template for display if the Store is empty of records.
            //Note the style to control visual presentation.
            loadingText: "Loading Leads...",
            emptyText: '<div class="leads-list-empty-text">No leads found.</div>',

            //The template for the display of each list item representing one record.
            //One row will display for each record in the data Store.
            //The fields referenced are from the entity's Model.
            itemTpl: '<div class="list-item-line-main">{LastName}, {FirstName}</div>' + '<div class="list-item-line-detail">{Company}</div>' + '<div class="list-item-line-detail">{Title} - Phone: {Phone} </div>' + '<div class="list-item-line-detail">{Email}</div>',

        }],

        listeners: [{
            delegate: "#newButton",
            event: "tap",
            fn: "onNewButtonTap"
        }, {
            delegate: "#syncButton",
            event: "tap",
            fn: "onSyncButtonTap"
        }, {
            delegate: "#leadsList",
            event: "disclose",
            fn: "onLeadsListDisclose"
        }]
    },

    onSyncButtonTap: function () {
        console.log("syncLeadCommand");
        this.fireEvent("syncLeadCommand", this);
    },

    onNewButtonTap: function () {
        console.log("newLeadCommand");
        this.fireEvent("newLeadCommand", this);
    },

    onLeadsListDisclose: function (list, record, target, index, evt, options) {
        console.log("editLeadCommand");
        this.fireEvent('editLeadCommand', this, record);
    }

});