1. Extjs Grid Example Jsfiddle
2. Extjs Grid Button
3. Extjs Grid Store Clear
4. Extjs Grid Example Fiddle
5. Download Extjs
6. Extjs Extend

This tutorial shows you how to create a grouped grid in ExtJS. ExtJS grid grouping is a common scenario in business applications where users need to analyze tabular data grouped by different attributes. The ExtJS application that you will create in this tutorial will render an ExtJS grid containing fictional data describing model cars. This article is part of a series of ExtJS tutorials that I have posted on jorgeramon.me.

Extjs Grid Example Jsfiddle

Creating an ExtJS Project from Scratch

We will get started by creating the directories for our sample ExtJS application. Let’s go ahead and create the directories as depicted in the screenshot below.

This is a typical ExtJS project structure with an app directory under which we’ve placed the model, store and view directories. We will not create a controller folder because for this simple example we will use the Ext.Application instance that we will create as the only controller in the app.

This examples shows the usage of links in ViewModel. Ext JS 6 Example: CRUD in Form, Grid and Paging in Grid Demo. The grid we created above will contain a header bar with a title ('Simpsons'), a row of column headers directly underneath and finally the grid rows under the headers. Columns By default, each Ext.grid.column.Column is sortable and toggles between ascending and descending sorting when you click on its header. What is ExtJS - A blog with some interesting ExtJS examples and code snippets; Coding Ideas - A blog with articles about several frameworks and some nice articles about ExtJS; Tutorials, examples. Ext4all - Exjs code snippets; skirtlesden - Old (2014) but very good articles about ExtJS. How to get selected row values from data grid view in form's textbox extjs If this is your first visit, you may have to register before you can post. To start viewing messages, select the forum that you want to visit from the selection below.

Next, we will create the file that hosts our ExtJS application. Let’s name it grid-grouping.html and place it in the root directory of the project. Here’s the code that goes in the file:

Remember to make sure that the css and script references to the ExtJS library in the head section of the html document are pointing to the correct directories in your development workstation. The references above work for my development environment.

In the head section we also have an entry for the app.js file, which we need to add to the root directory of the project, as shown below.

Let’s open app.js and type the following ExtJS application definition:

This is a super simple ExtJS application. We are using the autoCreateViewport config to instruct the app to load and instantiate the viewport, which we will create in a few minutes, before firing the launch function. We will leave the launch function empty because in this example we do not need to execute any logic within the function.

The ExtJS Model

To represent the model cars data that we will ultimately render in the grid, we will use the ModelCar ExtJS model Class. This Class goes in the ModelCar.js file that we will add to the model directory of the project.

This is how we are going to define the ModelCar Model:

Back in the app.js file we need to add a models config to the ExtJS application just so the app knows that it has a dependency on the ModelCar module and it needs to load it as part of the app.

Creating a Store to Feed The ExtJS Grid

Now we are going to focus on the ExtJS Store that will feed the grid. Let’s add a ModelCars.js file to the store directory of the project.

We will type the following definition in the file:

The ExtJS model config of the Store is set to the ModelCar model that we created a couple of minutes ago. No surprises there.

A couple of things that I don’t want you to miss in the Store’s definition are the groupField and groupDir configs, which tell the Store which field and in which direction to group by:

Also note how we use the sorters config to sort the grouped records by the name field.

Finally, as the data config indicates, we are using a hard-coded array as the data for the Store. We are using hard-coded data in order to keep the example short.

Let’s make the application aware of the ModelCars Store by adding the stores config in the app.js file:

Creating the ExtJS Viewport

The app’s Viewport is where we will define the ExtJS grouped grid. Let’s create the Viewport.js file in the project’s view directory:

Here’s the code that we will add to the Viewport’s file:

Let’s review this Viewport definition in detail. First, we are using the Viewport’s requires config to tell the ExtJS Loader that it needs to load the Ext.grid.Panel Class as part of the application. Then, we define our Grid instance within the items config of the Viewport.

We are telling the grid to use the ModelCars ExtJS Store as its data source by setting the store config to ‘ModelCars’. This works because ExtJS components pass the value of the store config to the Ext.data.StoreManager Class, which can look up or create a Store, depending on whether the store config’s value is a store id, a store’s instance or a store’s configuration.

We are using the grid’s columns config to define four columns: Id, Name, Vendor and Category. Setting the hidden config of the Id column to true will make the column invisible to the user. The sortable config of the visible columns is true to allow users to sort by those columns.

Setting Up ExtJS Grid Grouping

The features config allows us to specify one or more features to be added to the grid. As explained in the ExtJS docs, an ExtJS Feature is a Class that provides hooks that you can use to inject functionality into the grid at different points during the grid’s creation cycle. This is a clever approach to maintaining the grid’s core as lightweight as possible, while allowing for advanced functionality to be “plugged in” as needed.

Currently, ExtJS provides the following grid features:

• Grouping, through the Ext.grid.feature.Grouping Class.
• Grouping Summary, though the Ext.grid.feature.GroupingSummary Class.
• Row Body, though the Ext.grid.feature.RowBody Class.
• Summary, through the Ext.grid.feature.Summary Class.

In our app we are only using the grouping feature. We set the ftype property to ‘grouping’ to signal the grid that we will use the grouping feature. The groupHeaderTpl config allows us to enter a template for the group headers of the grid:

This template will render the name of the group along with the number of records in the group, producing a result similar to this picture:

Setting the enableNoGroups config to true will let the user turn off grouping in the grid.

Note that if we wanted to specify multiple features, we would need to add them to the features config in array notation.

