Ext js gridpanel reconfigure is displaying the column headers jumbled

[azadlaxman]

Im having the ext js grid panel 4.0,
im loading the columns and store dynamically on to it, on select event of a combobox,

the headers are displayed properly when we load it for the first time ,
1stLoad.png

however for the consecutive combo value selections, the headers are not displayed properly,
consecutiveload.png

I've tried following options:
doLayout(), view refresh, on Grid objects with no luck.

i would be of great help if someone can give some pointers for this problem

Grid View definitions in form:
{
xtype: 'iq_gridpanel',
id: 'inserSFsecRolesGrid',
columns: [{ name: 'Loading...', type: 'string', locked: true}],
cls: 'dirtyCellFalse',
columnLines: true,
stateful: false,
}

Code for constructing the model fields and loading store for the grid:
var myFields = [];
for (var i = 0, len = r[0].raw.columnInfo.fields.items.length; i < len; i++) {
var field = r[0].raw.columnInfo.fields.items[i];

var this_field = {};
if (Ext.util.Format.lowercase(field.dataIndex) == 'memberid') {
this_field['name'] = 'memberid';
this_field['type'] = 'string';
}
else if (Ext.util.Format.lowercase(field.dataIndex) == "secicon") {
this_field['name'] = 'secicon';
this_field['type'] = 'string';
}
else if (Ext.util.Format.lowercase(field.dataIndex) == "displayname" || Ext.util.Format.lowercase(field.dataIndex) == 'name') {
this_field['name'] = 'displayname';
this_field['type'] = 'string';
}
else {
this_field['name'] = field.dataIndex;
this_field['type'] = 'bool';
}

myFields.push(this_field);
}


var store2 = Ext.create("Ext.data.Store", {
fields: myFields
});


debugger;
Ext.getCmp("iq_insertSF_windowpanelid").items.items[1].btn.show();
store2.loadData(r[0].raw.GridData);
r[0].raw.columnInfo.fields.items[1].renderer = renderSecurityIcon;
var columnInfo = r[0].raw.columnInfo.fields.items;
var hdrObj = Ext.grid.header.Container(columnInfo);
secRolesGridObj.reconfigure(null, hdrObj);
// secRolesGridObj.query('panel')[0].componentLayout.initialized = false;
// secRolesGridObj.query('panel')[1].componentLayout.initialized = false;
// secRolesGridObj.query('panel')[0].doLayout();
// secRolesGridObj.query('panel')[1].doLayout();
//secRolesGridObj.bindStore(store2);
secRolesGridObj.doLayout();
secRolesGridObj.getView().refresh();

Thanks