RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Building a Simple GridPanel in Ext JS : Page 2

The GridPanel is the centerpiece widget for Ext JS, a cross-browser JavaScript library for building rich Internet applications. Learn the basics of loading data from a DataStore and setting up a simple GridPanel.


Completing Our First GridPanel

As we discussed before, the ColumnModel has a direct dependency on the DataStore's configuration. This dependency has to do with a direct relationship between the data field records and the column. Just like the data fields map to a specific data point in the raw inbound data, columns map to the record field names.

To finish our GridPanel construction, we need to create a ColumnModel, GridView, SelectionModel, and then we can configure the GridPanel itself.

Listing 2. Creating an ArrayStore
var colModel = new Ext.grid.ColumnModel([                    (1)
         header    : 'Full Name',
         sortable  : true,
         dataIndex : 'fullName'                              (2)
         header    : 'State',
         dataIndex : 'state'
 var gridView = new Ext.grid.GridView();                     (3)
 var selModel = new Ext.grid.RowSelectionModel({             (4)
     singleSelect : true
 var grid = new Ext.grid.GridPanel({                         (5)
     title      : 'Our first grid',
     renderTo   : Ext.getBody(),
     autoHeight : true,
     width      : 250,
     store      : store,                                     (6)
     view       : gridView,                                 
     colModel   : colModel,                                       
     selModel   : selModel
{1} Creating our ColumnModel
{2} Mapping the dataIndexes to the columns themselves
{3} Instantiating a new GridView
{4} Creating a new single-selection RowSelectionModel
{5} Instantiating our Grid
{6} Referencing our Store, GridView, ColumnModel and SelectionModel

In the above Listing, we configure all of the supporting classes before constructing the GridPanel itself. The first thing we do is create a reference for a newly instantiated instance of a ColumnModel {1}, for which we pass in an array of configuration objects. Each of these configuration objects are used to instantiate instances of Ext.grid.Column (or any subclasses thereof), which is the smallest managed unit of the ColumnModel. These configuration objects {2} detail the text that is to be populated in the column header and which Record field the column maps to, which is specified by the dataIndex property. This is where we see the direct dependency on the configuration of the Store's fields and the ColumnModel's columns. Also, notice that we set sortable to true for the "Full Name" column and not the "State" column. This will enable sorting on just that one column.

We then move on to create an instance of Ext.grid.GridView {3}, which is responsible for managing each individual row for the grid. It binds key event listeners to the DataStore, which it requires to do its job. For instance, when the DataStore performs a load, it fires the "datachanged" event. The GridView listens for that event and will perform a full refresh. Likewise, when a record is updated, the DataStore fires an "update" event, for which the GridView will only update a single row.

Next, we create an instance of Ext.grid.RowSelectionModel {4} and pass a configuration object that instructs the selection model to only allow single selection of rows to occur. There are two things to know this step. The first is that by default, the GridPanel always instantiates an instance of RowSelectionModel and uses it as the default selection model if we do not specify one. But we did create one because by default the RowSelectionModel actually allows for multiple selections. You can elect to use the CellSelectionModel in place of the RowSelectionModel. The CellSelectionModel does not allow for multiple selections of items, however.

After we instantiate our selection model, we move on to configure our GridPanel {5}. GridPanel extends Panel, so all of the Panel-specific configuration items apply. The only difference is you never pass a layout to the GridPanel as it will get ignored. After we set the Panel-specific properties, we set our GridPanel-specific properties {6}. This includes configuring the references for the DataStore, ColumnModel, GridView, and Selection Model. Loading the page will generate a GridPanel that looks like Figure 1.

Figure 1. First GridPanel Rendered: Here is our first grid rendered on screen, demonstrating the single-select configured RowSelectionModel and the sortable "Full Name" column.

As we can see in Figure 1, the data is not in the same order that we specified. This is because before I took the snapshot, I performed a single click on the "Full Name" column, which invoked the click handler for that column. The click handler checks to see if this column is sortable (which it is) and invoked a DataStore sort method call, passing in the data field ("dataIndex"), which is "fullName". The sort method call then sorts all of the records in the store based on the field that was just passed. It first sorts in an ascending order, then toggles to descending thereafter. A click of the "State" column will result in no sorting because we didn't specify "sort : true" like we did for the "Full Name" column.

To exercise some of the other features of the ColumnModel, you can drag and drop the columns to reorder them, resize them by dragging the resize handle or click the column menu icon, which appears whenever the mouse hovers over a particular column.

To exercise the Selection Model, simply select a row by clicking on it. Once you've done that, you can use the keyboard to navigate rows by pressing the up and down arrow keys. To exercise the multi-select RowSelectionModel, you can simply modify the SelectionModel by removing the "singleSelect: true" property, which defaults to false. Reloading the page will allow you to select many items by using typical Operating System multi-select gestures such as Shift-Click or Ctrl-Click.

Creating our first grid was a cinch. Obviously there is much more to GridPanels than just displaying data and sorting it. Features such as pagination and setting up event handlers for gestures like right-mouse clicks are used frequently, which means that the simple GridPanel we created here can quickly become more complex.

Courtesy of Manning Publications. All rights reserved.

Jesus "Jay" Garcia has over 16 years experience in IT and enterprise web application development. He has deployed Ext-based applications in large corporations such as Marriott International, Lockheed Martin, JPMorgan Chase, and the Financial Industry Regulatory Authority. In his spare time, Jay enjoys assisting the Ext JS community forums, where he is one of the top posters not employed by Ext JS LLC.
Email AuthorEmail Author
Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date