When working with ExtJS 4, you’ll often run into ambiguous error message like this one:

Uncaught TypeError: Cannot call method ‘substring’ of undefined

ext-all-debug.js line 4384

I recently ran into this while coding up an Ext application for another blog post, and I thought I’d share with you its root cause and solution.

Read more

Recently I’ve been reading Clean Code by Robert C Martin and come across this wonderful piece of programming advice from Chapter 5:

In general we want function call dependencies to point in the downward direction. That is, a function that is called should be below a function that does the calling.²This creates a nice flow down the source code module from high level to low level.

As in newspaper articles, we expect the most important concepts to come first, and we expect them to be expressed with the least amount of polluting detail. We expect the low-level details to come last. This allows us to skim source files, getting the gist from the first few functions, without having to immerse ourselves in the details.

Read more

Recently, I’ve been getting a lot of comments on my blog post ExtJS 4: Combo Boxes, loadRecord() and Remote Stores that have offered some really great feedback including a lot of suggestions for changes that should be made. Unfortunately, I haven’t had the time to integrate any of the suggested fixes. At the same time, I don’t like having code that doesn’t work quite right and help the community.

To alleviate this problem, I’ve create a GitHub Account and created a repository just for the code snippets I put on this site. I encourage you to take a look at what I’ve got in there (more will be added soon) and see if you can make any improvements. Feel free to fork, comment and commit to your heart’s content. I’d really appreciate it.

Thanks again for all of your comments and support. I look forward to seeing what you can do!

I wrote this method a few weeks ago and though I’d share it. It parses ExtJS filters sent in by the FilterFeature.

<?
function parseExtJSFilters() {
    if(!isset($_GET['filter') { // No filter passed in
        return FALSE;
    }
    $filters = json_decode($_GET['filter']); // Decode the filter
    if($filters == NULL) { // If we couldn't decode the filter
        return FALSE;
    }
    $whereClauses = array(); // Stores whereClauses
    foreach($filters as $filter) {
        switch($filter->type) {
            case 'boolean':
                $filter->value = ($filter->value === TRUE) ? '1' : '0'; // Convert value for DB
                $whereClauses[] = "$filter->field = $filter->value" ;
                break;
            case 'date':
                $filter->value = "'$filter->value'"; // Enclose data in quotes
            case 'numeric':
                switch($filter->comparison) {
                    case 'lt': // Less Than
                        $whereClauses[] = "$filter->field < $filter->value";
                        break;
                    case 'gt': // Greather Than
                        $whereClauses[] = "$filter->field > $filter->value";
                        break;
                    case 'eq': // Equal To
                        $whereClauses[] = "$filter->field = $filter->value";
                        break;
                }
                break;
            case 'list':
                $listItems = array();
                foreach($filter->value as $value) {
                    $listItems[] = "'$value'";
                }
                $whereClauses[] = "$filter->field IN(" . implode(',', $listItems) . ')';
                break;
            case 'string':
            default: // Assume string
                $whereClauses[] = "(
                    $filter->field LIKE '{$filter->value}%' OR
                    $filter->field LIKE '%{$filter->value}' OR
                    $filter->field LIKE '%{$filter->value}%' OR
                    $filter->field = '{$filter->value}'
                )";
                break;
        }
    }
    if(count($whereClauses) > 0) {
        return implode(' AND ', $whereClauses);
    }
    return FALSE;
}
?><?
function parseExtJSFilters() {
    if(!isset($_GET['filter') { // No filter passed in
        return FALSE;
    }
    $filters = json_decode($_GET['filter']); // Decode the filter
    if($filters == NULL) { // If we couldn't decode the filter
        return FALSE;
    }
    $whereClauses = array(); // Stores whereClauses
    foreach($filters as $filter) {
        switch($filter->type) {
            case 'boolean':
                $filter->value = ($filter->value === TRUE) ? '1' : '0'; // Convert value for DB
                $whereClauses[] = "$filter->field = $filter->value" ;
                break;
            case 'date':
                $filter->value = "'$filter->value'"; // Enclose data in quotes
            case 'numeric':
                switch($filter->comparison) {
                    case 'lt': // Less Than
                        $whereClauses[] = "$filter->field < $filter->value";
                        break;
                    case 'gt': // Greather Than
                        $whereClauses[] = "$filter->field > $filter->value";
                        break;
                    case 'eq': // Equal To
                        $whereClauses[] = "$filter->field = $filter->value";
                        break;
                }
                break;
            case 'list':
                $listItems = array();
                foreach($filter->value as $value) {
                    $listItems[] = "'$value'";
                }
                $whereClauses[] = "$filter->field IN(" . implode(',', $listItems) . ')';
                break;
            case 'string':
            default: // Assume string
                $whereClauses[] = "(
                    $filter->field LIKE '{$filter->value}%' OR
                    $filter->field LIKE '%{$filter->value}' OR
                    $filter->field LIKE '%{$filter->value}%' OR
                    $filter->field = '{$filter->value}'
                )";
                break;
        }
    }
    if(count($whereClauses) > 0) {
        return implode(' AND ', $whereClauses);
    }
    return FALSE;
}
?>

You can view examples of using the FilterFeature in ExtJS 4 on the ExtJS 4 examples page for grid filtering.

Update: The source code for this snippet is available here.

In preparation for another round of Envato screencasts, I’ve been messing around with the new Charting API that comes with ExtJS 4. For this project, I wanted to show how you can filter a grid full of data and have it change the data in the pie chart. Unfortunately, I soon discovered that pie charts (or rather, charts in general) and data grids take two different types of data. Read more

Recently, Envato announced a new website: Envato Extras. The purpose of this site is to showcase applications, tools and utilities that people have built using the Envato API. A while back, I created a simple mobile app using Sencha Touch that used the Envato API to grab popular items from the Audio Jungle website and display them in a mobile friendly list. You can check out the application on the Envato Extras website or you can head over to my portfolio and view the item there.

A while back I ran into an interesting issue regarding loading records from the database into a form that contained combo boxes driven by remote stores. The problem was, when the record got loaded into the form, the stores for the combo boxes hadn’t loaded, so all the combo boxes said “select one” instead of the option that was chosen when the form got submitted. After doing some digging, I came up with a way around this issue: Read more

When setting up a controller in ExtJS 4, you might do something like this:

Ext.define('app.controller.myController', {
    init: function() {
        this.control({
            'form > textfield': {
                change: this.textFieldChange
            }
        })
    },
    textFieldChange: function(textField, newValue, oldValue, options) {
      alert('The text box went from' + oldValue + ' to ' + newValue);
    }
});

What this code is saying is “Find every textfield inside of the form in the current view (usually the viewport) and, whenever the value changes, fire the textFieldChange method”. Now, this is fine and all, but what if your textFieldChange method sent a request to the server? That would mean that, for every character you typed, a new request would be created and sent to the server causing a lot of unnecessary overhead. Read more

Recently, while working with a model and proxy in ExtJS 4, I ran into the issue where the model’s proxy would call the ‘create’ action instead of ‘update’ when saving changes to an existing record. Read more

Recently, I started using Twitter’s native iPhone app. Overall, I really enjoy it, but there’s one thing about it that drives me just nuts: The settings screen(s). Read more