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 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 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?