How do I get started with ExtJS and WebSharper?

Question

I'm struggling to use ExtJs with WebSharper. I'd like to run the code sample (pasted at end) here as a starting point: https://try.websharper.com/snippet/0000XW

I used the Nuget package WebSharper.ExtJs 2.4.48.145 in VS 2019 in a Suave F# project. The project worked fine for a simple 'hello world' web page; now I want to continue my learning journey with some third party UI widgets.

I had a hell of a time getting the ExtJs packages from Sencha. Eventually I downloaded everything in 'community' from sencha.myget.org as a zip, created a package.json in my project, and used npm to install ext-all, ext-core, ext-font-awesome, ext-font-ext, ext-modern-theme-base, and ext-modern-theme-neptune one at a time

From the code snippet linked: The line open WebSharper.ExtJS fails: the namespace 'ExtJS' is not defined. However IntelliFactory.WebSharper.ExtJs does exist. But this doesn't seem to do the job.

The lines [)>] and similar fail with ExtAll is not defined in IntelliFactory.WebSharper.ExtJs.Resources

The line let store=ExtCfg.data.JsonStore(... fails with ExtCfg not defined.

Clearly something is badly wrong here. Is there a detailed, specific, step-by-step guide to working with ExtJs, a fully functioning demo project I can download, or can someone help me? I couldn't find any source for the ExtJs extension on the WebSharper github either.

Many thanks

packages.config

package.json

{
  "name": "Suave1",
  "version": "0.0.0",
  "description": "Suave1",
  "main": "main.fs",
  "author": {
    "name": ""
  },
  "dependencies": {
    "@sencha/ext-all": "file:C:/Users/Paul/Downloads/community-637654232954560680/npm/node_modules/@sencha/ext-all-7.0.0.tgz",
    "@sencha/ext-core": "file:C:/Users/Paul/Downloads/community-637654232954560680/npm/node_modules/@sencha/ext-core-7.0.0.tgz",
    "@sencha/ext-font-awesome": "file:C:/Users/Paul/Downloads/community-637654232954560680/npm/node_modules/@sencha/ext-font-awesome-7.0.0.tgz",
    "@sencha/ext-font-ext": "file:C:/Users/Paul/Downloads/community-637654232954560680/npm/node_modules/@sencha/ext-font-ext-7.0.0.tgz",
    "@sencha/ext-modern-theme-base": "file:C:/Users/Paul/Downloads/community-637654232954560680/npm/node_modules/@sencha/ext-modern-theme-base-7.0.0.tgz",
    "@sencha/ext-modern-theme-neptune": "file:C:/Users/Paul/Downloads/community-637654232954560680/npm/node_modules/@sencha/ext-modern-theme-neptune-7.0.0.tgz"
  }
}

namespace Samples

open WebSharper
open WebSharper.JavaScript
open WebSharper.ExtJS
open WebSharper.UI.Html
open WebSharper.UI.Client

[]
module ExtJSSample =
    type DataRow =
        {
            name  : string
            data1 : int
            data2 : int
            data3 : int
        }

    [)>]
    [)>]
    [)>]
    let ChartDemo() =
        let generateData() =
            let rand() = max (Math.Random() * 100. |> int) 20
            [|
                for i in 0 .. 7 ->
                {
                    name  = Ext.Date.MonthNames.[i]
                    data1 = rand()
                    data2 = rand()
                    data3 = rand()
                }
            |]


        let store =
            ExtCfg.data.JsonStore(
                Fields = [| "name"; "data1"; "data2"; "data3" |],
                Data = generateData()
            ).Create()

        let chart =
            ExtCfg.chart.Chart(
                Style = "background =#fff",
                Animate = true,
                Store = store,
                Shadow = Union1Of2 true,
                Theme = "Category1",
                Legend = ExtCfg.chart.Legend(Position = "right"),


                Axes =
                    [|
                        ExtCfg.chart.axis.Numeric(
                            Minimum = 0,
                            Position = "left",
                            Fields = [| "data1"; "data2"; "data3" |],
                            Title = "Number of Hits",
                            MinorTickSteps = 1,
                            Grid =
                                New [
                                    "odd", box <| ExtCfg.draw.Sprite(
                                        Opacity = 1,
                                        Fill = "#ddd",
                                        Stroke = "#bbb",
                                        Stroke_width = As 0.5
                                    )
                                ]
                        ) |> As
                        ExtCfg.chart.axis.Category(
                            Position = "bottom",
                            Fields = [| "name" |],
                            Title = "Month of the Year"
                        ) |> As
                    |],
                Series =
                    [|
                        ExtCfg.chart.series.Line(
                            Highlight = ExtCfg.draw.Sprite(Radius = 7),
                            Axis = Union1Of2 "left",
                            XField = "name",
                            YField = Union1Of2 "data1",
                            MarkerConfig = ExtCfg.draw.Sprite(
                                Type = "cross",
                                Radius = 4,
                                Stroke_width = 0
                            )
                        ) |> As
                        ExtCfg.chart.series.Line(
                            Highlight = ExtCfg.draw.Sprite(Radius = 7),
                            Axis = Union1Of2 "left",
                            Smooth = Union1Of2 true,
                            XField = "name",
                            YField = Union1Of2 "data2",
                            MarkerConfig = ExtCfg.draw.Sprite(
                                Type = "circle",
                                Radius = 4,
                                Stroke_width = 0
                            )
                        ) |> As
                        ExtCfg.chart.series.Line(
                            Highlight = ExtCfg.draw.Sprite(Radius = 7),
                            Axis = Union1Of2 "left",
                            Smooth = Union1Of2 true,
                            Fill = true,
                            XField = "name",
                            YField = Union1Of2 "data3",
                            MarkerConfig = ExtCfg.draw.Sprite(
                                Type = "circle",
                                Radius = 4,
                                Stroke_width = 0
                            )
                        ) |> As
                    |]
            ).Create()

        ExtCfg.window.Window(
            Width = 800,
            Height = 600,
            MinHeight = 400,
            MinWidth = 550,
            Hidden = false,
            Maximizable = true,
            Title = "Line Chart",
            RenderTo = Union1Of2 (Ext.GetBody()),
            Layout = "fit",
            Tbar =
                [|
                    ExtCfg.button.Button(
                        Text = "Save Chart",
                        Handler = As (fun () ->
                            Ext.MessageBox.Confirm(
                                "Confirm Download",
                                "Would you like to download the chart as an image?",
                                As (function
                                    | "yes" -> chart.Save(New [ "type", box "image/png" ]) |> ignore
                                    | _ -> ())
                            )
                        )
                    )
                    ExtCfg.button.Button(
                        Text = "Reload Data",
                        Handler = As (fun () -> generateData() |> As |> store.LoadData)
                    )
                |],
            Items = chart
        ).Create() |> ignore

    div [
        on.afterRender (fun el ->
            Ext.OnReady(As ChartDemo, null, null)
        )
    ] []
    |> Doc.RunById "main"

How do I get started with ExtJS and WebSharper?

Answers (1)

Related Questions