Jan 15, 2010, 4:19 AM
OnBeforeStoreChanged event is not fired within a User control
The OnBeforeStoreChanged event is not fired when the Store and the GridPanel controls is present in a User control.
The same code works in an aspx page as given in the Two Grid example...
Can someone let me know where the problem might be..
Thanks
The same code works in an aspx page as given in the Two Grid example...
Can someone let me know where the problem might be..
Thanks
<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="MultiSelectControl.ascx.vb" Inherits="Zangle.FrontOffice.UI.Web.MultiSelectControl" %>
<%@ Register assembly="Coolite.Ext.Web" namespace="Coolite.Ext.Web" tagprefix="ext" %>
<%@ Import Namespace="Coolite.Ext.Web" %>
<script type="text/javascript">
var ValueSelector = {
swapRecords: function(source, destination, records) {
var window = <%= MultiSelectorwindow.ClientID %>;
window.body.mask('Working...');
if (destination.id == <%=GridPanel2.ClientID %>) {
for (var i = 0; i < records.length; i++) {
destination.addRecord(records[i].data);
}
}
else {
for (var i = 0; i < records.length; i++) {
var record = new destination.record(records[i].data);
destination.store.addSorted(record);
}
}
window.body.unmask();
},
add: function(source, destination) {
var window = <%= MultiSelectorwindow.ClientID %>;
var gridpanel1 = <%= GridPanel1.ClientID %>;
var gridpanel2 = <%= GridPanel2.ClientID %>;
source = source || gridpanel1;
destination = destination || gridpanel2;
if (source.hasSelection()) {
var records = source.selModel.getSelections();
this.swapRecords(source, destination, records);
source.deleteSelected();
}
},
addAll: function(source, destination) {
var window = <%= MultiSelectorwindow.ClientID %>;
var gridpanel1 = <%= GridPanel1.ClientID %>;
var gridpanel2 = <%= GridPanel2.ClientID %>;
source = source || gridpanel1;
destination = destination || gridpanel2;
this.swapRecords(source, destination, source.store.getRange());
source.store.removeAll();
},
remove: function(source, destination) {
this.add(destination, source);
},
removeAll: function(source, destination) {
this.addAll(destination, source);
}
};
var openSelectorDetails = function () {
var window = <%= MultiSelectorwindow.ClientID %>;
window.show();
}
</script>
<script runat="server">
Protected Sub SaveSelection(ByVal sender As Object, ByVal e As Coolite.Ext.Web.BeforeStoreChangedEventArgs)
Dim test As String = "Test BeforeStoreChangedEvent"
End Sub
</script>
<ext:Store runat="server" ID="AvailableStore" >
<Reader>
<ext:JsonReader>
<Fields >
<ext:RecordField Name="Code"> </ext:RecordField>
<ext:RecordField Name="Description"> </ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Store runat="server" ID="SelectedStore" OnBeforeStoreChanged="SaveSelection" >
<Reader>
<ext:JsonReader>
<Fields >
<ext:RecordField Name="Code"> </ext:RecordField>
<ext:RecordField Name="Description"> </ext:RecordField>
</Fields>
</ext:JsonReader>
</Reader>
</ext:Store>
<ext:Window
ID="MultiSelectorWindow"
runat="server"
Showonload="true"
Closable="false"
Height="300"
Width="700"
Icon="WorldAdd"
Title="Criteria Value Selector"
BodyStyle="padding:5px;"
BodyBorder="false">
<Body>
<ext:ColumnLayout ID="ColumnLayout1" runat="server" FitHeight="true">
<ext:LayoutColumn ColumnWidth="0.5">
<ext:GridPanel
runat="server"
ID="GridPanel1"
EnableDragDrop="true"
StoreID="AvailableStore">
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:Column Header="Code" DataIndex="Code" Sortable="true" />
<ext:Column Header="Description" DataIndex="Description" Sortable="true" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" />
</SelectionModel>
<Plugins>
<ext:GridFilters ID="GridFilters1" runat="server" Local="true">
<Filters>
<ext:StringFilter DataIndex="Name" />
</Filters>
</ext:GridFilters>
</Plugins>
</ext:GridPanel>
</ext:LayoutColumn>
<ext:LayoutColumn>
<ext:Panel ID="Panel2" runat="server" Width="35" BodyStyle="background-color: transparent;" Border="false">
<Body>
<ext:AnchorLayout ID="AnchorLayout1" runat="server">
<ext:Anchor Vertical="40%">
<ext:Panel ID="Panel1" runat="server" Border="false" BodyStyle="background-color: transparent;" />
</ext:Anchor>
<ext:Anchor>
<ext:Panel ID="Panel3" runat="server" Border="false" BodyStyle="padding:5px;background-color: transparent;">
<Body>
<ext:Button ID="Button1" runat="server" Icon="ResultsetNext" StyleSpec="margin-bottom:2px;">
<Listeners>
<Click Handler="ValueSelector.add();" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTip1" runat="server" Title="Add" Html="Add Selected Rows" />
</ToolTips>
</ext:Button>
<ext:Button ID="Button2" runat="server" Icon="ResultsetLast" StyleSpec="margin-bottom:2px;">
<Listeners>
<Click Handler="ValueSelector.addAll();" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTip2" runat="server" Title="Add all" Html="Add All Rows" />
</ToolTips>
</ext:Button>
<ext:Button ID="Button3" runat="server" Icon="ResultsetPrevious" StyleSpec="margin-bottom:2px;">
<Listeners>
<Click Handler="ValueSelector.remove(multiselectControl_GridPanel1,multiselectControl_GridPanel2 );" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTip3" runat="server" Title="Remove" Html="Remove Selected Rows" />
</ToolTips>
</ext:Button>
<ext:Button ID="Button4" runat="server" Icon="ResultsetFirst" StyleSpec="margin-bottom:2px;">
<Listeners>
<Click Handler="ValueSelector.removeAll(multiselectControl_GridPanel1, multiselectControl_GridPanel2);" />
</Listeners>
<ToolTips>
<ext:ToolTip ID="ToolTip4" runat="server" Title="Remove all" Html="Remove All Rows" />
</ToolTips>
</ext:Button>
</Body>
</ext:Panel>
</ext:Anchor>
</ext:AnchorLayout>
</Body>
</ext:Panel>
</ext:LayoutColumn>
<ext:LayoutColumn ColumnWidth="0.5">
<ext:GridPanel
runat="server"
ID="GridPanel2"
EnableDragDrop="false"
StoreID="SelectedStore">
<Listeners>
</Listeners>
<ColumnModel ID="ColumnModel2" runat="server">
<Columns>
<ext:Column Header="Code" DataIndex="Code" Sortable="true" />
<ext:Column Header="Description" DataIndex="Description" Sortable="true" />
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel2" runat="server" />
</SelectionModel>
<SaveMask ShowMask="true" />
</ext:GridPanel>
</ext:LayoutColumn>
</ext:ColumnLayout>
</Body>
<Buttons>
<ext:Button ID="Button5" runat="server" Text="Save Selected Values" AutoPostBack="false" Icon="Disk">
<Listeners>
<Click Handler="#{multiselectControl_GridPanel2}.save();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button6" runat="server" Text="Cancel" Icon="Cancel">
<Listeners>
<Click Handler="ValueSelector.removeAll(multiselectControl_GridPanel1, multiselectControl_GridPanel2);" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Window>