SOLVED
Lock Columns in CQ.Ext.grid.EditorGridPanel
Please find below the code snippet doing as you stated.
//java script code when your ExtJS library is loaded
Ext.onReady(function() {
var columns = [
{
text : 'Column 1',
dataIndex: 'column1',
locked : true,
width : 200
},
{
text : 'Column 2',
dataIndex: 'column2',
locked : true, // ADD THIS IN COLUMN 2
width : 200
},
{
text : 'Column 3',
dataIndex: 'column3',
width : 200
}
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'column1'},
{name: 'column2'},
{name: 'column3'}
]
});
var grid = Ext.create('Ext.grid.Panel', {
columns: [],
enableLocking: true,
renderTo: Ext.getBody(),
width: 600, // CHANGE THIS VALUE TO 600
height: 300
});
grid.reconfigure(store, columns);
grid.getStore().loadData([
[ 'Row 1 Column 1', 'Row 1 Column 2', 'Row 1 Column 3' ],
[ 'Row 2 Column 1', 'Row 2 Column 2', 'Row 2 Column 3' ]
]);
});
Note: “enableLocking: true” is doing the intended.
Link: - http://jsfiddle.net/nj4nk/11/ (jsfiddle demo, IN THIS CODE WE HAVE LOCKED 1 COLUMN, BUT IF U WANT TO LOCK 2 COLUMN COPY PAST ABOVE CODE.).
I hope this would help you.
Thanks and Regards
Kautuk Sahni
Kautuk Sahni
wrote...
Please find below the code snippet doing as you stated.
//java script code when your ExtJS library is loaded
Ext.onReady(function() {
var columns = [
{
text : 'Column 1',
dataIndex: 'column1',
locked : true,
width : 200
},
{
text : 'Column 2',
dataIndex: 'column2',
locked : true, // ADD THIS IN COLUMN 2
width : 200
},
{
text : 'Column 3',
dataIndex: 'column3',
width : 200
}
];
var store = Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'column1'},
{name: 'column2'},
{name: 'column3'}
]
});
var grid = Ext.create('Ext.grid.Panel', {
columns: [],
enableLocking: true,
renderTo: Ext.getBody(),
width: 600, // CHANGE THIS VALUE TO 600
height: 300
});
grid.reconfigure(store, columns);
grid.getStore().loadData([
[ 'Row 1 Column 1', 'Row 1 Column 2', 'Row 1 Column 3' ],
[ 'Row 2 Column 1', 'Row 2 Column 2', 'Row 2 Column 3' ]
]);
});
Note: “enableLocking: true” is doing the intended.
Link: - http://jsfiddle.net/nj4nk/11/ (jsfiddle demo, IN THIS CODE WE HAVE LOCKED 1 COLUMN, BUT IF U WANT TO LOCK 2 COLUMN COPY PAST ABOVE CODE.).
I hope this would help you.
Thanks and Regards
Kautuk Sahni
Hi,
I tried this option and still columns are not locked.
My code.
In Translator.js.
I changed below method.
var cmCfg = {
// specify any defaults for each column
defaults: {
width: 120,
sortable: true,
renderer: toolTipRenderer
},
columns:[{
id: 'string',
header: "String",
dataIndex: 'string',
locked: true,
width: 300
},{
header: "Comment",
dataIndex: 'comment',
width: 200
}]
};
And added enableLocking: true in grid = new CQ.Ext.grid.EditorGridPanel("..}) function.
grid = new CQ.Ext.grid.EditorGridPanel({
region: "center",
//title: "Strings",
margins: '5 5 5 5',
enableLocking: true,
selModel: new CQ.Ext.grid.RowSelectionModel(),
autoScroll: false,
Basically I need to lock first 3 columns in translator.html as showed in attached screen..Could you please help which method I need to
