Just repeat the steps a-b mentioned above, but instead of replacing just use dhxGridPanel where necessary:

   var grid = new Ext.grid.dhxGridPanel({
          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'
      });

The following two possibilities will work for both the above mentioned approaches:

• Using native API of dhtmlxgrid;
• Including dhtmlxgrid in ExtJs layout.