As I reflect on these feelings, I realize that I just need to get off my ass and create, produce. I’ve got a head full of ideas that I need to get out into the public view, not so they can be lauded and cheered, but so they can be judged and measured. Some of these ideas will have already been executed by others in a manner better than I could have ever dreamed. Other ideas will fall flat, unable to resonate with anyone but myself. Most ideas will fail due to poor execution or general sucky-ness and be scorned by those unlucky enough to stumble upon them. However, despite the risk or rejection or failure, I’ve decided that I will no longer sit on my ideas, artificially perfecting them in my brain like some kind of mental purgatory, that phase where they’re ready for the world forever just out of reach. My ideas, as soon as they hit my head, will go here on this website to be viewed by as many people as possible. Will this site still be about web development and design? Sure, but not because I desire some kind of weird programmer fame and glory – I don’t think that’s the right motivation for anything, really. Instead, this site is going to be about web development because that’s what I happen to enjoy doing with most of my time. If that changes, well, you’ll learn about it here first.

So with all this in mind, here’s my idea for “The Web Developer’s Invocation”:

May I not get consumed by typography and web fonts. May I not obsess over pixel-perfect layouts or CSS selectors. May I not get caught in arguments about language or syntax. Let me instead be consumed with the desire to make this Internet a better place; to bring creative, exciting people together to create stuff and do things that are awesome.

I thought it was neat. I may change it later. If you have suggestions, please comment.

And with that, let’s start this shit up.

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.

If you head straight to the line number in question, you’ll find yourself somewhere in the middle of the parseNamespace method of Ext’s ClassManager object and you’ll notice that the parameter that the method expects (namespace) is undefined, causing the method to throw an error. However if you look a little deeper in the callstack, you’ll notice that the instantiateByAlias method was called just before parseNamespace:.

instantiateByAlias: function() {
    var alias = arguments[0],
        args = arraySlice.call(arguments),
        className = this.getNameByAlias(alias);

    if (!className) {
        className = this.maps.aliasToName[alias];

        Ext.syncRequire(className);
    }

    args[0] = className;

    return this.instantiate.apply(this, args);
}

If you place a breakpoint in this method and run the application again, you’ll be able to watch it load each Ext class (as well as your application’s custom components) by its xtype alias. Eventually, it attempt to load one of your application’s classes and then crash.

The reason for this crash is because you’ve most likely misspelled the alias of that component while referencing it in another component. Take a look at my grid code:

Ext.define('App.view.person.Grid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.persongrid',
    title: 'People',
    columns: [{
        header: 'ID',
        dataIndex: 'id'
    }, {
        header: 'First Name',
        dataIndex: 'first_name'
    }, {
        header: 'Last Name',
        dataIndex: 'last_name'
    }, {
        header: 'Address',
        dataIndex: 'address'
    }, {
        header: 'City',
        dataIndex: 'city'
    }, {
        header: 'State',
        dataIndex: 'state'
    }, {
        header: 'Zip Code',
        dataIndex: 'zip_code'
    }]
});

Now take a look at my viewport code:

Ext.define('App.view.Viewport', {
    extend: 'Ext.container.Viewport',
    config: {
        items: [{
            xtype: 'peoplegrid',
            store: 'People'
        }]
    }
});

See how I referenced my Person grid view by the alias peoplegrid in the viewport file but I declared the alias to be persongrid in the grid file? That’s what’s causing the JavaScript error. So, the moral of the story is: If you get obscure errors about strings being undefined in ExtJS 4, always check deeper in the callstack (not just the line-number in question) and always double-check your xtype aliases across your application.

Hope this helps.

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.

When I first read this, I was just stunned. During my career I’ve encountered (and written) classes that were very difficult to read and follow despite their methods being well-written and documented. It wasn’t until I’d discovered this piece of coding advice, that  I understood why.

To illustrate the point Mr. Martin is trying to make, let’s take a look at an example class I put together:

<?
class SalesReport {

    private $startDate = '';
    private $endDate = '';
    private $salesQuarter = 0;
    private $salesTeamMembers = array();

    public function setEndDate($date) {
        $this->endDate = $date;
    }

    public function __construct() {

    }

