如何开始使用ExtJS和WebSharper？

Question

我很难在WebSharper中使用ExtJ。我想在这里运行代码示例(粘贴在末尾)，作为起点：https://try.websharper.com/snippet/0000XW

我在Suave F#项目中使用了VS 2019年的Nuget包F# 2.4.48.145。这个项目在一个简单的'hello world‘网页上运行得很好；现在我想用一些第三方UI小部件继续我的学习之旅。

我从Sencha那里得到了ExtJ的包裹。最后，我从sencha.myget.org下载了社区中的所有东西，并在我的项目中创建了一个package.json，并使用npm一次安装ext-all、ext-core、ext- time、ext-time ext、ext-现代-主题-base和ext-现代-主题-package.json。

从链接的代码片段:行open WebSharper.ExtJS失败:名称空间'ExtJS‘未定义。然而，IntelliFactory.WebSharper.ExtJs确实存在。但这似乎不起作用。

[<Require(typeof<Resources.ExtAll>)>]和类似的ExtAll失败行没有在IntelliFactory.WebSharper.ExtJs.Resources中定义

行let store=ExtCfg.data.JsonStore(...失败，而ExtCfg未定义。

很明显这里有严重的问题。是否有一个详细的，具体的，一步一步的指南来使用ExtJ，一个功能齐全的演示项目，我可以下载，或者有人可以帮助我？我在WebSharper github上也找不到ExtJs扩展的任何源。

非常感谢

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

简单的回答是，WebSharper.ExtJs NuGet包与最新的WebSharper不兼容。参见https://forums.websharper.com/topic/91000的更多信息