Difference between Apply {} and Apply {items:...}?

Question

I have been using Ext.Apply in my InitComponent like so

  Ext.apply(that, {
        xtype: 'form',
        items: [.....

But i noticed there was a blue background left behind on my window where the xtype is used, basically using the following fixes the issue. I suppose I am asking what the difference between the two is ?

  Ext.apply(that, {
        items: {
            xtype: 'form',
            items: [

If you notice that the first one I am just applying xtypes directly on the Apply and the 2nd one (that fixes the issue) I am including the array items.

Which one should i be using?

Answer 1

With the first apply you are applying the form onto 'that' itself, with the second apply you are applying the form on the items array. But to make it more confusing you should use applyIf to ensure you are not overriding existing items in the array.

initComponent: function () {
    var me = this;

    Ext.applyIf(me, {
        items: {
            xtype: 'form',
            items: [
                ...
            ]
        }
    });

    me.callParent(arguments);
}