Grouping data together helps present the information clearly to users. Ext JS 4 provides a grouping feature (Ext.grid.feature.Grouping
) that groups records using the Store's groupers
and displays a title for each group:
To demonstrate the grouping feature we will group all invoices by Client.
We are going to use the Invoice example that we have used throughout this chapter so we will start by including the Model and Store files to our HTML page:
<script type="text/javascript" src="invoices-model.js"> </script> <script type="text/javascript" src="invoices-store.js"> </script>
Now that you have included the necessary Model and Store we need to make a few changes:
Add a
groupField
to theinvoiceStore
. We will group this grid by theClient
field. It is also possible to define more elaborate groupers using theExt.util.Grouper
class.var invoiceStore = Ext.create('Ext.data.Store', { ... groupField: 'Client', proxy...