Why can't I apply property to my own custom class in extjs4?

Question

Can someone help me out to resolve the problem that I'm not able to apply some of properties to my own custom class. Here is my source:

Ext.define('com.amkor.web.common.client.GridPanel', {
alias : 'Web.common.client.GridPanel',
extend : 'Ext.grid.Panel',
isCheckbox : false,
initComponent : function(){ 
    var me = this;
    var sm = (me.isCheckbox)?Ext.create('Ext.selection.CheckboxModel'):'';          
    Ext.apply(me, {
        title : 'Grid',
        width : 560,
        height : 300,
        selModel : sm,
        frame : false,
        border : false,
        forceFit : true,
        columnLines : true,
        autoLoad : false,
        autoDestory : true
    });     
    me.callParent(arguments);
},
getGridSelection : function(){
    return this.getSelectionModel().getSelection();
},
removeGridSelection : function(){
    this.getStore().remove(this.getGridSelection());
}
});

As you see, I defined new custom class by extending Ext.grid.Panel, and then I define new custom class by extending custom class com.amkor.web.common.client.GridPanel.

Ext.define('EvaluationApp.view.EvaluationGrid', {
extend : 'com.amkor.web.common.client.GridPanel',
xtype : 'EnhancementGrid',
initComponent : function(){
    Ext.apply(this, {
        id : 'evalGrid',
        width : 556,
        height : 290,
        title : 'Wow',
        columns : columns,
        features : [Ext.create('Ext.grid.feature.Grouping', {
            groupHeaderTpl : '<div align="left">연도 : <font color="green">{[values.rows[0].grp_year]}</font> ({rows.length}) </div>'
        })]
    });
    this.callParent(arguments);
}
});

I wanted to change title from "Grid" to "Wow", but it does not apply. Please give me some advice.

Answer 1

Ext.define('com.amkor.web.common.client.GridPanel', {
    alias : 'Web.common.client.GridPanel',
    extend : 'Ext.grid.Panel',
    isCheckbox : false,

    title: 'Grid',

    initComponent : function(){ 
        var me = this;
        var sm = (me.isCheckbox)?Ext.create('Ext.selection.CheckboxModel'):'';          
        Ext.apply(me, {
            width : 560,
            height : 300,
            selModel : sm,
            frame : false,
            border : false,
            forceFit : true,
            columnLines : true,
            autoLoad : false,
            autoDestory : true
        });     
        me.callParent(arguments);
    },
    getGridSelection : function(){
        return this.getSelectionModel().getSelection();
    },
    removeGridSelection : function(){
        this.getStore().remove(this.getGridSelection());
    }
});

Notice how I moved the title config from inside the Ext.apply to the class definition. Now, when this grid is created, if a title is passed in, that title will be used. If no title is passed in, the title will default to 'Grid'.

To understand what is happening here, you need to understand what Ext.apply is doing. Ext.apply takes the second object passed in, and copies its properties onto the first object passed in. More info can be found in the docs: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext-method-apply .

So, in the code above, Ext.apply is copying properties onto me (which equals this), and is taking those properties from the object you are passing in as the second argument, which is displayed below.

{
    width : 560,
    height : 300,
    selModel : sm,
    frame : false,
    border : false,
    forceFit : true,
    columnLines : true,
    autoLoad : false,
    autoDestory : true
}

So, anything listed in the above object will overwrite the same properties found in this. When you create or extend the above class, any properties added to it (such as your example of setting title: 'Wow') will be added directly to this. As I said before, any properties defined in the second object will overwrite anything defined in this, so that is why when you put title: 'Grid' in the second object, it just overwrote any title property you passed in when extending the class.