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.
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 🙂
SriniForce 