forcementor

//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: {

forcementor

https://c.{SERVER_NAME}.visual.force.com/apex/PocketCRM

forcementor

//The Lead Store, this version will simply load with mock JSON data.
Ext.define("PocketCRM.store.Leads", {
    extend: "Ext.data.Store",
    requires: "Ext.data.proxy.LocalStorage",

    config: {

        model: "PocketCRM.model.Lead",

        //Fetch the data from the custom Apex controller method 

forcementor

<apex:component controller="PocketCRMLeadController" >

forcementor

public class PocketCRMLeadController {
    private string leads;

    //Constructor.
    public PocketCRMLeadController() {

        //Fetch a limited set of Leads to return to the Sencha Data Store on load. 
        List < Lead > leadsList = [SELECT
                                              FirstName
                                              , LastName

forcementor

//Run this code in an APEX Execute Anonymous window:
List<Lead> leadList = [SELECT FirstName ,LastName ,Company ,Title ,Phone ,Email ,Status FROM Lead LIMIT 5];
system.debug(JSON.serializePretty(leadList));

/*Your results will be as follows in the DEBUG LOG.
*Find the USER_DEBUG line and copy all the JSON 
*starting with the '[' delimiter thru the ending ']' delimiter
*and paste into your data store as the data content.  
*The 'attributes' content is not used by Sencha, but you 
*don't have to remove them as they will simply be ignored.

forcementor

Ext.application({
    name: "PocketCRM",

    //Load the various MVC components into memory.
    models: ["Lead"],
    stores: ["Leads"],
    controllers: ["Leads"],
    views: ["LeadsList"],

    //The application's startup routine once all components are loaded.

forcementor

//==============================================================================================
//VIEWS
//Views display data to your users and gather input from them; 
//they also emit events about your user interaction.
//==============================================================================================
//The Lead list view.
Ext.define("PocketCRM.view.LeadsList", {
    extend: "Ext.Container",

    //It uses the base list class.

forcementor

//==============================================================================================
//CONTROLLERS
//Controllers manage the communication of your application and the coordination between the
//views and the model; they listen for the events emitted by the views and react accordingly.
//==============================================================================================    
//The controller for the Leads list view
Ext.define("PocketCRM.controller.Leads", {
    extend: "Ext.app.Controller",

    config: {},

forcementor

//==============================================================================================  
//MODELS
//Models are the objects on your application.
//==============================================================================================  
//The Lead model will include whatever fields are necssary to manage.
Ext.define("PocketCRM.model.Lead", {
    extend: "Ext.data.Model",

    config: {