ExtJs bufferedrenderer plugin and locked column conflict - extjs

Question

I need to lock some columns in grid. Here is my code with configuration of grid:
Ext.define('Crm.view.tables.baseTable', {
extend: 'Ext.grid.Panel',
alias : 'widget.baseTable',
columnLines: true,
initComponent: function(){
var that = this;
var $this = that;
this.selType = 'checkboxmodel',
this.selModel = {
allowDeselect: true,
mode: "MULTI"
};
this.plugins = [
new Ext.grid.plugin.CellEditing({
clicksToEdit: 2
}),
{
ptype: 'bufferedrenderer',
numFromEdge: 8,
trailingBufferZone: 10,
leadingBufferZone: 10
}
];
var filters = {
ftype: 'filters',
encode: true,
local: true
};
this.features = [filters];
var columns = [
new Ext.grid.RowNumberer(),
{
header : 'ID',
dataIndex: 'id',
locked : true,
filterable: true,
width : 30
},{
header : 'ФИО',
width : 100,
dataIndex: 'name',
filterable: true,
filter: {
type: 'string'
},
editor: 'textfield'
},{
header : 'Телефон',
dataIndex: 'phone',
filterable: true,
width : 75,
editor: 'textfield'
},{
header : 'Email',
dataIndex: 'email',
filterable: true,
width : 90,
editor: 'textfield'
}
];
this.columns = columns
var tbar = [{
text: 'Обновить',
handler: function(){
$this.getStore().reload();
}
},'-',{
text: 'Очистить фильтр',
handler: function () {
that.filters.clearFilters();
}
},'-']
this.tbar = tbar;
this.callParent();
}
});
But I get an error:
Uncaught TypeError: Cannot call method 'on' of undefined ext-all-debug.js:115013
When I remove bufferedrenderer plugin from config, the locked column
works. What is the problem? Thanks for answers!

Answer 1

This is for EXTJS 4.2.1.
Following code is init function of "Ext.data.grid.plugin.Bufferedrenderer"
When you use locking feature for grid, ExtJs wraps grid.view with "Ext.grid.locking.View".
Then init function try to find properties of grid.view which are not available through the wrapper. So I added a few line to init function (find it below with "// replace locking.View with grid.View" ) then it solves the issue.
Simply create class by extending "Ext.data.grid.plugin.Bufferedrenderer" with below init function.
Martin.P - EMH Consulting.
init: function(grid) {
var me = this,
view = grid.view,
viewListeners = {
scroll: {
fn: me.onViewScroll,
element: 'el',
scope: me
},
boxready: me.onViewResize,
resize: me.onViewResize,
refresh: me.onViewRefresh,
scope: me,
destroyable: true
};
//********************************************************************
// replace locking.View with grid.View - hayangae#gmail.com
if (view.isLockingView){
view = view.getViewForColumn();
}
//********************************************************************
// If we are using default row heights, then do not sync row heights for efficiency
if (!me.variableRowHeight && grid.ownerLockable) {
grid.ownerLockable.syncRowHeight = false;
}
// If we are going to be handling a NodeStore then it's driven by node addition and removal, *not* refreshing.
// The view overrides required above change the view's onAdd and onRemove behaviour to call onDataRefresh when necessary.
if (grid.isTree || grid.ownerLockable && grid.ownerLockable.isTree) {
view.blockRefresh = false;
view.loadMask = true;
}
if (view.positionBody) {
viewListeners.refresh = me.onViewRefresh;
}
me.grid = grid;
me.view = view;
view.bufferedRenderer = me;
view.preserveScrollOnRefresh = true;
me.bindStore(view.getStore());
view.getViewRange = function() {
return me.getViewRange();
};
me.position = 0;
me.gridListeners = grid.on('reconfigure', me.onReconfigure, me);
me.viewListeners = view.on(viewListeners);
},