Extending Objects in Ext JS

Last time we explored JavaScript object extension we dove into the most popular JavaScript library in the known universe, jQuery. This time around we’ll be looking at Ext JS, a framework I’ve been using quite a bit lately. Ext JS relies on this capability all over the place. Especially when you want to create your own customizable components.

var start = {
    id: 123,
    count: 41,
    desc: 'this is information',
    title: 'Base Object',
    tag: 'uncategorized',
    values: [1,1,2,3,5,8,13]
var more = {
    name: 'Los Techies',
    tag: 'javascript'
var extra = {
    count: 42,
    title: null,
    desc: undefined,
    values: [1,3,6,10]

var extended = Ext.apply(start, more, extra);

And the output:

    "id": 123,
    "count": 42,
    "title": null,
    "tag": "javascript",
    "values": [1,3,6,10],
    "name": "Los Techies"

You’re welcome to click back or open a new tab to compare this to the previous post, but this is different from the jQuery example. The single difference is that the desc property doesn’t exist in our extended object. Ext JS has decided that a property with a null value will overwrite a previous value (see title), but an undefined value will in effect erase the property.

For more information: Function-method-apply

About Chris Missal

Oh hey, I'm a Senior Consultant for Headspring in Austin, TX. I've been working in software professionally since 2006 and I really, really love it. I'm mostly in the Microsoft world, but enjoy building computer things of all sorts (to be vague). When I'm not slinging code, I'm probably out and about slinging discs, bowling balls, or good beer with great friends.
This entry was posted in JavaScript and tagged , , . Bookmark the permalink. Follow any comments here with the RSS feed for this post.