Question

I have defined xtype that is simple grid with 2 columns and selModel: Ext.selection.CheckboxModel.

Ext.define('MySimpleType',
{
    extend: 'Ext.grid.Panel',
    alias: 'widget.MySimpleXType',
    autoScroll: true,
    store: mySimpleStore,
    selModel: Ext.create("Ext.selection.CheckboxModel", {
        checkOnly : true
    }),
    border: false,
    columns: [
        {
            header: 'Code',
            flex: 1,
            sortable: true,
            dataIndex: 'Code'
        },
        {
            header: 'Name',
            flex: 1,
            width: 80,
            sortable: true,
            dataIndex: 'Name'
        }
    ]
});

When I am trying to use this xtype several times in one panel: instead of creating new CheckboxModel for each usage, each xtype uses the same instance of already created CheckboxModel. In this case several checkbox columns appears in first grid and don’t behave in the proper way.
Could you please give me some idea of how to fix this?
The simplest solution is to create new Ext.selection.CheckboxModel instance for every xtype usage, but it makes code copy-pasted.

Answer 1

The solution is moving selModel definition to initComponent property of the grid:

Ext.define('MySimpleType',
{
    extend: 'Ext.grid.Panel',
    alias: 'widget.MySimpleXType',
    autoScroll: true,
    store: mySimpleStore,
    border: false,
    columns: [
        {
            header: 'Code',
            flex: 1,
            sortable: true,
            dataIndex: 'Code'
        },
        {
            header: 'Name',
            flex: 1,
            width: 80,
            sortable: true,
            dataIndex: 'Name'
        }
    ],
    initComponent: function(){
        this.selModel = Ext.create("Ext.selection.CheckboxModel", { checkOnly : true });
        this.callParent(arguments); //it's necessary to call in order to initialize parent components of this grid
    }
});