Displaying a grid in Salesforce with the help of ExtJS

As ExtJS growing rapidly in a javascript world, you might wanted to embed these features in your salesforce instance(s). Are you excited to learn something with ExtJS, then here is the blog on how to get started with ExtJS.

This is a simple blog post which describes about how to display an ExtJS grid in salesforce.

Image

Here is the page code for above example:

    <apex:page controller="myExtjs1">
    //These statements are used to insert the required ExtJS script and their related CSS
	<script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.7-gpl/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.7-gpl/resources/css/ext-all.css" />
    <apex:form >
        <div id="gridSpace"></div> //This is the div tag which renders our extjs component
    </apex:form>

    <script type="text/javascript" >
	    Ext.ns("Ext.Srini"); //Defining a namespace is best practice in ExtJS
	    Ext.onReady(function(){ //This is a execution point
		    var srinipanel = new Ext.create('Ext.Srini.srinipanel', {   //This is to create our custom panel
		            renderTo: gridSpace,
		            title : 'All Accounts'
		        });
	
	        myExtjs1.getAllAccounts(function(result, er){ //This method is used to call our controller method
						                var res = Ext.decode(result);
						                store.loadData(res.Records);
	            					}, {escape:false});
   		});
   		
   		Ext.define('AccountModel', { //Defining a model, which is like an object
	        extend	: 'Ext.data.Model',
	        fields	: [
			            {name: 'Id', type: 'string'},
			            {name: 'Name', type: 'string'},
			            {name: 'Phone', type: 'string'},
			            {name: 'Type', type: 'string'}
	    			  ]
	    });
	    
		var store = Ext.create('Ext.data.Store', { //Create a store, which is like collection of records with sorting and grouping capability
	                        model 		: 'AccountModel', //Associate your store with Model
	                        proxy 		: {
				                            type 	: 'memory',
				                            reader	: {
			                                	type : 'json',
				                          	}
	                       				  }
	                    });
	    
	    Ext.define('Ext.Srini.srinipanel', { //Defining a panel in order to display our data
	        extend		: 'Ext.grid.Panel',
	        alias 		: 'widget.srinipanel',
	        name 		: 'srinipanel',
	        columnLines : true,
	        autoScroll	: true,
	        singleSelect: true,
	        selType		: 'cellmodel',
	        border		: true,
	        height		: 400,
	        width		: 600,
	        store		: store, //Associate with our store
	        columns 	: [ //Define the required columns
		                    {
		                        text 		: 'Id',
		                        dataIndex	: 'Id',
		                        flex		: 0.3
		                    },
		                    {
		                        text 		: 'Account Name',
		                        dataIndex 	: 'Name',
		                        flex 		: 0.3
		                    },
		                    {
		                        text 		: 'Account Type',
		                        dataIndex 	: 'Type',
		                        flex 		: 0.3
		                    },
		                    {
		                        text 		: 'Phone',
		                        dataIndex 	: 'Phone',
		                        flex 		: 0.3
		                    }
		            	],
		});
    </script>
</apex:page>

Here is the controller code:

global class myExtjs1 {
    @RemoteAction
    global static String getAllAccounts() //Need to define as a remote action as we will be calling this through javascript
    {
        List<Account> accounts = [SELECT Id, Name, Type, Phone FROM Account];
        String JSONString = JSON.serialize(accounts);//This is how we can serailize our response into JSON format
        return '{\"Records\":' +JSONString+', \"error\": \"null\", \"status\":\"SUCCESS\", \"count\":\"' + accounts.size() + '\" }';
    }
}

Let me know if you have any questions to get started and have a happy coding 🙂

Advertisements
This entry was posted in Apex, salesforce, Salesforce Tips & Tricks, Visualforce and tagged , . Bookmark the permalink.

