PDA

View Full Version : How to add new columns for existing gird with locked columns



agarapati
5 Aug 2015, 4:30 AM
Below is the sample code snippet in Fiddle.
https://fiddle.sencha.com/#fiddle/rl6

I have few columns that are fixed in a grid which I defined in view of the application (app/view/Grids) which will be locked by default. In locked columns I need to trigger checkchange on the checkbox(First column).

Rest of the non-locked columns will be returned using a store call. I tried to add them from controller for existing columns by using grid reconfigure, below is the sample code how I tried same can be found in (app/controller/Grids).



var columns = grid.getColumnManager().getColumns();
columns.push({
text: 'Parameter',
dataIndex: 'param',
width: 88,
locked: true,
menuDisabled: true
});
columns.push({
xtype: 'gridcolumn',
items: [{
xtype: 'button',
text: 'Delete me',
scope: this,
handler: this.hideColumn,
colIndex:1
}, {
xtype: 'box',
autoEl: 'div',
html: 'Col1 Heading'
}],
dataIndex: '1yr',
menuDisabled: true
});


After reconfigure all the columns headers are gone and event binding on checkchange even on checkcolumn is not getting triggered.

If we comment Line 158 in Controller and un-comment Line 159 we can observe the column Headers are displayed and event is getting binded,

is there any mistake I am doing for not getting column headers and event binding or it any other way to add new columns for existing grid without any breaking of grid and event binding functionality?




grid.reconfigure(store1,columns);
//grid.reconfigure(store1);

scottmartin
6 Aug 2015, 9:25 AM
When you lock a column, it actually creates 2 grids.

See if the following will help:



Ext.onReady(function(){

var store = Ext.create('Ext.data.Store', {
fields : ['name', 'email', 'change'],
data : {'items' : [
{ 'name' : 'Lisa', 'email' : 'lisa@simpsons.com', 'change' : 100 },
{ 'name' : 'Bart', 'email' : 'bart@simpsons.com', 'change' : -20 },
{ 'name' : 'Homer', 'email' : 'home@simpsons.com', 'change' : 23 },
{ 'name' : 'Marge', 'email' : 'marge@simpsons.com', 'change' : -11 }
]},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});

var columns = [
{ header : 'Name', dataIndex : 'name', locked: true },
{ header : 'Email', dataIndex : 'email', flex : 1 },
{ header : 'Change', dataIndex : 'change' }
];

var columnsLocked = [
{ header : 'Name', dataIndex : 'name' },
{ header : 'Email', dataIndex : 'email' }
];

var columnsNormal = [
{ header : 'Change', dataIndex : 'change' }
];

var grid = Ext.create('Ext.grid.Panel', {
title : 'Simpsons',
store : store,
columns : columns,
height : 200,
width : 400,
renderTo : Ext.getBody()
});

setTimeout(function(){
grid.lockedGrid.reconfigure(store,columnsLocked);
grid.normalGrid.reconfigure(store,columnsNormal);
}, 2000);


});

agarapati
10 Aug 2015, 11:28 PM
Thanks Scott, it is helpful