[CLOSED] Passing an Extra param with a gridpanel dragdrop

[DougMcDonald]

Afternoon all,

Just a quick question. What's the recommended method of passing an extra param with to the NotifyDrop function of an <ext:DropTarget>?

I have a form with 2-3 grids all with respective droptargets, but I'd like to write a generic function to pass data about as opposed to the 6-9 which are there at the moment (don't ask!).

I've got a construct in my client side code which holds the pairs of stores e.g. attendingUsers / nonAttendingUsers and selectedDates / unselectedDates etc and given a 'type' (the type being, 'users', or 'dates' for example) I'm able to select the appropriate stores to handle the removing and adding or records.

What's the suggested method of passing an additional 'type' param with the NotifyDrop event? or should I be tagging it as say part of <BaseParams> on the store? or even as a ConfigItem in the 'CustomConfig' collection on the ext:DropTarget?

Any ideas? thanks,

Doug

[Daniil]

Hi,

The scenario is a bit unclear for me. In particular, I did not get where you will take these additional parameters from, and, respectively, where they should be stored.

The simplest way is the following.

<NotifyDrop Handler="notifyDrop(source,e,data /*, any additional arguments here */); " />

var notifyDrop = function (source,e,data /*, any additional arguments here */) {}

Regarding CustomConfig.

Yes, you can define any custom config options that you wish to get and analyze them within the NotifyDrop handler.

[DougMcDonald]

Hi Daniil,

Yeah the situation is a bit unusual, I'll try to elaborate:

Say we have 4 stores:

    <ext:Store ID="strMeetingNonAttendee" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="ValueField">
                <Fields>
                    <ext:RecordField Name="ValueField">
                    </ext:RecordField>
                    <ext:RecordField Name="DisplayField">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="strMeetingAttendee" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="ValueField">
                <Fields>
                    <ext:RecordField Name="ValueField">
                    </ext:RecordField>
                    <ext:RecordField Name="DisplayField">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="strSelectedCompetitor" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="ValueField">
                <Fields>
                    <ext:RecordField Name="ValueField">
                    </ext:RecordField>
                    <ext:RecordField Name="DisplayField">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>
    <ext:Store ID="strUnselectedCompetitor" runat="server">
        <Reader>
            <ext:JsonReader IDProperty="ValueField">
                <Fields>
                    <ext:RecordField Name="ValueField">
                    </ext:RecordField>
                    <ext:RecordField Name="DisplayField">
                    </ext:RecordField>
                </Fields>
            </ext:JsonReader>
        </Reader>
    </ext:Store>

These stores are linked to 4 gridpanels and use 'EnableDragDrop="true"' to allow drag drop functionality between each pair.

And say we have at the moment, 4 handlers for the NotifyDrop event. Defined along these lines:

    <ext:DropTarget ID="DropTarget3" runat="server" Target="={grdNonAttend.view.scroller.dom}"
        Group="UnattendingDDGroup">
        <NotifyDrop Fn="moveRecord"/>
    </ext:DropTarget>
    <ext:DropTarget ID="DropTarget4" runat="server" Target="={grdAttend.view.scroller.dom}"
        Group="AttendingDDGroup">
        <NotifyDrop Fn="moveRecord"/>
    </ext:DropTarget>
    <ext:DropTarget ID="DropTarget5" runat="server" Target="={grdUnselectedCompetitor.view.scroller.dom}"
        Group="UnselectedCompetitorDDGroup">
        <NotifyDrop Fn="competitorMoveToUnselected" />
    </ext:DropTarget>
    <ext:DropTarget ID="DropTarget6" runat="server" Target="={grdSelectedCompetitor.view.scroller.dom}"
        Group="SelectedCompetitorDDGroup">
        <NotifyDrop Fn="competitorMoveToSelected" />
    </ext:DropTarget>

You can see on the bottom two, we have the Fn's 'competitorMoveToUnselected' and 'competitorMoveToSelected'. The implementation of these functions is far too similar for my liking:

function competitorMoveToUnselected(opSource, e, opData) {

    Ext.each(opSource.dragData.selections, function (opRecord) {
        moveRow(strUnselectedCompetitor, opRecord, opSource);
    });

    return true;
}

function competitorMoveToSelected (opSource, e, data) {

    Ext.each(opSource.dragData.selections, function (opRecord) {
        moveRow(strSelectedCompetitor, opRecord, opSource);
    });

    return true;
}

The only difference in these two handlers is that they take the target store so we can do some checks for duplicates, resort the store after the move etc.
The implementation of moveRow might look like this:

function competitorsMoveRow(opStore, opRecord, opSource) {
    // Search for duplicates
    var lpIndex = opStore.findExact('ValueField', opRecord.data.ValueField);

    // if not found
    if (lpIndex == -1) {
        //Remove Record from the source
        opSource.grid.store.remove(opRecord);
        //Add Record
        opStore.add(opRecord);

        // Call a sort dynamically
        opStore.sort('DisplayField', 'ASC');

    }
}

What I'd like to do is make these methods more generic (seeing as all 4 stores/grids just use fields DisplayField and ValueField).
My thoughts are that if I know which store the records are coming from, provided by the NotifyDrop handler, I can work out the paired store, and therefore not need to pass it. If I don't need to pass it then I can use the same method for all of the moves (rather than very similar ones with a hard coded store reference).

I think what you've suggested, passing the paired store to the handler of the NotifyDrop event should suffice, that way I will know which stores the records came from and are going to, so it should all fall into place.

Sorry if that's still unclear, a bit hard to explain without going into loads of detail!

Thanks for the suggestion, I'll give that a go,

Cheers,

Doug

[Daniil]

Seems the requirement is clear, thanks for clarification.

I would sort it out this way.

1. Define a custom config option like this:

<ext:DropTarget runat="server" Target="={GridPanel1.view.scroller.dom}" Group="someDDGroup">
    <CustomConfig>
        <ext:ConfigItem Name="targetStoreId" Value="Store1" Mode="Value" />
    </CustomConfig>
    <NotifyDrop Fn="notifyDrop" />
</ext:DropTarget>

2. Access the Store withing the notifyDrop function this way.

var notifyDrop = function (ddSource, e, data) {
    var targetStore = Ext.StoreMgr.lookup(this.targetStoreId);
    
    ...
};