CODEWITHSUNDEEP
inheritanceextjs
SexyMF
SexyMF

Reputation: 11155

Extjs inheritance odd behavior

I have inheritance in Extjs, and I want a child class property to be merged with the parent class property (column in this case). 

Ext.define('MyApp.view.Child', {
    extend: 'MyApp.view.Parent',
    title: 'Action Column Child extend ',
    alias: 'widget.childpanel',
    initComponent: function () {
        //this merging very odd.        
        this.columns = Ext.apply(this.columns, [{
            text: 'Other',
            dataIndex: 'other'
        }]);
        this.callParent(arguments)
    }
});

http://jsfiddle.net/PM6j6/

Two problems:
1) I am trying to merge the child columns property with the parent and the merge works partially, it added the Other column but removes first one from the parent. see jsfiddle for simulating.

2) When I render the grid and its parent and I click on the sorting, both of the grids are sorted. its like a collision.

Thanks

Upvotes: 0

Views: 223

Answers (2)

matt
matt

Reputation: 4047

Ext.apply is used to merge properties of one object to another. The grid's column config however is an array of column configuration objects.

Therefore you just need to push the additional column configuration object to the array:

initComponent: function() {
    this.columns.push({
        text: 'Other',
        dataIndex: 'other'
    });

    this.callParent(arguments);
}

As for your 2nd question, it was already mentioned that you need to use a different store if you do not want sorters and filters to be applied on both grids.

Upvotes: 1

CD..
CD..

Reputation: 74146

  1. I think you need to clone the parent columns and use push in this case:

    initComponent: function () {
    var clonedParentColumns = Ext.clone(this.superclass.columns);

    clonedParentColumns.push({
        text: 'Other',
        dataIndex: 'other'
    });

    this.columns = clonedParentColumns;

    this.callParent(arguments);
}

    http://jsfiddle.net/jUE8j/

  2. Both parent and child are using the same store. (in this example a store is created for each one of them: http://jsfiddle.net/jUE8j/2/)

Upvotes: 1

Related Questions