How do I get started with ExtJS and WebSharper? - extjs

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 [<Require(typeof<Resources.ExtAll>)>] 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
<?xml version="1.0" encoding="utf-8"?>
<packages>
<package id="FSharp.Control.Reactive" version="5.0.2" targetFramework="net472" />
<package id="FSharp.Core" version="4.7.2" targetFramework="net472" />
<package id="Microsoft.Owin" version="4.2.0" targetFramework="net472" />
<package id="Owin" version="1.0" targetFramework="net472" />
<package id="Suave" version="2.5.6" targetFramework="net472" />
<package id="System.Reactive" version="5.0.0" targetFramework="net472" />
<package id="System.Runtime.CompilerServices.Unsafe" version="4.5.3" targetFramework="net472" />
<package id="System.Threading.Tasks.Extensions" version="4.5.4" targetFramework="net472" />
<package id="System.ValueTuple" version="4.4.0" targetFramework="net472" />
<package id="WebSharper" version="4.7.3.446" targetFramework="net472" />
<package id="WebSharper.Core" version="4.7.3.446" targetFramework="net472" />
<package id="WebSharper.ExtJs" version="2.4.48.145" targetFramework="net472" />
<package id="WebSharper.FSharp" version="4.7.3.446" targetFramework="net472" />
<package id="WebSharper.Owin" version="4.7.2.219" targetFramework="net472" />
<package id="WebSharper.Suave" version="4.7.1.280" targetFramework="net472" />
<package id="WebSharper.UI" version="4.7.2.243" targetFramework="net472" />
</packages>
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
[<JavaScript>]
module ExtJSSample =
type DataRow =
{
name : string
data1 : int
data2 : int
data3 : int
}
[<Require(typeof<Resources.ExtAll>)>]
[<Require(typeof<Resources.ExtThemeNeptune>)>]
[<Require(typeof<Resources.ExtAllNeptuneCss>)>]
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<obj[]> |> store.LoadData)
)
|],
Items = chart
).Create() |> ignore
div [
on.afterRender (fun el ->
Ext.OnReady(As ChartDemo, null, null)
)
] []
|> Doc.RunById "main"

Answer 1

The short answer is that the WebSharper.ExtJs NuGet package is not compatible with the latest WebSharper. See more at https://forums.websharper.com/topic/91000