Hi,
I want to lock first 3 columns in CQ.Ext.grid.EditorGridPanel when horizontal scroll bar is enable.
My requirement is, in Translator.html (http://localhost:4502/libs/cq/i18n/translator.html) I wan to lock the first 3 columns in the grid. is there any way I can customize the existing code.
Please help me how to edit the component.
Regards,
Kumar
Solved! Go to Solution.
Views
Replies
Total Likes
Looks like the AEM widget data type does not have a locking method:
https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.grid.GridPanel
Views
Replies
Total Likes
As its using extjs, you should be able to lock the columns. refer [1] for the example
[1] http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/locking-grid.html
Views
Replies
Total Likes
Views
Replies
Total Likes
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
Views
Replies
Total Likes
kautuksahni 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
Views
Replies
Total Likes
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 overwrite.
Regards,
Kumar
Views
Replies
Total Likes
Looks like the AEM widget data type does not have a locking method:
https://docs.adobe.com/docs/en/cq/5-6/widgets-api/index.html?class=CQ.Ext.grid.GridPanel
Views
Replies
Total Likes
Thank you. Is there any other way I can achieve this. Currently I am using AEM 6.0.
Regards,
Kumar
Views
Replies
Total Likes
Views
Likes
Replies
Views
Likes
Replies