[CLOSED] relay events usage example

Hello All
I have a situation whereI want to use the relay events functionality extjs docs from store to its Chart. what am I missing here:

Code:

@(X.Panel() .Width(800) .Height(600) .Layout("fit") .TopBar(X.Toolbar() .Items( X.ToolbarFill(), X.Button() .Text("Reload Data") .Icon(Icon.ArrowRefresh) .Handler("App.Store1.reload();"), X.Button() .Text("Save Chart") .Icon(Icon.Disk) .Handler("saveChart") ) ) .Items(X.CartesianChart().ID("smo") .Store(X.Store() .ID("Store1") .Data(Model) .Model(X.Model().Fields("Name", "Data1")) .ServerProxy(X.AjaxProxy().Url(Url.Action("GetData"))) .Listeners(l=>l.Load.Handler="console.log('store loadedwith number of items:'+store.data.items.length);") ) .RelayEvents("this.getStore()", new []{"load"}).On("load",new JFunction("console.log('relayed store load with number of items:'+store.data.items.length);")) .Axes( X.NumericAxis() .Position(Position.Left) .Fields("Data1") .Grid(true) .Title("Number of Hits") .Minimum(0), X.CategoryAxis() .Position(Position.Bottom) .Fields("Name") .Title("Month of the Year") .Label(X.ChartLabel().RotationDegrees(-45)) ) .Series(X.BarSeries() .Highlight(true) .XField("Name") .YField("Data1") ) ) )

This is the same example as http://mvc.ext.net/#/Chart_Column/Basic/ just copy and paste this portion.

Hello @mirwais!

You seem mistaken with the usage of RelayEvents. You linked AbstractChart's relayEvents() method documentation while trying to use it as a config option in your chart.

As documentation you pointed says, it is supposed to be called from a component extension in its initComponent() method. This method is called during component instantiation and I don't think mixing it with the component set up is going to work at all.

If you are not into extending, you should bind a callback to be run after the chart is built, either from client-side or a direct event (action) returning the script.

In other words:
1. define your chart without the .RelayEvents() part
2. define an action getting the chart (var myChart = X.GetCmp<CartesianChart>("smo");) and then running the command (myChart.ReplayEvent(<parameters>);).

This way it seems more plausible for the code to work.

Can you try it with this information and let us know if you need further help using it?

Thank you Fabricio for your inputs. I am however confused on the existence of RelayEvents config of the chart, why would we use it then?
I tried it with beforerender listener

Code:

.Listeners(l=>l.BeforeRender.Handler="debugger;App.smo.relayEvents(this.getStore(), ['load']);")

but how can this event be handled then? the following does not work:

Code:

.On("load",new JFunction("console.log('relayed store load with number of items:'+store.data.items.length);"))

Hello @mirwais!

Here's an overview example of the functionality:

Controller code:

Code:

public ActionResult c61861_RelayStoreEvent() { return View(); }

View contents:

Code:

@{ Layout = null; var myData = new[] { new { name = "item1", value = 1 }, new { name = "item2", value = 2 }, new { name = "item3", value = 4 }, new { name = "item4", value = 5 }, new { name = "item5", value = 5 }, new { name = "item6", value = 6 } }; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Relaying store events to chart</title> </head> <body> <div> @Html.X().ResourceManager().InitScriptMode(InitScriptMode.Inline) @( Html.X().CartesianChart() .ID("smo") .Width(500) .Height(400) .Store( Html.X().Store() .ID("smostr") .Data(myData) .Listeners(l => l.Load.Handler = "Ext.Msg.alert('store', 'store load event triggered');") ) .Listeners(l => l.CustomConfig.Add( // Make a "load" event handler for the cartesian chart so that it can be relayed from the store. new ConfigItem() { Name = "load", Value = "function() { Ext.Msg.alert('chart', 'chart load event triggered'); }", Mode = ParameterMode.Raw } )) .Axes( Html.X().NumericAxis() .Position(Position.Left) .Fields("value") .Grid(true) .Title("Value") .Minimum(0), Html.X().CategoryAxis() .Position(Position.Bottom) .Fields("name") .Title("Item") .Label(Html.X().ChartLabel().RotationDegrees(-45)) ) .Series( Html.X().BarSeries() .Highlight(true) .XField("name") .YField("value") ) ) @Html.X().Button().Text("Relay store load event").Handler( @<text><script type="text/javascript"> // Relays the store event into the cartesian chart window.relayedEvent = App.smo.relayEvents(App.smostr, ['load']); Ext.Msg.alert('relayEvent', 'store load events will now be relayed into the chart. notice the store load event itself will not trigger.'); </script></text>) @Html.X().Button().Text("Stop relaying store load event").Handler( @<text><script type="text/javascript"> if (window.relayedEvent && window.relayedEvent.destroy) { window.relayedEvent.destroy(); }; Ext.Msg.alert('relayEvent', 'store load events will no longer be relayed into the chart.'); </script></text>) @Html.X().Button().Text("Trigger store load").Handler( @<text><script type="text/javascript"> App.smostr.load(); </script></text>) </div> </body> </html>

Thanks for the quick feedback and the example, I'll look into it in the next days- and sure somebody can use it as there was no examples of relayevents.
Meanwhile I solved my problem without relaying, but from Store's load itself.
Happy Holidays,
Mirwais

Hello @mirwais!

Thanks for the feedback. The thought I have is that this is really not what you needed, as you probably don't want the store's load event itself to be suppressed. I based this example on an ExtJS fiddle using it at RelayEvents so if you didn't know, that place is also a good source of samples and applications of ExtJS functionalities.

Understanding some ExtJS functionalities may prove essential to understand the corresponding Ext.NET's.