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.

Here is an example of the previous.

Now let’s look at the real code.

Configuration

 Store

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.

Now, before we take a look into the library, let’s see an example of the anatomy of a JSON response for URL_GET_TABLE_METADATA:

This method will be called inside the library and will provide the means to configure the grid columns and store fields before we can start the CRUD operations.

Library

In this article we teach how to implement a simple php Web API that provides the metadata and CRUD functionality needed to fuel our dynamic grids.

Acerca de

Ver todas las entradas de