PDA

View Full Version : [CLOSED] Fire ComboBox Select Event on Client



rthiney
Feb 16, 2013, 5:12 PM
Hi,
I have a ComboBox with a direct event, that fires on Select.


<ext:ComboBox runat="server" ID="cmboQuarters" DisplayField="Key" ValueField="Key">
<Store>
<ext:Store runat="server" ID="storeQuarter" >
<Model>
<ext:Model runat="server" IDProperty="Key">
<Fields>
<ext:ModelField Name="Key" Type="String" ></ext:ModelField>
<ext:ModelField Name="Value" Type="Date" ></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<DirectEvents>
<Select OnEvent="GetGridData">
<EventMask Msg="Fetching data..." MinDelay="0" ShowMask="true" Target="CustomTarget" CustomTarget="#{grid}" />
<ExtraParams>
<ext:Parameter Name="dateInfo" Value="this.value" Mode="Raw" />
</ExtraParams>
</Select>
</DirectEvents>
</ext:ComboBox>


I also have 2 buttons "<<" and ">>", that when clicked, would move the index back/forth through the list...

The Javascript function for forward correctly gets the next record and updates the combobox with hte next value, but I want to then fire the DirectEvent...how can I do that?



var MoveForward = function()
{
var rec = #{cmboQuarters}.getStore().getById(#{cmboQuarters} .getValue());

var index=rec.index+1;
var newRec = #{cmboQuarters}.getStore().getAt(index);
#{cmboQuarters}.setValue(newRec.get('Key'));


//HOW TO FIRE DIRECT EVENT, SELECT?


return true;
}

Baidaly
Feb 17, 2013, 2:13 AM
Hello!

Try to use fireEvent function with parameters of select event from here: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.ComboBox-event-select

Also, it can be useful to read the following article: http://www.ext.net/2012/12/19/introduction-to-ext-net-events/



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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">

private object TestData
{
get
{
return new object[]
{
new object[] { "AL", "Alabama", "The Heart of Dixie" },
new object[] { "AK", "Alaska", "The Land of the Midnight Sun" },
new object[] { "AZ", "Arizona", "The Grand Canyon State" },
new object[] { "AR", "Arkansas", "The Natural State" },
new object[] { "CA", "California", "The Golden State" },
new object[] { "CO", "Colorado", "The Mountain State" },
new object[] { "CT", "Connecticut", "The Constitution State" },
new object[] { "DE", "Delaware", "The First State" }
};
}
}

protected void GetGridData(object sender, DirectEventArgs e)
{
Console.Write("Asdf");
}
</script>
<!DOCTYPE html>
<html>
<head runat="server">
<title>Ext.NET Examples</title>
<script>
var MoveForward = function () {
var index = App.ComboBox1.getStore().find(App.ComboBox1.valueF ield, App.ComboBox1.getValue());
if (index > -1) {
var newRec = App.ComboBox1.getStore().getAt(++index);
App.ComboBox1.setValue(newRec.get(App.ComboBox1.va lueField));
App.ComboBox1.fireEvent('select', App.ComboBox1, [newRec]);
}
return true;
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:ComboBox runat="server" FieldLabel="Select multiple states" MultiSelect="true"
DisplayField="name" ValueField="abbr" Width="320" ID="ComboBox1" LabelWidth="130"
QueryMode="Local">
<SelectedItems>
<ext:ListItem Index="0" />
</SelectedItems>
<Store>
<ext:Store runat="server" Data="<%# TestData %>" AutoDataBind="true">
<Model>
<ext:Model runat="server" IDProperty="abbr" ClientIdProperty="abbr">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="name" />
<ext:ModelField Name="slogan" />
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader IDProperty="abbr" />
</Reader>
</ext:Store>
</Store>
<DirectEvents>
<Select OnEvent="GetGridData">
<ExtraParams>
<ext:Parameter Name="dateInfo" Value="this.value" Mode="Raw" />
</ExtraParams>
</Select>
</DirectEvents>
</ext:ComboBox>
<ext:Button runat="server" Text="Next" OnClientClick="MoveForward();">
</ext:Button>
</form>
</body>
</html>

Daniil
Feb 17, 2013, 12:13 PM
Hello,

We have the setValueAndFireSelect method defined in Ext.NET. You could use this method instead of the setValue one if you need the Select event fired.