Dynamic Columns in Salesforce using ExtJS
I have spend almost a week in finding out how to display dynamic columns in ExtJS grid panel. .. Here are steps to do the same..
1. Create an JSON output in sales force.
Apex page :
<apex:outputText escape="false" value="{!Output}"/>
</apex:page>
Controller :-
public ListViewData()
{
}
public string getOutput()
{
JSONGenerator JSONGen = JSON.createGenerator(true);
//JSONGen.writeStartObject(); //Begin Primary JSON Object
List<ListViewColumn> ListViewColumns = new List<ListViewColumn>();
ListViewColumns.add(new ListViewColumn(Account.Id.getDescribe()));
ListViewColumns.add(new ListViewColumn(Account.Type.getDescribe()));
ListViewColumns.add(new ListViewColumn(Account.Name.getDescribe()));
ListViewColumns.add(new ListViewColumn(Account.Phone.getDescribe()));
ListViewColumns.add(new ListViewColumn(Account.CreatedDate.getDescribe()));
JSONGen.writeStartObject();
//JSONGen.writeStringField('SomeField', 'Some Value');
JSONGen.writeNumberField('totalCount', 5);
JSONGen.writeObjectField('ListViewColumns', ListViewColumns);
//JSONGen.writeObjectField('Records', [SELECT Parent.Id,Parent.Name,Id,Type,Name,Phone,CreatedDate FROM Account LIMIT 10]);
JSONGen.writeObjectField('Records', [SELECT Id,Type,Name,Phone,CreatedDate FROM Account LIMIT 5]);
JSONGen.writeEndObject();
/*
JSONGen.writeFieldName('ListViewColumns');
JSONGen.writeStartArray();
JSONGen.writeStartObject();
JSONGen.writeStringField('Label', 'Account Name');
JSONGen.writeStringField('Name', 'Name');
JSONGen.writeEndObject();
JSONGen.writeStartObject();
JSONGen.writeStringField('Label', 'Account Id');
JSONGen.writeStringField('Name', 'Id');
JSONGen.writeEndObject();
JSONGen.writeStartObject();
JSONGen.writeStringField('Label', 'Account Type');
JSONGen.writeStringField('Name', 'Type');
JSONGen.writeEndObject();
JSONGen.writeStartObject();
JSONGen.writeStringField('Label', 'Account Phone');
JSONGen.writeStringField('Name', 'Phone');
JSONGen.writeEndObject();
JSONGen.writeEndArray();
/*
//Produces Error: Apex Type unsupported in JSON: Schema.DescribeFieldResult (through reference chain: java.util.ArrayList[0])
List<Schema.DescribeFieldResult> DescribeFieldResults = new List<Schema.DescribeFieldResult>();
DescribeFieldResults.add(Account.Id.getDescribe());
DescribeFieldResults.add(Account.Type.getDescribe());
DescribeFieldResults.add(Account.Name.getDescribe());
DescribeFieldResults.add(Account.Phone.getDescribe());
DescribeFieldResults.add(Account.CreatedDate.getDescribe());
JSONGen.writeStartObject();
JSONGen.writeObjectField('ListViewColumns', DescribeFieldResults);
JSONGen.writeEndObject();
*/
/*
List<ListViewColumn> ListViewColumns = new List<ListViewColumn>();
ListViewColumns.add(new ListViewColumn(Account.Id.getDescribe()));
ListViewColumns.add(new ListViewColumn(Account.Type.getDescribe()));
ListViewColumns.add(new ListViewColumn(Account.Name.getDescribe()));
ListViewColumns.add(new ListViewColumn(Account.Phone.getDescribe()));
ListViewColumns.add(new ListViewColumn(Account.CreatedDate.getDescribe()));
JSONGen.writeStartObject();
JSONGen.writeObjectField('ListViewColumns', ListViewColumns);
JSONGen.writeEndObject();
JSONGen.writeStartObject();
JSONGen.writeObjectField('Records', [SELECT Id,Type,Name,Phone,CreatedDate FROM Account LIMIT 10]);
JSONGen.writeEndObject();
*/
/*
JSONGen.writeFieldName('Records');
JSONGen.writeStartArray();
for (Account AccObj : [SELECT Id,Type,Name,Phone FROm Account LIMIT 10])
{
JSONGen.writeObject(AccObj);
JSONGen.writeStartObject();
JSONGen.writeStringField('Name', AccObj.Name);
JSONGen.writeStringField('Id', AccObj.Id);
JSONGen.writeStringField('Type', AccObj.Type);
JSONGen.writeStringField('Phone', AccObj.Phone);
JSONGen.writeEndObject();
}
JSONGen.writeEndArray();
*/
//JSONGen.writeEndArray(); //End Primary JSON Object
return JSONGen.getAsString();
}
public class ListViewColumn
{
public string FieldLabel;
public string FieldName;
public string DisplayType;
public boolean isNameField;
public boolean isSortable;
public boolean isUpdateable;
public ListViewColumn(Schema.DescribeFieldResult DFR)
{
this.FieldLabel = DFR.getLabel();
this.FieldName = DFR.getName();
this.DisplayType = string.valueof(DFR.getType());
this.isNameField = DFR.isNameField();
this.isSortable = DFR.isSortable();
this.isUpdateable = DFR.isUpdateable();
}
}
}
3. Create a JSON consumer page.
Apex page code:-
<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" />
Displaying Grid with Dynamic Columns using JSON...
<div id="example-grid"></div>
<script type="text/javascript" >
Ext.onReady(function(){
var _cols = [];
Ext.Ajax.request({
url: 'apex/ListViewData',
method:'POST',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
// alert(response.responseText);
store.loadData(obj.Records);
//alert(store.getCount());
colStore.loadData(obj.ListViewColumns);
// alert(colStore.getCount());
colStore.each(function(f) {
//alert(f.get('FieldName'));
_cols.push(Ext.create('Ext.grid.column.Column', {
text: f.get('FieldLabel'),
dataIndex: f.get('FieldName')
}));
});
// create the grid
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: _cols,
renderTo: 'example-grid',
width: 540,
height: 200
});
} ,
failure: function(response, opts) {
alert('server-side failure with status code ' + response.status);
}
});
});
Ext.define('ColumnModel', { //Defining a model, which is like an object
extend : 'Ext.data.Model',
fields : [
{name: 'isUpdateable', type: 'string'},
{name: 'isSortable', type: 'string'},
{name: 'isNameField', type: 'string'},
{name: 'FieldName', type: 'string'},
{name: 'FieldLabel', type: 'string'},
{name: 'DisplayType', type: 'string'}
]
});
var colStore = Ext.create('Ext.data.Store', { //Create a store, which is like collection of records with sorting and grouping capability
model : 'ColumnModel', //Associate your store with Model
proxy : {
type : 'memory',
reader : {
type : 'json',
}
}
});
Ext.define('AccountModel', { //Defining a model, which is like an object
extend : 'Ext.data.Model',
fields : [
{name: 'attributes', type: 'string'},
{name: 'Id', type: 'string'},
{name: 'Type', type: 'string'},
{name: 'Name', type: 'string'},
{name: 'Phone', type: 'string'},
{name: 'CreatedDate', 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',
}
}
});
</script>
</apex:page>
There pages are self explanatory , email me sahildagar@gmail.com in case any assistance is required.
