GridPanel add/remove record on client side

[Vinci]

I am upgrading a project for coolite 0.8 to ext.net 2.2

I have two GridPanel in my form, I want to add a button to move a selected record on one of the GidPanel to the other one.

Button defined in designer

                                                                                <ext:Button ID="Button1" runat="server" Icon="ResultsetNext" StyleSpec="margin-bottom:2px;">
                                                                                    <Listeners>
                                                                                        <Click Handler="ReportFieldSelector.add(Source, Target);" />
                                                                                    </Listeners>
                                                                                </ext:Button>

JS

var ReportFieldSelector = {
    add: function(source, destination) {
        if (source.hasSelection()) {
            destination.store.add(source.selModel.getSelections());
            source.deleteSelected();
        }
    }
};

The JS codes are work on coolite 0.8.

I have read the document for extjs 4.2.0 and find that I can get the selected row by getSelectionModel( ) .

However I cannot find a method getSelectionModel() for "source" or "destination" when I insert a break point at the JS.

How can I do that correctly? Or should I move this function to server side by implementing DirectEvent?

[Vladimir]

Please see the following sample
https://examples2.ext.net/#/GridPane...ous/Two_Grids/