Creating dynamic grids in ExtJS 4

We may want to have a mechanism in ExtJS 4 to rely on one store definition that we can assign to different grids. Also it would be great if, giving the name of a source data container (i.e. table on a database), we could ask somebody to give us the field and model configuration required to set up dynamically the grids and their store.

For this example I will assume a store based on an ajax proxy type that will map the api crud verbs to an external api that will return data structures that depend on a non-composite primary key. Note that the same theory applies for other proxy types that make use of the api configuration option.

In another article I will tackle how to create a php API with CodeIgniter that will easily play along with Ext JS. The API will provide the functionality needed for the dynamic grid and it will let us CRUD simple MySQL tables.

Code involved

A grid with the store configuration set to null and the columns configuration option set to an empty array.

A custom library that will let us call a configureGrid function.

A preconfigured Ext store class.

A configuration JavaScript file that will provide stuff to the custom library and the store

So, the flow is as it follows; we define a grid and we pass it to a function along with a database and a table name, also we include an option to make the grid editable (by including the row editing plugin). Once the function does his work the grid will be ready for use.

The extraParams in the store makes our external API more flexible letting us specify not only the table name but the database name. You don’t have to worry about the primary key parameter since it will be entirely managed inside our library.

The expected JSON output for the CRUD actions should not surprise us, here is an example for the read action.