Hi All,
i have Ext grid with selType as checkboxmodel, and the remaining columns are dynamic. My requirement is like i want to freeze the checkbox column when the user scrolls to right. Below is the ext grid view. How can i acheive this. i tried by putting locked: true within the selModel,but i didn't worked. Please suggest any possibility. Thanks in advance.

Code:
Ext.define('OfferManagement.view.ComponentGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.componentgrid',
    columnLines: true,
    multiSelect: true,
    selModel: {
        selType: 'checkboxmodel', // rowmodel is the default selection model
        mode: 'MULTI'     // Allows selection of multiple rows
    },
    viewConfig: {
        preserveScrollOnRefresh: true
    },
    cls: 'wrap-column-headers',
    bodyCls: 'darklines',
    height: 280,
    isReadonly: false,


    initComponent: function () {
        this.plugins = this.createPlugins();
        this.createItems();




        Ext.apply(this, {
            bbar: [this.updateKeyFieldsButton,
                this.massUpdateButton,
                this.clearFiltersButton,
                this.addConfigurationButton,
                this.deleteConfigurationButton,
                this.componentAddOnButton],
            header: {
                defaults: { margin: '0 2 0 0' },
                titlePosition: 0,
                items: [this.resetGridButton,
                        this.exportButton,
                        this.importButton,
                { xtype: 'tbspacer', width: 10 },
                    {
                        xtype: 'rowcountbutton',
                        text: 'Small Grid',
                        pressed: true,
                        toggleGroup: this.title,
                        margin:'0 2 0 2'
                    },
                    {
                        xtype: 'rowcountbutton',
                        text: 'Medium Grid',
                        toggleGroup: this.title,
                        margin: '0 2 0 2'
                    },
                    {
                        xtype: 'rowcountbutton',
                        text: 'Large Grid',
                        toggleGroup: this.title,
                        margin: '0 2 0 2'
                    }
                ]
            }
        });


        this.callParent(arguments);
    },


    createPlugins: function () {
        return [
            this.editPlugin = Ext.create('Ext.grid.plugin.CellEditing', { clicksToEdit: 2 }),
            this.bufferedRenderer = Ext.create('Ext.grid.plugin.BufferedRenderer', { trailingBufferZone: 2, leadingBufferZone: 2 })
        ];
    },


    createItems: function () {
        this.resetGridButton = Ext.create('Ext.Button', {
            text: 'Reset Grid'
        });
        this.exportButton = Ext.create('Ext.Button', {
            text: 'Export',
            action: 'exportComponentGridData',
            disabled: false
        });
        this.importButton = Ext.create('Ext.Button', {
            text: 'Import',
            action: 'importData',
            format: 'excel',
            disabled: false
        });
        this.addConfigurationButton = Ext.create('Ext.Button', {
            text: 'Add Configuration',
            action: 'addConfiguration',
            disabled: this.isReadonly
        });


        this.clearFiltersButton = Ext.create('Ext.Button', {
            text: 'Clear Filters',
            disabled: true
        });


        this.cloneButton = Ext.create('Ext.Button', {
            text: 'Clone Configuration',
            action: 'cloneConfiguration',
            disabled: true
        });


        this.componentAddOnButton = Ext.create('Ext.Button', {
            text: 'Add Sub-Components',
            action: 'componentAddOn',
            disabled: true
        });


        this.deleteConfigurationButton = Ext.create('Ext.Button', {
            text: 'Delete Configuration',
            action: 'deleteConfiguration',
            disabled: true
        });


        this.massUpdateButton = Ext.create('Ext.Button', {
            text: 'Mass Update',
            action: 'showMassUpdate',
            disabled: true
        });


        this.updateKeyFieldsButton = Ext.create('Ext.Button', {
            text: 'Update Key Fields',
            action: 'showUpdateKeyFields',
            disabled: true
        });
    }
});