【发布时间】：2021-08-24 23:07:52
【问题描述】：
我正在努力将 ExtJs 与 WebSharper 一起使用。我想在这里运行代码示例（粘贴在末尾）作为起点： https://try.websharper.com/snippet/0000XW
我在一个 Suave F# 项目中使用了 VS 2019 中的 Nuget 包 WebSharper.ExtJs 2.4.48.145。该项目适用于一个简单的“hello world”网页；现在我想使用一些第三方 UI 小部件继续我的学习之旅。
我从 Sencha 那里得到了 ExtJs 包，真是太棒了。最终，我从 sencha.myget.org 以 zip 格式下载了“社区”中的所有内容，在我的项目中创建了一个 package.json，并使用 npm 安装了 ext-all、ext-core、ext-font-awesome、ext-font- ext、ext-modern-theme-base 和 ext-modern-theme-neptune 一次一个
从代码 sn-p 链接：
open WebSharper.ExtJS 行失败：未定义命名空间“ExtJS”。但是 IntelliFactory.WebSharper.ExtJs 确实存在。但这似乎不起作用。
在 IntelliFactory.WebSharper.ExtJs.Resources 中未定义 ExtAll 行 [<Require(typeof<Resources.ExtAll>)>] 和类似的失败
let store=ExtCfg.data.JsonStore(... 行失败，未定义 ExtCfg。
很明显这里出了点大问题。是否有使用 ExtJs 的详细、具体、分步指南，我可以下载一个功能齐全的演示项目，或者有人可以帮助我吗？ 我在 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"
【问题讨论】：
标签： extjs websharper