Adding Rows to a Grid in ExtJS 4.1

Note: Has been updated for ExtJS 4.1

In the last article we built a data grid mockup in ExtJS 4.1. Now we want to add some rows to the grid.
Firstly we need to create a model class to store a data. We’ve done that also in the previously article, but for the better understanding, here’s it again:

Having the Person class we can simply add new rows to the store (people in our case) by calling the add function with new instances of that class:

And again the stuff in action:

Building Mockups in ExtJS 4.1

Note: This post has been updated for ExtJS 4.1

In the early development phase it is usually a good idea to provide a mockup that is not using real data but some dummy data from memory. To do that for a grid in ExtJS we need to create a record class first. For a person this might look like this:

Then we need a store where instances of the Person class will be stored:

The store is initially loaded with data from peopleProxy which must be defined previously like this:

If we want to replace this in a later development phase with real data, we simply replace this proxy with an HttpProxy, which might look like this:

If we finally connect the store to a data grid, it looks like this:

Validator for ExtJS Checkbox

Very unfortunately ExtJS doesn’t offer a validator for its checkbox component.
Normally a validator checks whether a field is valid and takes care of displaying an error message if not. For a checkbox we would like that to happen if the checkbox is not selected.
Overriding the validate function of the checkbox we can provide such a functionality for all checkbox instances we are about to create:

The validator can be customized using the properties validateField and validateMessage.

Here’s a small code example:

Generic error handler for ExtJS

When you are doing client/server communication with ExtJS you probably run into the problem that you want to handle server side errors in a generic way.
A solution that I found is to override the handleFailure function in the Ext.data.Connection class:

This handler simply is called whenever a server side failure occurs. As the Connection class handles all communication this can happen also in Ext.Ajax or Ext.data.HttpProxy. In this example the error message to be displayed is retrieved from a server generated XML with the actual text being located at XPath Reason/Text.

So a server side error message might look like this:

3 Ways to render HTML inside of a ExtJS container

It has been a while since my last blog post. The main reason is that I am now having a nice new job at efiport which leads to the situation that I am doing now good old Javascript (mainly ExtJS) instead of Flex.
So I think in the future there will be more posts about ExtJS then Flex. Sorry Flex folks.

To tribute the change a bit, I start with the problem of adding HTML code inside of a ExtJS container.
I thought of three different ways – let’s take a look at them:

It’s easy to think about the first one and you can find it quite often by googling around. Just setting the html property of a panel. The problem I am having with it is that the overhead of a panel is generated and the HTML is just static – I can’t generate similar values at runtime (e.g. a different link label in the example).

So apart from the second example that uses a template, I thought of the third solution that generates a DOM element at runtime using the DomHelper (the autoEl property calls this implicitly) and wraps it in a component. What do you think?