How to highlight items in dragged panel which are already dropped in ExtJS framework?

Question

I have 2 grid panels written in ExtJS. My code is:

                var leftListGrid = Ext.create("Ext.grid.Panel",{
                    id:'allSubjectsGrid',
                    scrollable: true,
                    height: '100%',
                    flex: 1,
                    multiSelect: true,
                    padding: '20 2 20 20',
                    rowLines: true,
                    closeAction: 'hide',
                    columns: [
                        { text: 'Available Subjects', dataIndex: 'displayname', type: 'string', flex: 1, resizable: false}
                    ],
                    viewConfig: {
                        copy: true,
                        plugins: {
                            ptype: 'gridviewdragdrop',
                            dragGroup: 'subjectcModulesDD'
                        }
                    },
                    store: SubjectData.availableSubjectStore 
                });


                var rightListGrid = Ext.create("Ext.grid.Panel",{
                    height: '100%',
                    flex: 1,
                    id: 'associatedSubjectsGrid',
                    padding: '20 20 20 2',
                    multiSelect: true,
                    rowLines: true,
                    scrollable: true,
                    columns: [
                        { text: 'Associated Subjects', dataIndex: 'displayname', type: 'string', flex: 1, resizable: false},
                        {
                            xtype: 'actioncolumn',
                            width:30,
                            sortable: false,
                            resizable: false,
                            menuDisabled: true,
                            align: 'center',
                            items: [
                                {
                                    icon: '/images/delete.png',
                                    handler: function (view, rowIndex, colIndex, item, e, record, row) {
                                        SubjectData.selectedSubjectStore.remove(record);
                                    }
                                }
                            ]
                        }
                    ],
                    viewConfig: {
                        copy: true,
                        plugins: {
                            ptype: 'gridviewdragdrop',
                            dropGroup: 'subjectcModulesDD'
                        }
                    },  
                    store: SubjectData.selectedSubjectStore 
                });

I can drag row from leftListGrid and drop to rightListGrid ( not vice-versa ). I want to highlight those rows of leftListGrid which are already dropped in rightListGrid panel .

Is any config for this or how to do? I am using Extjs v5.1.1.371

Answer 1

You can add a getRowClass function to your left panel's viewConfig to add a custom class to rows depending on the record values.

viewConfig: {
    getRowClass: function(record) {
        // Your custom code to determine whether the record has a match in the right list goes here:
        if(rightListGrid.getStore().find("Id",record.get("Id"))>-1) return 'my-highlight-class';
        return '';
    }
}

Now you can add your own CSS regarding my-highlight-class to your style sheet.

You may have to call leftListGrid.getView().refresh() after an item has been dropped into the right grid to make sure that the row class is updated.