ExtJs GripPanel simple example?

[Eduard Sergeev]

Hi there,

Could anyone please post a simple working example of ExtJs PanelGrid
in WebSharper 2.2? I am probably missing something obvious, but all my
attempts to make it work failed: With Ext.data.JsonReaderT + 'Url' to
JSON service the grid remains empty (though the service is receiving
the calll) and with ArrayStore it's even worse: "Uncaught TypeError:
Cannot read property 'prototype' of undefined (in
Ext.data.ArrayReader.Ext.extend.readRecords). I am just not sure how
to translate, for example the following JS code to F#:

var reader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
]);


Thanks!
Eduard

[Joel Björnson]

Hi,
some of the dynamic features of ExtJS is a bit tricky to map to F#. In
your example records of arbitrary structure can be used why we do not
have any corresponding F# type (except obj).

In these situations you may invent your own type. For example:

type NameRec[<JavaScript>]() =

[<DefaultValue>]
[<Name>]
val mutable Name : string

[<DefaultValue>]
[<Name>]
val mutable Type : string

and then create an ArrayStore as:

Ext.data.ArrayStore (
Ext.data.ArrayStoreConfiguration (
Fields = [|
NameRec(Name = "company")
NameRec(Name = "price", Type = "float")
|]
)
)

Having to introduce a lot of these types may be inconvenient however.
There are a few possible ways to mimic the ability to create objects
with arbitrary fields. For example by defining a couple of helpers:

[<JavaScript>]
let (:=) x y : (string * obj) = (x, y)

[<Inline "void($r[$k]=$v)">]
let Set (r: obj) (k: string) (v: obj) : unit = ()

[<JavaScript>]
let (!) (fields: seq<(string * obj)>) =
let r = obj ()
for (k,v) in fields do
Set r k v
r
you can write the example as:

Ext.data.ArrayStore (
Ext.data.ArrayStoreConfiguration (
Fields = [|
NameRec(Name = "company")
NameRec(Name = "price", Type = "float")
|]
)
)

without defining any additional types.

I tested these examples for our ExtJs 4 binding (commnig soon) so not
sure it is compatible with the ExtJs 3 API.

Cheers,
Joel

[Anton Tayanovskyy]

Hi,

I think Joel meant:

>    Ext.data.ArrayStore (
>        Ext.data.ArrayStoreConfiguration (
>            Fields = [|

>                !["name" := "company"]
>                !["name" := "price"; "type" := "float"]
>            |]
>        )
>    )

Trying to provide static types for Ext JS interfaces is a continuing
battle we seem to be losing. They don't seem to make it easy.

Fortunately if you can write something in JS, you can always have it
in WebSharper too, if you sacrifice some type safety.

Thanks,

Anton

--
Kind Regards,
Anton Tayanovskyy

WebSharper™ - type-safe JavaScript in F#
http://intellifactory.com

[Joel Björnson]

On Fri, Jun 10, 2011 at 4:47 PM, Anton Tayanovskyy
<anton.ta...@gmail.com> wrote:
> Hi,
>
> I think Joel meant:
>
>>    Ext.data.ArrayStore (
>>        Ext.data.ArrayStoreConfiguration (
>>            Fields = [|
>>                !["name" := "company"]
>>                !["name" := "price"; "type" := "float"]
>>            |]
>>        )
>>    )
>

Correct, thanks for spotting my copy-paste error :)

Joel

[Eduard Sergeev]

Thanks everyone for your help!

> I tested these examples for our ExtJs 4 binding (commnig soon) so not
> sure it is compatible with the ExtJs 3 API.

Hm, this is all cool, but the problem here is that the current ExtJs 3
doesn't have Fields property in ArrayStore. And the following code of
mine leads to that "Cannot read property 'prototype' of undefined"
error in runtime:

let store =
Ext.data.ArrayStore(
Ext.data.ArrayStoreConfiguration(
Data = [|
{ Id = "1" ; Name = "A" }
{ Id = "2" ; Name = "B"} |],
Reader =
Ext.data.ArrayReader(
Ext.data.ArrayReaderConfiguration(
Fields = [|
!["name" := "Id"]
!["name" := "Name"; "type" := "string"] |]
)
)
)
)

Note: this is just a part of the whole grid definition, but the
problem lays in it - if you remove "Data" part the error disappear.

So the main question is still: Could someone post a simple working
example of DataGrid in WebSharper binding to ExtJs 3.2.1? Or should I
wait for ExtJs 4.0 binding?

Thanks!
Eduard

[Joel Björnson]

Hi again,
below is a working grid panel sample. I switched to use JsonStore
since you are using record values to represent data points. The
'fields' configuration option is missing from the ExtJs API (and our
binding), why I created an enhanced StoreConfiguration.

type Data =
{
Id : string
Name : string
}

// Extend JsonStore, since missing fields configuration.
type StoreConfig[<JavaScript>]() =
inherit ExtJs.Ext.data.JsonStoreConfiguration()
[<DefaultValue>]
[<Name "fields">]
val mutable Fields : obj []

[<JavaScript>]
let GridSample () =
let store =
Ext.data.JsonStore(
StoreConfig(

Data = [|
{ Id = "1" ; Name = "A" }
{ Id = "2" ; Name = "B"}

{ Id = "3" ; Name = "C"}
{ Id = "4" ; Name = "D"}
{ Id = "5" ; Name = "E"}
|],

Fields = [|
!["name" := "Id"]
!["name" := "Name"; "type" := "string"]
|]
)
)

Ext.grid.GridPanel (
Ext.grid.GridPanelConfiguration (
Store = store,
ColModel =
Ext.grid.ColumnModel (
Ext.grid.ColumnModelConfiguration (
Columns = [|
// Column 1
Ext.grid.ColumnConfiguration (
Header = "Id",
Sortable = true,
DataIndex = "Id"
)
// Column 2
Ext.grid.ColumnConfiguration (
Header = "Id",
Sortable = true,
DataIndex = "Name"
)
|]
)
),

Sm =
Ext.grid.RowSelectionModel (
Ext.grid.RowSelectionModelConfiguration(
SingleSelect = true
)
),
Height = 200.,
Width = 200.
)
)

Cheers,
Joel