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);
console.log(JSON.stringify(extended));

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

Related:

Post Footer automatically generated by Add Post Footer Plugin for wordpress.

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.
  • Pingback: Extending Objects with JavaScript | Chris Missal's Blog

  • Kiliman

    I think you’re missing calls to Ext.extend().

  • Manzo

    How exactly are you extending the objects? Does Ext JS does do it magically?

  • graph

    Poor article, lack of explanations

  • Colin Ramsay

    I think it’s supposed to be Ext.apply or Ext.applyIf and there’s just a gist missing..

  • http://chrismissal.lostechies.com Chris Missal

    Thanks for pointing out the missing code in the gist. My mistake, it’s added now.

  • Pingback: Extending Objects in Underscore | Chris Missal's Blog