Changing a grid's data store and columns at runtime

A sought-after ability in grid components is changing the column's definitions at runtime. With the latest version of Ext JS, accomplishing this is very simple.

In this recipe, you will learn how to have a grid component switch from displaying customers' information to displaying movies' information with the click of a button.

Initially, the grid panel is configured to display the customers' information:

After clicking on the Movies button, the grid displays the movies' information as shown in the next screenshot. Note how the grid's columns change to reflect the fields of the records displayed.

How to do it...

1. 1. Create a data store to hold the customers' information:

   var customersStore = new Ext.data.JsonStore({
   url: 'grid-reconfigure.php',
   root: 'customers',
   baseParams:{xaction:'customers'},
   fields: ['ID', 'name', 'address', 'zip code', 'phone', 'city']
   });
   

2. 2. Create another data store that will hold the movies' records:

   var moviesStore ...