Lock Columns in CQ.Ext.grid.EditorGridPanel

[ykumarreddy]

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 

[Lokesh_Shivalingaiah]

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

[ykumarreddy]

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

[kautuk_sahni]

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

[ykumarreddy]

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 

[ykumarreddy]

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

[smacdonald2008 · Accepted solution]

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

[ykumarreddy]

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

Regards,

Kumar