    public function setStartDate($date) {
        $this->startDate = $date;
    }

    public function setSalesTeamMembers($teamMemberIds) {
        if(is_array($teamMemberIds)) {
            $this->salesTeamMembers = $teamMemberIds;
        } else {
            throw new Exception('SalesReport::setSalesTeamMembers only accepts an array of team member ids');
        }
    }

    public function generateReportQueryLimitClause() {
        // Generate Limit clause
    }

    public function generate() {
        $whereClause = $this->generateReportQueryWhereClause();
        $orderByClause = $this->generateReportQueryOrderByClause();
        $limitClause = $this->generateReportQueryLimitClause();
        $query = "
            SELECT
                /* Field Listing */
            FROM
                sales
            $whereClause
            $orderByClause
            $limitClause
        ";
        // execute query
        return TRUE;
    }

    public function generateReportQueryWhereClause() {
        // Generate WHERE clause based on report selection criteria
    }

    public function generateReportQueryOrderByClause() {
        // Generate ORDER BY clause
    }

    public function load() {
        // Load report results from temporary table
    }

    public function setSalesQuarter($salesQuarter) {
        if(is_int($salesQuarter)) {
            $this->salesQuarter = $salesQuarter;
        } else {
            throw new Exception('Sales Quarter must be an integer');
        }
    }

}
?>

Take a glance at the above class. Do you notice how your eyes have to keep jumping around the class in order to follow what’s going on? By having the methods randomly scattered throughout the code, you really have to focus in on (and possibly get lost in) the details of the code.  Now let’s rearrange the methods of the class to more closely match the order in which things are called and referenced:

<?
class SalesReport {

    private $startDate = '';
    private $endDate = '';
    private $salesQuarter = 0;
    private $salesTeamMembers = array();

    public function __construct() {

    }

    public function setEndDate($date) {
        $this->endDate = $date;
    }

    public function setStartDate($date) {
        $this->startDate = $date;
    }

    public function setSalesQuarter($salesQuarter) {
        if(is_int($salesQuarter)) {
            $this->salesQuarter = $salesQuarter;
        } else {
            throw new Exception('Sales Quarter must be an integer');
        }
    }

    public function setSalesTeamMembers($teamMemberIds) {
        if(is_array($teamMemberIds)) {
            $this->salesTeamMembers = $teamMemberIds;
        } else {
            throw new Exception('SalesReport::setSalesTeamMembers only accepts an array of team member ids');
        }
    }

    public function generate() {
        $whereClause = $this->generateReportQueryWhereClause();
        $orderByClause = $this->generateReportQueryOrderByClause();
        $limitClause = $this->generateReportQueryLimitClause();
        $query = "
            SELECT
                /* Field Listing */
            FROM
                sales
            $whereClause
            $orderByClause
            $limitClause
        ";
        // execute query
        return TRUE;
    }

    public function generateReportQueryWhereClause() {
        // Generate WHERE clause based on report selection criteria
    }

    public function generateReportQueryOrderByClause() {
        // Generate ORDER BY clause
    }

    public function generateReportQueryLimitClause() {
        // Generate Limit clause
    }

    public function load() {
        // Load report results from temporary table
    }
}
?>

See the difference? Notice how the code naturally flows from one method to the next, allowing you to quickly ascertain what the class is doing and when it’s doing it. By ordering the methods so the calling method (caller) is declared before the method being called (callee), you drastically increase your code’s readability.

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!

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

[
    {
        "favorite_color": "blue",
        "total": "48",
        "percentage": "12"
    },
    {
        "favorite_color": "green",
        "total": "53",
        "percentage": "13"
    },
    {
        "favorite_color": "orange",
        "total": "56",
        "percentage": "14"
    },
    {
        "favorite_color": "pink",
        "total": "59",
        "percentage": "15"
    },
    {
        "favorite_color": "red",
        "total": "38",
        "percentage": "10"
    },
    {
        "favorite_color": "violet",
        "total": "45",
        "percentage": "11"
    },
    {
        "favorite_color": "yellow",
        "total": "101",
        "percentage": "25"
    }
]