One last step before we are ready to test the app. Let’s return to the app.js file and the add views config, where we will place a reference to the Viewport Class that we just created:

Now we can test the app on a browser. Upon application load, the grid’s records are grouped by the Category field, and sorted by the Name field:

Summary and Next Steps

In this tutorial we reviewed the steps needed to create a grouped grid in ExtJS, and we learned that this process involves attaching a “Grouping” feature to an ExtJS grid that is connected to a grouped ExtJS Store.

As next steps, I would suggest that you explore how to use the “Grouping Summary” and “Summary” features of the ExtJS grid, which are commonly used together with the “Grouping” feature. I will cover these features in future tutorials.

Don’t forget to sign up for my mailing list so you can be among the first to know when I publish the next update.

Download the Source Code

Download the ExtJS grouped grid example here: ExtJS grid grouping tutorial on GitHub

Stay Tuned

Don’t miss out on the updates! Make sure to sign up for my newsletter so you can get MiamiCoder’s new articles and updates sent free to your inbox.

Styling grid cells is a common topic for help requests on the Sencha forums. There are a number of techniques available depending on exactly what styling should be applied where. This article introduces the most widely-used of these techniques along with some of the theory behind how they work.

Default Grid Styling

Let's start by taking a look at the default styling for a grid using the blue theme:

Some key styling features to note include:

• Rows alternate between white and light grey. It's intended to be subtle but it varies a lot between monitors so you may find it difficult to see.
• There is a light grey dividing line between each row. There isn't an equivalent vertical line between columns.
• Moving the mouse cursor over the rows adds a grey highlight. The top and bottom border of the row also darkens when highlighted.
• Selecting a row adds a light blue background and a dotted blue border.

For reference, the code for this grid looks like this:

The Grid Markup

Most grid styling is done using CSS. To understand the CSS it's necessary to be familiar with the HTML markup of a grid. Below is a simplified version of that markup. At its heart it's really just an HTML table. It's worth taking a moment to familiarize yourself with this markup if you haven't studied it before. You can refer back to it later when we start looking at the CSS rules.

There are a few CSS classes that are particularly worthy of note in this markup:

• x-grid-row – Applied to the <tr> element for each row of the grid.
• x-grid-row-alt – Applied to the <tr> element for alternate rows of the grid.
• x-grid-cell – Applied to the <td> element for each cell.
• x-grid-cell-first – Applied to the <td> element for the first cell in each row.
• x-grid-cell-last – Applied to the <td> element for the last cell in each row.

Column Lines

One simple change that can be made without any custom CSS is to add vertical lines between the columns. This just needs the setting columnLines to be set to true.

This setting adds a handful of CSS classes to the outermost <div> element of the grid. The most important of these is x-panel-with-col-lines, which has an accompanying rule in the default stylesheet to put a grey border down the right-hand side of each grid cell.

Styling All Grid Cells

The setting cls is common to all ExtJS components. It adds a CSS class to the main element for the component. In this case it will put the class custom-grid on the outermost <div> element.

Making the grid cells appear yellow needs some CSS like this:

This page is using the 'scoped' ExtJS CSS file. This requires all of the selectors shown in these examples to be prefixed with the class x-reset. This has been omitted from the code samples as it isn't usually required.

The selector for this rule will match all the <td> cells for this grid. Notice how the styling is applied to the cells rather than the rows. A common mistake is to try to change the background-color for the <tr> element rather than the <td>. This doesn't work because the cells have their own background-color, which completely hides the row.

A little more CSS is needed to handle mouse-over and selection. In both cases the grid automatically adds a CSS class to the <tr> element that we can use to style the cells in those rows.

One last thing to note here is the use of the !important flag in the code above. Generally this should be avoided but it can't be helped here because it's overriding a rule in the default ExtJS CSS that also uses this flag.

Alternate Rows

As we've already seen, alternate rows of a grid have the class x-grid-row-alt. This makes it easy to do simple striping effects.

If you don't want to take advantage of row striping then you can disable it like this:

Adding the class x-grid-row-alt to alternate rows incurs a performance penalty. Every time the row order changes the grid needs to go through all of its rows and update the CSS classes. If you aren't styling alternate rows differently from each other then you should claim back that performance by turning off row striping. The earlier example of turning all the rows yellow would be a suitable candidate for this.

Styling Rows

In many cases the styling for a row is dependent on the data for that row. That data is represented by a record in the store. We can add a CSS class to the <tr> element based on the record using the config option getRowClass:

Recall that the class x-grid-cell is on the <td> elements for each cell of the row.

Static Column Styling

The simplest way to style a column is to add a CSS class to every <td> element in that column. The column config setting tdCls does just that.

In the CSS selector above note that x-grid-row is on the <tr> element and custom-column is on the <td> element.

First and Last Column

Extjs Grid Button

As we've already seen, the cells in the first and last columns of a grid have special CSS classes on them. These can be used to style the cells in those columns. The key difference between this and a tdCls is that the tdCls follows its column when the columns are reordered. If you try reordering the columns in this example you'll see that the styling does not follow the column.

Extjs Grid Store Clear

Dynamic Column Styling

Often the styling for a column will vary row by row. A column renderer allows the tdCls to be set individually for each cell.

Extjs Grid Example Fiddle

While it isn't shown in this example, the third argument passed to the renderer function is the record for the row, which allows the tdCls to be derived from other fields if necessary.

Download Extjs

Styling Dirty Fields

Extjs Extend

By default, a dirty field is marked with a red triangle in the top-left corner of the corresponding cell. As you might expect, this is achieved by adding a CSS class to the <td> element. The triangle itself is rendered using a background image. Customizing it just needs a bit of CSS.