PDA

View Full Version : [CLOSED] MultiSelect Store after Drop Event



cwolcott
Jan 23, 2014, 1:10 AM
I have two MultiSelect controls with individual stores. If I drag an item from MS1 and drop it to MS2 should I be able to ask store2 for a list of new items via getNewRecords?

store2.data.items has a count of 2 after dropping an item in the multiselect. items[1] has a removedFrom attribute, while item[0] does not. Not sure what this is.

When I press the Apply button I would like to know what items were added to MS2. I know I could add another Model field that identifies which MultiSelect the item started in (1 or 2) and then only process 1's, but I was hoping that the store could tell me.



<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
populateAvailableList();
populateAssignedList();
}
}

private void populateAvailableList()
{
store1.DataSource = new List<object> { new { UserNm = "Smith, Bob", UserId = 1 }, new { UserNm = "Jones, Kathy", UserId = 2 } };
store1.DataBind();
}

private void populateAssignedList()
{
store2.DataSource = new List<object> { new { UserNm = "Wilkins, John", UserId = 3 } };
store2.DataBind();
}

protected void ApplyAssignments(object sender, DirectEventArgs e)
{
Object recs = e.ExtraParams["newRecords"];
}

</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Drag and Drop w/ Stores</title>
<script type="text/javascript">
var lookAtData = function () {
debugger;
var newRecords = App.store2.getNewRecords();
var updatedRecords = App.store2.getUpdatedRecords();
var removedRecords = App.store2.getRemovedRecords();
};

</script>
</head>
<body>
<ext:ResourceManager runat="server" />
<ext:Panel runat="server" Title="Drag/Drop" BodyPadding="10" Layout="HBoxLayout">
<Items>
<ext:MultiSelect ID="ms1" runat="server" DragGroup="Grp1" SingleSelect="true"
AutoScroll="true" Height="200" Width="400" DisplayField="UserNm" ValueField="UserId">
<Store>
<ext:Store ID="store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="UserNm" Type="String" />
<ext:ModelField Name="UserId" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:MultiSelect>
<ext:MultiSelect ID="ms2" runat="server" DropGroup="Grp1" SingleSelect="true"
AutoScroll="true" Height="200" Width="400" DisplayField="UserNm" ValueField="UserId">
<Store>
<ext:Store ID="store2" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="UserNm" Type="String" />
<ext:ModelField Name="UserId" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:MultiSelect>
</Items>
<Buttons>
<ext:Button runat="server" Text="Apply">
<Listeners>
<Click Fn="lookAtData" />
</Listeners>
<DirectEvents>
<Click OnEvent="ApplyAssignments">
<ExtraParams>
<ext:Parameter Name="newRecords" Value="#{store2}.getNewRecords()" Mode="Raw"
Encode="true" />
</ExtraParams>
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:Panel>
</body>
</html>

Daniil
Jan 23, 2014, 4:01 AM
Hi Chris,

Yes, they are not considered as new. As a solution I can suggest the following to add for the MultiSelects:

<Listeners>
<Drop Handler="Ext.Array.each(records, function(rec) { rec.phantom = true; });" />
</Listeners>

After that you will get a "too much recursion" error because of:

<ext:Parameter Name="newRecords" Value="#{store2}.getNewRecords()" Mode="Raw"
Encode="true" />

A getNewRecords method returns an array of real record instances, not just its "data". A record cannot be serialized because of cross-references. At least, it contains a link to its owner Store.