Extjs : clear selections in item selector

Question

What I have is I have an item selector with available users and assigned users as two different columns. On clicking any user in the available users and clicking a different menu option, the selected user from the available users columns is still displayed. How do I clear the selection upon clicking a different menu ?

Here's how the screen looks with the selection under a particular menu :

And here's the selection again after opting a different menu :

I tried, accessing the store and clearValue() and setValue('') which is not right solution and I was not able to access the selecitonModel to perform clearSelections() here.

How do I clear the selections upon clicking menu?

Would greatly appreciate your help, thanks a lot.

Answer 1

store.removeAll();

is this what you are looking for

Answer 2

You can use the getSelectionModel().deselectAll() method of the "Users View" (that you want to clear the selection) within the listener select from the "Roles View". This will cause all user record selections to be removed when selecting a different menu. See docs: getSelectionModel, deselectAll.

Example:

{
    xtype: 'dataview',
    .
    .
    .

    listeners: {
        select: function(dataview, record, index, eOpts){
            dataview.view.up('viewport').down('#usersView').getSelectionModel().deselectAll();
        }
    }
}

Within the listener, it performs the method to deselect all records from the target view.

These methods are commonly found in components that have the selection behavior, such as the grid.

See this fiddle: Deselect DataView Items.