15 Responses to Displaying a grid in Salesforce with the help of ExtJS

  1. sfdc guy says:

    Thank you for an excellent example. I’ve been looking for something like this for a while. Will you be showing more examples in using ExtJS in Salesforce. I am interested in seeing examples where the code traverse more than one page and passing parameters between them with integration to salesforce of course.

    • Srini says:

      Sure, will do it going forward

      Thanks
      Srini

      • Nagaraju says:

        Hi Srini, I tried the same example but i am unable to get the grid in the output page. even i am not getting any errors.

        //This is the div tag which renders our extjs component

        Ext.ns(“Ext.Srini”); //Defining a namespace is best practice in ExtJS
        Ext.onReady(function(){ //This is a execution point
        var srinipanel = new Ext.create(‘Ext.Srini.srinipanel’, { //This is to create our custom panel
        renderTo: gridSpace,
        title : ‘All Accounts’
        });

        UserManagerController.getAllAccounts(function(result, er){ //This method is used to call our controller method
        var res = Ext.decode(result);
        store.loadData(res.Records);
        }, {escape:false});
        });

        Ext.define(‘AccountModel’, { //Defining a model, which is like an object
        extend : ‘Ext.data.Model’,
        fields : [
        {name: ‘Id’, type: ‘string’},
        {name: ‘Name’, type: ‘string’},
        {name: ‘Phone’, type: ‘string’},
        {name: ‘Type’, type: ‘string’}
        ]
        });

        var store = Ext.create(‘Ext.data.Store’, { //Create a store, which is like collection of records with sorting and grouping capability
        model : ‘AccountModel’, //Associate your store with Model
        proxy : {
        type : ‘memory’,
        reader : {
        type : ‘json’,
        }
        }
        });

        Ext.define(‘Ext.Srini.srinipanel’, { //Defining a panel in order to display our data
        extend : ‘Ext.grid.Panel’,
        alias : ‘widget.srinipanel’,
        name : ‘srinipanel’,
        columnLines : true,
        autoScroll : true,
        singleSelect: true,
        selType : ‘cellmodel’,
        border : true,
        height : 400,
        width : 600,
        store : store, //Associate with our store
        columns : [ //Define the required columns
        {
        text : ‘Id’,
        dataIndex : ‘Id’,
        flex : 0.3
        },
        {
        text : ‘Account Name’,
        dataIndex : ‘Name’,
        flex : 0.3
        },
        {
        text : ‘Account Type’,
        dataIndex : ‘Type’,
        flex : 0.3
        },
        {
        text : ‘Phone’,
        dataIndex : ‘Phone’,
        flex : 0.3
        }
        ],
        });

        =============================================================

        global with sharing class UserManagerController

        {
        @RemoteAction
        global static String getAllAccounts() //Need to define as a remote action as we will be calling this through javascript
        {
        List accounts = [SELECT Id, Name, Type, Phone FROM Account];
        String JSONString = JSON.serialize(accounts);//This is how we can serailize our response into JSON format
        return ‘{\”Records\”:’ +JSONString+’, \”error\”: \”null\”, \”status\”:\”SUCCESS\”, \”count\”:\”‘ + accounts.size() + ‘\” }’;
        }
        }

      • Srini says:

        Hello Nagaraju,

        Seems to be you are missing the div tag in your code, add the div tag and use chrome developer tools or firefox firebug to debug this.

        Hope this helps

        Thanks
        Srini

  2. yudish says:

    Hello nagaraju
    Put single quote to gridspace
    renderTo: ‘gridSpace’,

  3. yudish says:

    Hello ,
    How to add drag and drop functionality to that table?

  4. yudish says:

    hello…can you make the example above more complex… that using an editable grid…and send the updated data to salesforce?

  5. anand says:

    Thank you. This example doesn’t seem to work in Chrome. Works perfectly in firefox. In Chrome, I get an “Uncaught reference error. Ext.js is not defined”. Do you know why ?

    • anand says:

      Got the solution. Chrome didn’t like that the js file were coming from unsecured source ( http:). I moved the js files in to a static resource and everything worked ok

  6. Sandeep says:

    Can you please tell me how to pass the store data to controller.
    When I tried to pass to controller it was giving error.
    Below is the code I was trying :

    SenchaGridTesting.getAllDeliverables(store.data.items, function(result, er){ //This method is used to call our controller method
    var res = Ext.decode(result);
    store.loadData(res.Records);
    }, {escape:false});

  7. Bharat Chand says:

    Thanks Bro.

  8. Victor says:

    Hi Srini,

    I am new to ExtJS(JavaScript) and remoting. I tried testing your code in my org and I don’t see a grid getting displayed. Do I have to do anything else other than copying your code to Visualforce and Apex.

    I would really appreciate if you could help me out.
    -Vic

  9. ben says:

    hi srini,
    its should be very helpful for me .and send a code how to do this grid into editable..

  10. Cool.
    Here is a cool link to understand the best practices for using extjs with salesforce
    http://extjswithsandeesh.blogspot.in/2012/07/extjs-with-salesforce-best-practices.html

  11. Abhishek Kulkarni says:

    Hi , i am new to Extjs . for the above code i am getting following error :
    Uncaught ReferenceError: myExtjs1 is not defined

    Can anybody help me with this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s