Saturday, July 13, 2013

Remot Sort : How to override SortParameters in Ext-Js Grid Panel?

When you sort using the gird, typically clicking on the column header, the dataIndex of the column will be passed as the sort properties, but not always the server will understand the grid name. for example, lets take below example.

Below is the Snap shot of the Activity Model
Ext.define('Activity', {
    extend: '',
    uses: [ActivityType, ActivityStatus]
    fields: [
        {name: 'activityTypeId', type: 'int'},
        {name: 'activityStatusTypeId', type: 'int'},
        {name: 'accountId', type: 'int'},
        {name: 'dueDate', type: 'date', dateFormat: 'm/d/Y'},

The Relevant Java Model for the Activity
public class Activity {
  @ManyToOne(Fetch = FetchType.EAGAR)
  @JoinColumn(name = "activity_type_id")
  private ActivityType activityType;

  @ManyToOne(Fetch = FetchType.EAGAR)
  @JoinColumn(name = "activity_status_type_id")
  private ActivityStatusType activityStatusType;

  @ManyToOne(Fetch = FetchType.EAGAR)
  @JoinColumn(name = "account_id")
  private Account account;

  @DateTimeFormat(pattern = "MM/dd/yyyy")
  private Date dueDate;

If you look at the variable names in Java Bean and Ext Model, you can see the difference. So when you are passing the sort parameters to your service call through, it needs to know the exact column name for example, Lets take activityStatusTypeId. If you click on the Column for Sort based on the activityStatsTypeId, the grid will pass on the dataIndex name as the property to the server. If you look at the FireBug console for the parameters, you see like this.

sort [{"property":"activityStatusTypeId", "direction":"DESC"}]

When you pass activityStatusTypeId to the service, really my server doesn't understand what activityStatusTypeId to the activity table. So we need to pass the extact column name as the sort property to make my service understand. To override the default parameters, we need to override getSortParam() in the colum config.

Ext.define('ActivitiesGridPanel', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.activitiesGridPanel,
    initComponent: function() {
       var me = this;
       Ext.applyIf(me, {
           { xtype: 'gridcolum',
             dataIndex: 'activityStatusTypeId',
             text: 'Status',
             getSortParam: function() {
                 return 'activity_status_type_id';
           { xtype: 'datecolumn',
             dataIndex: 'activityStatusTypeId',
             text: 'Due Date'
           { xtype: 'gridcolum',
             dataIndex: 'activityTypeId',
             text: 'Type'

After overriding the sortParameter for the column using getSortParam() function, if you click on the column in the gird, instead of passing the dataIndex name, it will sent out the overridden string as the sort parameter. You see the parameter in FirBug

sort [{"property":"activity_status_type_id", "direction":"DESC"}]

Happy Programming ...!!!

No comments:

Post a Comment