Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
SOLVED

Lock Columns in CQ.Ext.grid.EditorGridPanel

Avatar

Level 2

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 

1 Accepted Solution

Avatar

Correct answer by
Level 10
7 Replies

Avatar

Level 10

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

Avatar

Level 2
        Thanks for your quick response.  I tried with locked: true config but it is not working. Kumar

Avatar

Administrator

Hi Kumar Yadanaparthi 

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

Avatar

Level 2

kautuksahni wrote...

Hi Kumar Yadanaparthi 

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 

Avatar

Level 2

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

Avatar

Correct answer by
Level 10

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

Avatar

Level 2

Thank you.  Is there any other way I can achieve this.  Currently I am using AEM 6.0.

 

Regards,

Kumar