Saiket Podder's CyberSpace ^3.0

ExtJS a great JS framework for giving a rich user experience but when you start working it then you need some time to really get use to with this framework. The main challenge is to debug the application. Off course firebug is there but still when firebug point you to the ext source then it’s hard to determine the problem. You can Google for online help but according to my experience I am hardly get what I want. Then I go through the ext-all-debug.js file and determine which function does what. Same thing happened when wanted to customize the sorting feature of ExtJS Gridview.

Requirement is like following.

• Default GridView sorting should be Disable
  • As default sorting only done on client side data.
  • As we doing paging at database by using Limit and offset
  • As need sorting for entire result set
• Sorting should be done by query in database and only paged result return to client
• Sorting should be AJAXified without changing sorting interaction of gridview panel

Steps for get the work done :
 

• First I found the sort property of store is responsible for sorting.
• Then check the ext all debug page to see how they implement the code. The code is like following.

  sort: function(fieldName, dir, cellId) {  
        var f = this.fields.get(fieldName);
          if (!f) {
              return false;
          }
          if (!dir) {
              if (this.sortInfo && this.sortInfo.field == f.name) { // toggle sort dir
                  dir = (this.sortToggle[f.name] || 'ASC').toggle('ASC', 'DESC');
              } else {
                  dir = f.sortDir;
              }
          }
          var st = (this.sortToggle) ? this.sortToggle[f.name] : null;
          var si = (this.sortInfo) ? this.sortInfo : null;
  
          this.sortToggle[f.name] = dir;
          this.sortInfo = { field: f.name, direction: dir };
          if (!this.remoteSort) {
              this.applySort();
              this.fireEvent('datachanged', this);
          } else {
              if (!this.load(this.lastOptions)) {
                  if (st) {
                      this.sortToggle[f.name] = st;
                  }
                  if (si) {
                      this.sortInfo = si;
                  }
              }
          }
      }

• Now we need to the customize the above function .For customization we need to override the function in our own js files so, we need to override like following

  Ext.override(Ext.data.Store, {
     sort: function CustomSorting(fieldName, dir, cellId){ 
  /*
  Here,
  dir: sort direction ,
  cellid: id of the cell
  fieldname: name of the column,
  
  
   Do following there steps
   1)call ajax function ,
   2)receive server side sorting 
   3)load grid with new data
  */
      }
  });

• Need to show the sorted data into client grid.

Real world example : the following code is example of how I solve this issue in our project. Offcourse you don’t need to under the following code. The following example is Object Is to give you a feeling if it . If you do upto step 4 and write your own code that is enough.

To feel the example just assume
OBSettings : used to assign some properties need to generate query in server
CreateNormalGrid: function which will take result json data from server and refresh the gridView in client with new data

    Ext.override(Ext.data.Store, {
        sort: function CustomSorting(fieldName, dir, cellId) {
            var detailGrid = Ext.get(cellId).up('DIV.detailGrid');
            var sortableGrid = detailGrid ? "DETAIL_GRID" : "MAIN_GRID";
            OBSettings.ACTIVE_GRID = sortableGrid;
                if (dir) {
                    OBSettings.SQL_DETAIL_ORDER_BY = fieldName;
                    OBSettings.SQL_DETAIL_ORDER_DIR = dir;
                } else if (OBSettings.SQL_DETAIL_ORDER_BY != fieldName) {
                    OBSettings.SQL_DETAIL_ORDER_BY = fieldName;
                    OBSettings.SQL_DETAIL_ORDER_DIR = "ASC";
                } else {
                    OBSettings.SQL_DETAIL_ORDER_BY = fieldName;
                    OBSettings.SQL_DETAIL_ORDER_DIR = (OBSettings.SQL_DETAIL_ORDER_DIR == "ASC") ? "DESC" : "ASC";
                }
                ShowDetailLoadingImage();
                setTimeout('CreateNormalGrid()', 1); 
        }
    });

It may looks very simple if you are not novice in extjs. I belive it will help the people who working with exjs firs time.....