For a pie chart, your store needs to have two main things: a field that the pie chart’s labeling system will use (e.g., ‘favorite_color’) and a field that the pie chart’s series will use (e.g., ‘total’). As you can see from the feature image, the pie chart uses the favorite_color and total fields to display the data in the correct proportions. Now let’s look at a single record from the JSON response for the data grid:

    {
        "id": "50",
        "first_name": "Wynne",
        "last_name": "Aguilar",
        "age": "94",
        "gender": "2",
        "hair_color": "Other",
        "eye_color": "Hazel",
        "state": "ND",
        "favorite_color": "yellow",
        "car_model": "Toyota",
        "housing_type": "Mobile Home",
        "marriage_status": "Single",
        "has_pets": "1",
        "num_children": "10"
    }

As you can see from the drastic difference between the two data stores, if we tried to power the grid and the pie chart from the same store, neither would render correctly; the pie chart wouldn’t have a field to calculate it’s segment sizes with and the grid wouldn’t have any of the fields it’s expecting through the column model. Long story short, there’s no way to tie the grid’s data to the pie chart (or vice versa) without causing serious issues.

To get around this limitation, we need to simultaneously filter both stores at the same time. Here’s the controller for both the grid and the pie chart:

Ext.define('App.controller.People', {
    extend: 'Ext.app.Controller',
    models: [
        'Person',
    ],
    stores: [
        'people.People',
        'people.FavoriteColorCounts'
    ],
    views:[
        'person.Grid',
        'chart.FavoriteColorPieChart'
    ],
    refs: [{
        ref: 'favoriteColorPieChart',
        selector: 'favoritecolorpiechart'
    }, {
        ref: 'personGrid',
        selector: 'persongrid'
    }],
    init: function() {
        this.getPeoplePeopleStore().on(
            'load',
            function(store, records, successful, operation, options) {
                var filters;
                var gridFilterFeature = this.getPersonGrid().filters;
                    filters = gridFilterFeature.buildQuery(gridFilterFeature.getFilterData());
                this.getPeopleFavoriteColorCountsStore().load({
                   params: {
                       filter: filters
                   }
                });
            },
            this
        )
        this.callParent(arguments)
    }
});

There’s a lot going on there, but we really need to only focus on the init method:

...
    init: function() {
        this.getPeoplePeopleStore().on(
            'load',
            function(store, records, successful, operation, options) {
                var filters;
                var gridFilterFeature = this.getPersonGrid().filters;
                    filters = gridFilterFeature.buildQuery(gridFilterFeature.getFilterData());
                this.getPeopleFavoriteColorCountsStore().load({
                   params: {
                       filter: filters
                   }
                });
            },
            this
        )
        this.callParent(arguments)
    }

Let’s break it down:

