| DHTMLX Documentation

# Replacing ExtJS Grid with dhtmlxGrid

Download library
There are two main approaches to replace ExtJS grid with dhtmlxgrid:

- Replacing ExtJS grid;
- Using dhtmlxgrid in parallel with the Ext.grid.

Replacing ExtJS grid
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'
> });

Using dhtmlxgrid in parallel with the Ext.grid
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.

Using native API of dhtmlxgrid
You should repeat the steps a-b mentioned above, and instead of ExtJS's you can use native dhtmlxgrid style of initialization:

> var panel=new Ext.grid.dhxGridPanel({ //define panel
> height:350,
> title:'Some Grid'
> });
> panel.render('grid-example'); //render panel
> var grid=panel.grid; //take grid instance
> grid.setHeader("Name,Index,Code");
> grid.setInitWidths("150,150,*")
> grid.setColAlign("left,left,right")
> grid.setColTypes("ro,ro,ro");
> grid.init();
> grid.enableSmartRendering(true);
> // loading 50000 rows dataset
> grid.loadXML("../../../../main/dhtmlxgrid/samples/!!loading_big_datasets/50000_load_grid.php?un="+Date.parse(new Date()));

Including dhtmlxgrid in ExtJs layout
If the grid is created through dhxGridPanel, there is no need in any additional steps because dhtmlxgrid will support all layout behaviors:

> new Ext.TabPanel({
> region:'center',
> deferredRender:false,
> activeTab:0,
> items:[new Ext.grid.dhxGridPanel({
> store: new Ext.data.Store({
> reader: new Ext.data.ArrayReader({}, [
> {name: 'company'},
> {name: 'price', type: 'float'},
> {name: 'change', type: 'float'},
> {name: 'pctChange', type: 'float'},
> {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
> ]),
> data: [
> ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
> ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],

© DHTMLX, 2008