a) Include all the necessary files and set path to grid images folder:

  <link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css" />
  <link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/ext_integration/ext_blue.css" />
  <script type="text/javascript" src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
  <script type="text/javascript" src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
  <script type="text/javascript" src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>
  <script>
      dhx_image_path="../../../dhtmlxGrid/codebase/imgs/";
  </script>

b) Include intervention script:

  <script src="../../../../main/dhtmlxgrid/codebase/ext_integration/dhtmlxgrid_extx.js"></script>

c) Replace ExtJs GridPanel with dhtmlxgrid:

  <script>
      Ext.grid.GridPanel=Ext.grid.dhxGridPanel;
  </script>

Basically this is all, now all instances of Ext.grid.GridPanel will use dhtmlxgrid as rendering engine. The component understands ExtJS style of grid configuration, and can use ExtJS DataStore as the source of data:

   var grid = new Ext.grid.GridPanel({
          store: store,
          columns: [
              {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
              {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
              {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
              {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
              {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
          ],
          stripeRows: true,
          autoExpandColumn: 'company',
          height:350,
          width:600,
 
 
 
 
          title:'Array Grid'
      });