Create awesome user interfaces in Sencha Architect and use them in your WebSharper applications in a type-safe and robust manner. True WYSIWYG for your web and mobile applications, while keeping ALL of your application logic in F#.
(Note: separate licensing for Sencha Tools is required. Please consult the Sencha website for more details.)
Create a WebSharper Sitelet Website project.
Main.fs, remove the
About action, page and sitelet definition.
Site.HomePage inserted content with only
Div [new Controls.EntryPoint()].
Create new Ext JS project in Sencha Architect, set an
appFolder value, save and publish it to your website project folder.
Add a script reference to your
app.js in the
Main.html template after the WebSharper scripts placeholder
WebSharper.ExtJS NuGet package (requires a WebSharper license).
Client.fs, add these attributes on the
Client module to tell WebSharper to automatically include the basic Ext JS CSS files:
1 2 3 4 5
open WebSharper.ExtJS [<Require(typeof<Resources.ExtAll>)>] [<Require(typeof<Resources.ExtThemeNeptune>)>] [<Require(typeof<Resources.ExtAllNeptuneCss>)>]
Client module, replace the
Main function's body with the following code, where
InitMainView, a function to be added
Main, will contain your UI logic.
1 2 3
Div  |>! OnAfterRender (fun el -> Ext.OnReady(As InitMainView, null, null) )
InitMainView, you can now access components in your UI design, set event handlers, or add other application logic using
raw, string-based accessors:
1 2 3
let view = Ext.GetCmp("MainView") :?> Ext.container.Viewport let form = view.GetComponent("form") :?> Ext.form.Panel ...
However, working with these string accessors is a hassle and also very error-prone.
Instead, you can access components from your Sencha Architect project in a robust way using the type provider from WebSharper Extensions for Sencha Architect:
WebSharper.SenchaArchitect NuGet package into your WebSharper project.
Add the line
type App = SenchaArchitect.App<"/app.js"> where you specify a correct relative or absoute path
to your Sencha Architect output
app.js file. (be sure to have opened the
WebSharper namespace beforehand.)
This brings all your components from your Sencha Architect UI project into F# scope. You can now do:
let view = App.View.MainView ...
idconfig set as static properties on their respective
itemIdconfig set as instance properties on the wrapper object of the parent component. Items can be in the
menuof a split button or the
toolsconfig of a panel.
Ext.form.Panelwrappers have helper functions for getting and setting their named field values. A
FieldValuesnested type is provided for this.
selfproperty to get the
Exttype for the component. Another option is to pass the
Inherit = trueargument to the type provider. In this case the wrapper objects inherit their framework type.
storeIdas static properties on the
RawModelare creating raw models (plain JS objects), while
Modelcontains wrappers around the
Ext.data.Modelobjects with typed getters/setters for the fields of the model object. Convert between them with the
If you want to create a sitelet-based website with different Ext JS viewports loaded on the pages, use the
"Unmark as Initial View" option in Sencha Architect.
app.js does not create a view automatically.
You can create a full screen view by passing the element you are inserting with a
Web.Control class as
RenderTo config to the constructor of the wrapper type of the view.
1 2 3 4 5 6 7 8
let MainView renderTo = let view = App.View.MainView(ExtCfg.container.Viewport(RenderTo = renderTo)) // ... let Main () = Div  |>! OnAfterRender (fun el -> Ext.OnReady(()fun () -> MainView el.Body), null, null) )