...
        this.getPeoplePeopleStore().on(
            'load',
            function(store, records, successful, operation, options) {
...

Here, we’re adding a listener to the load event of the people.People store.

...
          var filters;
          var gridFilterFeature = this.getPersonGrid().filters;
          filters = gridFilterFeature.buildQuery(gridFilterFeature.getFilterData());
          this.getPeopleFavoriteColorCountsStore().load({
              params: {
                  filter: filters
              }
...

Here, we’re grabbing the filters from the grid we want to use on the pie chart’s store, rebuilding them into a JSON string using buildQuery and then reloading the pie chart’s store while passing in the filters.

Well, I hope that helps someone out because God knows I wasted fours of my life figuring it out.

The Override Code

Ext.form.field.ComboBox.override( {
    setValue: function(v) {
        v = (v && v.toString) ? v.toString() : v;
        if(!this.store.isLoaded && this.queryMode == 'remote') {
            this.store.addListener('load', function() {
                this.store.isLoaded = true;
                this.setValue(v);
            }, this);
           this.store.load();
        } else {
            this.callOverridden(arguments);
        }
    }
});

Here, we override the setValue method of the ComboBox component and do the following:

1. Make sure the store is not yet loaded (a custom property I added) and that it is tied to a remote store
2. Add a listener to the ‘load’ event. When the store is loaded, set isLoaded equal to true and call setValue again.
3. Load the store
4. If the store is already loaded or the store is local, call the original overridden setValue method

Just drop this into whatever JS file you keep your other overrides in and you’ll be good to go. Happy coding!

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

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.

The best solution would be to use the “buffer” property of the event listener object to delay the request until we’re finished typing. Here’s how you go about declaring additional properties of an event listener from inside the controller:

Ext.define('app.controller.myController', {
    init: function() {
        this.control({
            'form > textfield': {
                change: {
                    fn: this.textFieldChange,
                    buffer: 500 // Delay the request by half a second
                 }
            }
        })
    },
    textFieldChange: function(textField, newValue, oldValue, options) {
      alert('The text box went from' + oldValue + ' to ' + newValue);
    }
});

Hope somebody out there finds this as helpful as I did. Happy coding!

Ext.Loader.setConfig({ // Set up auto-loading
    enabled: true,
    paths: {
        Ext: 'extjs/src'
    }
});
Ext.define('User', { // The store
    alias: 'widget.userModel',
    extend: 'Ext.data.Model',
    idProperty: 'id',
    fields: [{
        name: 'id',
        type: 'int'
    }, {
        name: 'name',
        type: 'string'
    }, {
        name: 'dob',
        type: 'date',
        dateFormat: 'Y-m-d'
    }],
    proxy: {
        type: 'ajax',
        api: {
            create: 'myBackend.php?action=create', // Called when saving new records
            read: 'data/users.json', // Called when reading existing records
            update: 'myBackend.php?action=update', // Called when updating existing records
            destroy: 'myBackend.php?action=destroy' // Called when deleting existing records
        },
        reader: {
            type: 'json', // We expect the server to give us a JSON string as a response
            root: 'users'
        }
    }
})

Ext.define('Users', {
    extend: 'Ext.data.Store',
    alias: 'widget.userStore',
    model: 'User',
    autoLoad: false,
    autoSync: true
});</pre>
This is a pretty straightforward example. We have a 'User' model with the following fields: id, name and dob (date of birth) and a store that is tied to that model. Let's load up one of those user objects from the database and try to change the title:
<pre escaped="true" lang="javascript" line="1">Ext.onReady(function() {
    Ext.widget('userModel').self.load(1, {
        success: function(record, operation) {
            record.data.name = 'Joe Smith';
        }
    })
})

Now let’s try saving our changes and take a peek at the AJAX request sent to the server (via Chrome’s JavaScript tools console):

Console Output:

record.save();
url: http://www.dev.levihackwith.com/dnd_dev/myBackend.php?action=create&_dc=1309112727215
Query String Parameters:
action:create
...
1
As you can a see, our proxy attempted to create the record via the model proxy's 'create' api command instead of update it using the 'update' command. Why is this? Well, let's take a closer look at the record that was returned to us when we called the model's load method:

<a href="http://www.levihackwith.com/wp-content/uploads/2011/06/ScreenClip.png"><img class="size-full wp-image-72" title="Loaded User Model" src="http://www.levihackwith.com/wp-content/uploads/2011/06/ScreenClip.png" alt="User model returned when save() was called" width="513" height="204" /></a>

See the model's "phantom" property? That's been set to true. Let's learn a little more about this property via the API documentation (emphasis mine):
<blockquote>Phantom: Boolean
True when the record does not yet exist in the server-side database (see setDirty). <strong>Any record which has a real database pk [primary key] set as its id property is NOT a phantom</strong> -- it's real.</blockquote>
Now, what does that mean, exactly? Well, when you are setting up a model, one of the properties you can set is the idProperty property. This specifies which field in the model serves as the unique identifier for that record when it's sent and received from the server. Now let's take another look at the response from the server:

1
{
    'success': true,
    'users':[{
        'id': '',
        'name': 'John Smith',
        'dob': '1980-06-12'
    }]
}

See how the ID field is blank? Because it’s blank, Ext assumes that it’s not been saved to the database yet and sets the Phantom property to true. Once we adjust our backend code to set the value of the field that acts as the idProperty (in this case, “id”), Ext recognizes the record as coming from the server and sets Phantom to false:

So, next time your proxy starts misbehaving, double check your server responses and model configuration and make sure you’re returning a fully-populated object. Happy coding!