Extjs 5 Lock on grid columns - extjs5

Question

I wanted to lock the first few columns of my grid and provide horizontal scrolling for the rest of the columns. Am making use of column header gruping.
I have used locked : true property and set a static width to those columns. Yet nothing is happening. I have checked all possible docs. Not sure where the mistake lies. Could someone please help me?
Code is as given below
View.js'
Ext.define('MyModel.view.graphPanel', {
extend: 'Ext.grid.Panel',
layout:'border',
alias: 'widget.graphPanel',
name:'graphPanel',
title: 'Tests',
store: 'MyModel.store.settingStore',
viewConfig: {
stripeRows: true
},
columnLines: true,
split:true,
frame: true
});
Controller.js
Ext.define('MyModel.controller.myController', {
extend:'Ext.app.Controller',
models:['MyModel.model.settingModel'],
stores:['MyModel.store.settingStore'],
init: function() {
Ext.Ajax.request({
url: 'Sample.xml',
success: function(response, opts) {
var txt = response.responseText;
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
var columnArr = [];
var outercolumnarr = [];
var fieldArr = [];
modelfieldArr = [];
completeDataArr=[];
//This builds all locked set of columns
var headerArr = xmlDoc.getElementsByTagName('HEADER1');
Ext.each(headerArr[0].getElementsByTagName('HEADER2'), function(header, index) {
columnArr.push({
text: header.getAttribute('TEXT'),
dataIndex: header.getAttribute('DATAINDEX'),
locked:true,
width:100,
forceFit: true
});
});
outercolumnarr.push({
text:"General data",
width:400,
columns:columnArr,
locked:true
});
//Building scrollable columns
var days = ['Sun','Mon',Tue'];
Ext.each(days, function(day, index) {
columnArr = [];
Ext.each(headerArr[1].getElementsByTagName('HEADER2'), function(innerHeader, index) {
columnArr.push({
text: innerHeader.getAttribute('TEXT'),
dataIndex: innerHeader.getAttribute('DATAINDEX')
});
});
outercolumnarr.push({
text:day,
columns:columnArr,
});
});
//outercolumnarr contains the final column array
//Similarly build data array, model and field array for stores and models.
var store = Ext.data.StoreManager.lookup('MyModel.store.settingStore');
store.setFields(modelfieldArr);
store.setData(completeDataArr);
//Reconfigure the grid
var gridview = Ext.ComponentQuery.query('graphPanel')[0];
gridview.reconfigure(store,outercolumnarr);
}
});
}
});

Answer 1

Because you are adding columns using reconfigure, enableLocking is not enabled implicitly. You must enable it manually. You may enable it in MyModel.view.graphPanel definition, but probably you'll also need to add empty column definition (columns: []), because I've had error from framework without that.
Working sample: http://jsfiddle.net/nj4nk/11/