[CLOSED] relay events usage example

  1. #1

    [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:
      @(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.
    Last edited by fabricio.murta; Apr 13, 2017 at 5:16 PM.
  2. #2
    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?
    Fabrício Murta
    Developer & Support Expert
  3. #3
    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
    .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:
    .On("load",new JFunction("console.log('relayed store load with number of items:'+store.data.items.length);"))
  4. #4
    Hello @mirwais!

    Here's an overview example of the functionality:

    Controller code:
    public ActionResult c61861_RelayStoreEvent() { return View(); }
    View contents:
    @{
        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>
    Fabrício Murta
    Developer & Support Expert
  5. #5
    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
  6. #6
    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.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Apr 11, 2013, 9:31 PM
  2. ComponentColumn usage
    By Zdenek in forum 2.x Help
    Replies: 0
    Last Post: Jul 13, 2012, 9:38 AM
  3. Licence (CMS/CRM usage)
    By pentijum in forum Licensing
    Replies: 1
    Last Post: May 02, 2011, 5:28 AM
  4. Replies: 15
    Last Post: Feb 03, 2011, 1:27 PM
  5. [CLOSED] TreeGrid: usage
    By RomualdAwessou in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: Jun 11, 2010, 1:09 PM

Tags for this Thread

Posting Permissions