ASP.Net and Ext 2.0 JSON objects, Dynamic population

[DragonFist]

I am rather new to javascript and Ext. However, as I look more and more into the new way of declaring layouts, panels and components in Ext2.0 (essentially JSON objects) it is dawning on me that there may be a whole new way to interact with the server-side (webservices and whatnot).

I program mostly in VB and it seems to me that it would be almost trivial to create some basic VB(or C#) classes with the appropriate properties that could then be serialized easily into exactly the JSON needed to create these components and their data. Dynamically populating a page could then be as simple making an AJAX call and retrieving the JSON for the container.

Perhaps, I am missing something. I am only speculating at this time, I haven't tried it. I still have a fair amount to learn about the new API. But it seems to me there could be a fair amount of power in this if my assumptions are correct.

What do you think? Is this a feasible idea or is there some reason this wouldn't work?

Best,

Shawn

[evant]

That's pretty much it. You might want to check out JayRock for .NET http://jayrock.berlios.de/

[DragonFist]

I am somewhat familiar with jrock. What i am looking at here is the possibility of creating a class in ASP.net (VB or C#) of, for example, a grid, column models, stores, etc. having a webmethod that takes a couple parameters and configures the appropriate grid on the server side and passes this back to the page as JSON (whether you use JRock, the ASP.Net Ajax serializer class, AJAX.net Pro or whatever). Perhaps, this could also be used to create server controls with DesignView support in Visual Studio.

Anyhow, not that programming in javascript is difficult or anything but being able to easily design Ext objects in server side languages like VB or C# that serialize directly to usable JSON seems to me to hold a lot of potential for small-footprint pages that load controls on the fly with relatively little effort. That seems pretty good to me and goes a quite a bit beyond simply passing datastore records back and forth.

[evant]

I've written .NET wrappers around some Ext class (toolbar, grid, menu). However, I can't release them because they belong to my employer (also, they are nowhere near in a state to be released).

It wasn't that difficult though.

[DragonFist]

Nice, that's what I'm talking about. I may be creating what I need as I go. I'll post what I learn about it as I go and time permits. I may not be able to post code for similar reasons but I'd think it would be great for the community to gather the ASP.net specific best practices and techniques here on the forums.

[FritFrut]

I am somewhat familiar with jrock. What i am looking at here is the possibility of creating a class in ASP.net (VB or C#) of, for example, a grid, column models, stores, etc. having a webmethod that takes a couple parameters and configures the appropriate grid on the server side and passes this back to the page as JSON (whether you use JRock, the ASP.Net Ajax serializer class, AJAX.net Pro or whatever). Perhaps, this could also be used to create server controls with DesignView support in Visual Studio.

Anyhow, not that programming in javascript is difficult or anything but being able to easily design Ext objects in server side languages like VB or C# that serialize directly to usable JSON seems to me to hold a lot of potential for small-footprint pages that load controls on the fly with relatively little effort. That seems pretty good to me and goes a quite a bit beyond simply passing datastore records back and forth.

You can use 'metachange' event on the Grid (in Ext 1.1, don't know about Ext 2.), send the new grid configuration from the server, and reconfigure grid accordingly. There's an implementation of this idea somewhere on the forum, search for autogrid.

A different way is to use Script# and Ext as described here:
http://extjs.com/forum/showthread.php?t=12901

HTH, Tom

[extjs33]

ASP.Net and Ext 2.0 JSON object are both very strong language of .net package the object in both the language is mostlly same.But still ASP.Net is more demandable language

[mclerte]

it seems to me that it would be almost trivial to create some basic VB(or C#) classes with the appropriate properties that could then be serialized easily into exactly the JSON needed to create these components and their data.


hi Shawn,

Some people (ExtSharp (http://extjs.com/forum/showthread.php?t=12901&highlight=extsharp)) have kind of done it in the past. You might like or not their approach. They cover pretty much the entire library. You should try that :)

I am also doing my "version" of c# wrappers, slowly but surely, in such a way that controls can be created in C# exactly like the asp.net controls.
I will be working closely with vladsch (http://extjs.com/forum/member.php?u=2440) , we might join our forces there.

Cheers

[DragonFist]

Okay, so I had some time to give this a go.

I'm posting the code as proof of concept. It is "working" but needs clean up. The main thing is throw the textfield obj in a webmethod on a webservice with some values gives a json string and doesn't serialize properties with no values.

I might open a thread in examples tomorrow with more code so others can contribute if they wish.


Imports System.Reflection
Namespace UtowareExtJS
<Serializable()> _
Public Class Ext_Form_Field
Inherits Ext_Object

Private prvUtoType As String = Nothing '"Ext_Form_Field"
Public Overrides ReadOnly Property UtoType() As String
Get
Return prvUtoType
End Get
End Property

Private prvUtoID As String = Nothing '
Public Overrides Property UtoID() As String
Get
Return prvUtoID
End Get
Set(ByVal value As String)
prvUtoID = value
End Set
End Property

Private prvxType As String = Nothing '
Public Overrides Property xtype() As String
Get
Return prvxType
End Get
Set(ByVal value As String)
prvxType = value
End Set
End Property

Private prvAllowDomMove As Boolean=nothing '
Public Property allowDomMove() As Boolean
Get
'If prvAllowDomMove = Nothing Then
' prvAllowDomMove = False
'End If
Return prvAllowDomMove
End Get
Set(ByVal value As Boolean)
prvAllowDomMove = value
End Set
End Property

Private prvApplyTo As String = Nothing '
Public Property applyTo() As String
Get
Return prvApplyTo
End Get
Set(ByVal value As String)
prvApplyTo = value
End Set
End Property

Private prvAutoHeight As Boolean = Nothing '
Public Property autoHeight() As Boolean
Get
'If prvAutoHeight = Nothing Then
' prvAutoHeight = False
'End If
Return prvAutoHeight
End Get
Set(ByVal value As Boolean)
prvAutoHeight = value
End Set
End Property

Private prvAutoShow As Boolean = Nothing '
Public Property autoShow() As Boolean
Get
If prvAutoShow = Nothing Then
prvAutoShow = False
End If
Return prvAutoShow
End Get
Set(ByVal value As Boolean)
prvAutoShow = value
End Set
End Property

Private prvAutoWidth As Boolean = Nothing '
Public Property autoWidth() As Boolean
Get
'If prvAutoWidth = Nothing Then
' prvAutoWidth = False
'End If
Return prvAutoWidth
End Get
Set(ByVal value As Boolean)
prvAutoWidth = value
End Set
End Property

Private prvClearCls As String = Nothing '"x-form-clear-left"
Public Property clearCls() As String
Get
Return prvClearCls
End Get
Set(ByVal value As String)
prvClearCls = value
End Set
End Property

Private prvCls As String = Nothing '""
Public Property cls() As String
Get
Return prvCls
End Get
Set(ByVal value As String)
prvCls = value
End Set
End Property

Private prvCtCls As String = Nothing '""
Public Property ctCls() As String
Get
Return prvCtCls
End Get
Set(ByVal value As String)
prvCtCls = value
End Set
End Property

Private prvDisabled As Boolean = Nothing '
Public Property disabled() As Boolean
Get
'If prvDisabled = Nothing Then
' prvDisabled = False
'End If
Return prvDisabled
End Get
Set(ByVal value As Boolean)
prvDisabled = value
End Set
End Property

Private prvDisabledClass As String = Nothing '"x-item-disabled"
Public Property disabledClass() As String
Get
Return prvDisabledClass
End Get
Set(ByVal value As String)
prvDisabledClass = value
End Set
End Property

Private prvFieldClass As String = Nothing '"x-form-field"
Public Overridable Property fieldClass() As String
Get
Return prvFieldClass
End Get
Set(ByVal value As String)
prvFieldClass = value
End Set
End Property

Private prvFieldLabel As String = Nothing '""
Public Property fieldLabel() As String
Get
Return prvFieldLabel
End Get
Set(ByVal value As String)
prvFieldLabel = value
End Set
End Property

Private prvFocusClass As String = Nothing '"x-form-focus"
Public Property focusClass() As String
Get
Return prvFocusClass
End Get
Set(ByVal value As String)
prvFocusClass = value
End Set
End Property

Private prvHeight As String = Nothing '
Public Property height() As String
Get
If IsNothing(prvHeight) Then
Return Nothing
Else
Return "@*" & prvHeight & "*@"
End If
End Get
Set(ByVal value As String)
prvHeight = value
End Set
End Property

Private prvHideLabel As Boolean = Nothing '
Public Property hideLabel() As Boolean
Get
'If prvHideLabel = Nothing Then
' prvHideLabel = False
'End If
Return prvHideLabel
End Get
Set(ByVal value As Boolean)
prvHideLabel = value
End Set
End Property

Private prvHideMode As String = "display"
Public Property hideMode() As String
Get
Return prvHideMode
End Get
Set(ByVal value As String)
prvHideMode = value
End Set
End Property

Private prvHideParent As Boolean = Nothing '
Public Property hideParent() As Boolean
Get
'If prvHideParent = Nothing Then
' prvHideParent = False
'End If
Return prvHideParent
End Get
Set(ByVal value As Boolean)
prvHideParent = value
End Set
End Property

Private prvId As String = Nothing '
Public Property id() As String
Get
Return prvId
End Get
Set(ByVal value As String)
prvId = value
End Set
End Property

Private prvInputType As String = Nothing '"text"
Public Property inputType() As String
Get
Return prvInputType
End Get
Set(ByVal value As String)
prvInputType = value
End Set
End Property

Private prvInvalidClass As String = Nothing '"x-form-invalid"
Public Property invalidClass() As String
Get
Return prvInvalidClass
End Get
Set(ByVal value As String)
prvInvalidClass = value
End Set
End Property

Private prvInvalidText As String = Nothing '"The value in this field is invalid"
Public Property invalidText() As String
Get
Return prvInvalidText
End Get
Set(ByVal value As String)
prvInvalidText = value
End Set
End Property

Private prvItemCls As String = Nothing
Public Property itemCls() As String
Get
Return prvItemCls
End Get
Set(ByVal value As String)
prvItemCls = value
End Set
End Property

Private prvLabelSeparator As String = Nothing
Public Property labelSeparator() As String
Get
Return prvLabelSeparator
End Get
Set(ByVal value As String)
prvLabelSeparator = value
End Set
End Property

Private prvLabelStyle As String = Nothing
Public Property labelStyle() As String
Get
Return prvLabelStyle
End Get
Set(ByVal value As String)
prvLabelStyle = value
End Set
End Property

Private prvMsgFx As String = Nothing
Public Property msgFx() As String
Get
Return prvMsgFx
End Get
Set(ByVal value As String)
prvMsgFx = value
End Set
End Property

Private prvName As String
Public Property name() As String
Get
Return prvName
End Get
Set(ByVal value As String)
prvName = value
End Set
End Property

Private prvPlugins As List(Of Ext_Object)
Public Property plugins() As List(Of Ext_Object)
Get
Return prvPlugins
End Get
Set(ByVal value As List(Of Ext_Object))
prvPlugins = value
End Set
End Property

Private prvReadOnly As Boolean
Public Property [readOnly]() As Boolean
Get
If prvReadOnly = Nothing Then
prvReadOnly = False
End If
Return prvReadOnly
End Get
Set(ByVal value As Boolean)
prvReadOnly = value
End Set
End Property

Private prvRenderTo As String = Nothing
Public Property renderTo() As String
Get
Return prvRenderTo
End Get
Set(ByVal value As String)
prvRenderTo = value
End Set
End Property

Private prvStateEvents As List(Of String)
Public Property stateEvents() As List(Of String)
Get
Return prvStateEvents
End Get
Set(ByVal value As List(Of String))
prvStateEvents = value
End Set
End Property

Private prvStyle As String = Nothing
Public Property style() As String
Get
Return prvStyle
End Get
Set(ByVal value As String)
prvStyle = value
End Set
End Property

Private prvTabIndex As String = Nothing
Public Property tabIndex() As String
Get
If Not IsNothing(prvTabIndex) Then
Return "@*" & prvTabIndex & "*@"
Else
Return Nothing
End If
End Get
Set(ByVal value As String)
prvTabIndex = value
End Set
End Property

Private prvText As String = Nothing
Public Property text() As String
Get
Return prvText
End Get
Set(ByVal value As String)
prvText = value
End Set
End Property

Private prvValidateOnBlur As Boolean = Nothing
Public Property validateOnBlur() As Boolean
Get
'If prvValidateOnBlur = Nothing Then
' prvValidateOnBlur = True
'End If
Return prvValidateOnBlur
End Get
Set(ByVal value As Boolean)
prvValidateOnBlur = value
End Set
End Property

Private prvValidationDelay As Integer = Nothing
Public Property validationDelay() As Integer
Get
Return prvValidationDelay
End Get
Set(ByVal value As Integer)
prvValidationDelay = value
End Set
End Property

Private prvValidationEvent As String = Nothing
Public Property validationEvent() As String
Get
If prvValidationEvent = "false" Then
Return "@*false*@"
Else
Return prvValidationEvent
End If
End Get
Set(ByVal value As String)
prvValidationEvent = value
End Set
End Property

Private prvValue As Object = Nothing
Public Property value() As Object
Get
Return prvValue
End Get
Set(ByVal value As Object)
prvValue = value
End Set
End Property

Private prvWidth As String = Nothing
Public Property width() As String
Get
If Not IsNothing(prvWidth) Then
Return "@*" & prvWidth & "*@"
Else
Return Nothing
End If
End Get
Set(ByVal value As String)
prvWidth = value
End Set
End Property
Public Function SerializeMe() As String
Dim mySerializer As New System.Web.Script.Serialization.JavaScriptSerializer
Dim sb As New StringBuilder
Dim prptydata As Reflection.PropertyInfo
Dim properties As New Dictionary(Of String, Object)
For Each prptydata In GetType(Ext_Form_Field).GetProperties
If Not IsNothing(prptydata.GetValue(Me, Nothing)) Then
properties.Add(prptydata.Name, prptydata.GetValue(Me, Nothing))
End If
Next
mySerializer.Serialize(properties, sb)
Dim json As String = sb.ToString
json = json.Replace("""@*", "")
json = json.Replace("*@""", "")
json = json.Replace("""\/", "new ")
json = json.Replace("\/""", "")
Return json
End Function

End Class
End Namespace


Namespace UtowareExtJS
<Serializable()> _
Public Class Ext_Form_TextField
Inherits Ext_Form_Field

Private prvUtoType As String = "Ext_Form_TextField"
Public Overrides ReadOnly Property UtoType() As String
Get
Return prvUtoType
End Get
End Property

Private prvUtoID As String
Public Overrides Property UtoID() As String
Get
Return prvUtoID
End Get
Set(ByVal value As String)
prvUtoID = value
End Set
End Property

Private prvxType As String = "textfield"
Public Overrides Property xtype() As String
Get
Return prvxType
End Get
Set(ByVal value As String)
prvxType = value
End Set
End Property


Private prvAllowBlank As Boolean
Public Property allowBlank() As Boolean
Get
If prvAllowBlank = Nothing Then
prvAllowBlank = True
End If
Return prvAllowBlank
End Get
Set(ByVal value As Boolean)
prvAllowBlank = value
End Set
End Property

Private prvBlankText As String = "This field is required"
Public Property blankText() As String
Get
Return prvBlankText
End Get
Set(ByVal value As String)
prvBlankText = value
End Set
End Property

Private prvDisableKeyFilter As Boolean
Public Property disableKeyFilter() As Boolean
Get
If prvDisableKeyFilter = Nothing Then
prvDisableKeyFilter = False
End If
Return prvDisableKeyFilter
End Get
Set(ByVal value As Boolean)
prvDisableKeyFilter = value
End Set
End Property

Private prvEmptyClass As String = "x-form-empty-field"
Public Property emptyClass() As String
Get
Return prvEmptyClass
End Get
Set(ByVal value As String)
prvEmptyClass = value
End Set
End Property

Private prvEmptyText As String = Nothing
Public Property emptyText() As String
Get
Return prvEmptyText
End Get
Set(ByVal value As String)
prvEmptyText = value
End Set
End Property

Private prvGrow As Boolean
Public Property grow() As Boolean
Get
If prvGrow = Nothing Then
prvGrow = False
End If
Return prvGrow
End Get
Set(ByVal value As Boolean)
prvGrow = value
End Set
End Property

Private prvGrowMax As Integer = 800
Public Overridable Property growMax() As Integer
Get
Return prvGrowMax
End Get
Set(ByVal value As Integer)
prvGrowMax = value
End Set
End Property

Private prvGrowMin As Integer = 30
Public Overridable Property growMin() As Integer
Get
Return prvGrowMin
End Get
Set(ByVal value As Integer)
prvGrowMin = value
End Set
End Property

Private prvMaskRe As RegularExpressions.Regex
Public Property maskRe() As RegularExpressions.Regex
Get
Return prvMaskRe
End Get
Set(ByVal value As RegularExpressions.Regex)
prvMaskRe = value
End Set
End Property

Private prvMaxLength As Integer = Nothing
Public Property maxLength() As Integer
Get
Return prvMaxLength
End Get
Set(ByVal value As Integer)
prvMaxLength = value
End Set
End Property

Private prvMaxLengthText As String = "The maximum length for this field is {maxLength}"
Public Property maxLengthText() As String
Get
Return prvMaxLengthText
End Get
Set(ByVal value As String)
prvMaxLengthText = value
End Set
End Property

Private prvMinLength As Integer = 0
Public Property minLength() As Integer
Get
Return prvMinLength
End Get
Set(ByVal value As Integer)
prvMinLength = value
End Set
End Property

Private prvMinLengthText As String = "The minimum length for this field is {minLength}"
Public Property minLengthText() As String
Get
Return prvMinLengthText
End Get
Set(ByVal value As String)
prvMinLengthText = value
End Set
End Property

Private prvMsgTarget As String = "qtip"
Public Property msgTarget() As String
Get
Return prvMsgTarget
End Get
Set(ByVal value As String)
prvMsgTarget = value
End Set
End Property

Private prvRegex As RegularExpressions.Regex = Nothing
Public Property regex() As RegularExpressions.Regex
Get
Return prvRegex
End Get
Set(ByVal value As RegularExpressions.Regex)
prvRegex = value
End Set
End Property

Private prvRegexText As String = ""
Public Property regexText() As String
Get
Return prvRegexText
End Get
Set(ByVal value As String)
prvRegexText = value
End Set
End Property

Private prvSelectOnFocus As Boolean
Public Property selectOnFocus() As Boolean
Get
If prvSelectOnFocus = Nothing Then
prvSelectOnFocus = False
End If
Return prvSelectOnFocus
End Get
Set(ByVal value As Boolean)
prvSelectOnFocus = value
End Set
End Property

Private prvValidator As String = ""
Public Property validator() As String
Get
Return "@*" & prvValidator & "*@"
End Get
Set(ByVal value As String)
prvValidator = value
End Set
End Property

Private prvVType As String = Nothing
Public Property vtype() As String
Get
Return prvVType
End Get
Set(ByVal value As String)
prvVType = value
End Set
End Property

Private prvVTypeText As String = ""
Public Property vtypeText() As String
Get
Return prvVTypeText
End Get
Set(ByVal value As String)
prvVTypeText = value
End Set
End Property

End Class
End Namespace


I'm going to bed now as I'm pretty tired but will work on this more tomorrow.

Best,

Shawn

[Animal]

I think we've both hit on this concept.

The whole server-browser communication should be in JSON.

Loading a form should not load



<form>
<table><tr>
<td><label for="foo">Foo Label</label></td><td><input name="foo"></td>
</tr></table>
</form>


It should load



{
xtype: 'form'
items: [{
fieldLabel: "Foo's label",
name: 'foo'
}]
}


Where the downloaded code is actually generated not static.

The requesting function calls this method of Container:



Ext.override(Ext.Container, {
addLoadedComponent: function(url, params) {
Ext.Ajax.request({
url: url,
params: params,
callback: function(response) {
this.add(eval(response));
this.doLayout();
}
});
}
});

[DragonFist]

Yep, that is exactly it and exactly how I am using it.

I haven't done it yet but I don't see why one couldn't through a viewport up there and maybe some layout and have the rest pulled in exactly that manor.

I'm cleaning up what I did at 2am last night and I'll start a thread in examples (I thought about user extentions but this isn't really an extention of ext but a server side use of it.)

I have textfield, numberfield, textarea and treenode(though treenode was done before and I need to add have it added to the inheritance give it a SerializeMe Method, etc.

Best,

Shawn

[mdissel]

It seems that thare many initiatives to create .NET wrappers around the Ext. Shouldn't we join the efforts?

Animal, as part of the support team. Can you discuss .NET support with the other members, for example by creating a special forumgroup in this forum for .NET. Maybe we could use the svn of ExtJs to store the source? and we need projectleader... Who's voluntering?

My wrappers are focusing on server-side creating of the dynamic declaration parts of the Ext objects (like treenodes, etc.). Everything that is static (event implementations,etc) are stored in javascript (for cachingpurposes at the client side).. Most of the Ext objects currently don't fully support this model (like declaring a rootnode with json in the declaration)

Thanks
Marco

[Animal]

I'm not part of development at all. Just a volunteer.

But I agree with your initiative. Server-side creation of fully nested config objects, and the static javascript to be cached as long as possible in the browser.

And yes, TreePanel does need to be able to process a rootNode:{....} object literal as the root node so that is can be fully specified in one object literal.

But, you know you can create objects which take a lot of setting up in one statement using an immediate function call. My form tag handler creates an items Array from some complex things (DataViews, TreePanels, ComboBoxes) which I have to poke around with to get working just so, so each element is returned from a function:



items: [
(function() {
var r = new Ext.tree.TreePanel({....});
r.setRootNode(new Ext.tree.AsyncTreeNode({....});
return r;
})(),
(function() {
var s = new Ext.data.Store({....});
var r = new Ext.form.ComboBox({store:s, ....});
return r;
})()
]

[DragonFist]

actually, in 2.0 the treepanel has {root: {}}. I've successfully used it.

I have no problem collaborating on such a project. I am a VB guy where many others are of the C# camp, which has presents issues. Though not major ones, I think.

Anyhow, I am currently working on a project and am creating what I need for that. I am posting what I create as I go as inspiration mainly (I checked with my boss and he was okay with me doing so).

Later, I'll post what I have. I realized I should have created the boxcomponent first as so much inherits from that, so I am doing that now.

[Animal]

And I'm a Java man, and never the twain shall meet! :))

[Animal]

PS, I'll ensure the docs for TreePanel are correct...

[mdissel]

I'm not part of development at all. Just a volunteer.


Ah ok.. A very active volunteer =D>.. Thanks, can you discuss to create a separate forum group in the Related Projects forum?

Thanks
Marco

[DragonFist]

Well, some minor success so far.

My problem is with child objects like "items" for containers.

serialization isn't serializing an list of objects and child objects that are not arrays fully serialize and don't skip no-value items.

Here's the serializeme code:


Namespace UtowareExtJS
<Serializable()> _
Public Class Ext_Object


Private prvUtoType As String = "Ext_Object"
Public Overridable ReadOnly Property UtoType() As String
Get
Return prvUtoType
End Get
End Property

Private prvUtoID As String = Nothing
Public Overridable Property UtoID() As String
Get
Return prvUtoID
End Get
Set(ByVal value As String)
prvUtoID = value
End Set
End Property

Public Function SerializeMe() As String
Dim mySerializer As New System.Web.Script.Serialization.JavaScriptSerializer
Dim sb As New StringBuilder
Dim prptydata As Reflection.PropertyInfo
sb.Append("{")
For Each prptydata In Me.GetType.GetProperties
If Not IsNothing(prptydata.GetValue(Me, Nothing)) Then
If sb.ToString <> "{" Then
sb.Append(",")
End If

sb.Append(prptydata.Name & ":" & mySerializer.Serialize(prptydata.GetValue(Me, Nothing)))
End If
Next
sb.Append("}")

Dim json As String = sb.ToString
json = json.Replace("""@*", "") 'handle quotes wrapped around strings that are actually functions or some such
json = json.Replace("*@""", "") 'handle quotes wrapped around strings that are actually functions or some such
json = json.Replace("""\/", "new ") 'handle dates
json = json.Replace("\/""", "") 'handle dates
Return json
End Function

End Class
End Namespace

I can see why the serialization of child objects is wrong but need to figure out how to fix it.

[DragonFist]

I got the sub-object thing worked out but not the array/collection yet. Still just getting an empty "[]" set.

Here's what got the sub-objects working:


Namespace UtowareExtJS
<Serializable()> _
Public Class Ext_Object


Private prvUtoType As String = "Ext_Object"
Public Overridable ReadOnly Property UtoType() As String
Get
Return prvUtoType
End Get
End Property

Private prvUtoID As String = Nothing
Public Overridable Property UtoID() As String
Get
Return prvUtoID
End Get
Set(ByVal value As String)
prvUtoID = value
End Set
End Property

Public Function SerializeMe() As String
Dim mySerializer As New System.Web.Script.Serialization.JavaScriptSerializer
Dim sb As New StringBuilder
Dim prptydata As Reflection.PropertyInfo
Dim properties As New Dictionary(Of String, Object)
For Each prptydata In Me.GetType.GetProperties
If Not IsNothing(prptydata.GetValue(Me, Nothing)) Then
If TypeOf (prptydata.GetValue(Me, Nothing)) Is Ext_Object Then
properties.Add(prptydata.Name, prptydata.GetValue(Me, Nothing).ReturnMe)
Else
properties.Add(prptydata.Name, prptydata.GetValue(Me, Nothing))
End If
End If
Next
mySerializer.Serialize(properties, sb)
Dim json As String = sb.ToString
json = json.Replace("""@*", "")
json = json.Replace("*@""", "")
json = json.Replace("""\/", "new ")
json = json.Replace("\/""", "")
Return json
End Function

Public Function ReturnMe() As Dictionary(Of String, Object)
Dim prptydata As Reflection.PropertyInfo
Dim properties As New Dictionary(Of String, Object)
For Each prptydata In Me.GetType.GetProperties
If Not IsNothing(prptydata.GetValue(Me, Nothing)) Then
If TypeOf (prptydata.GetValue(Me, Nothing)) Is IList Then
Dim obj As Object
Dim thisList As New List(Of Object)
For Each obj In CType(prptydata.GetValue(Me, Nothing), List(Of Object))
Dim newObj As Object = CType(obj, Ext_Object).ReturnMe
thisList.Add(newObj)
Next
properties.Add(prptydata.Name, thisList)
ElseIf TypeOf (prptydata.GetValue(Me, Nothing)) Is Ext_Object Then
properties.Add(prptydata.Name, prptydata.GetValue(Me, Nothing).ReturnMe)
Else
properties.Add(prptydata.Name, prptydata.GetValue(Me, Nothing))
End If
End If
Next
Return properties
End Function

End Class
End Namespace

[DragonFist]

Okie-dokie, got it all workin'!

Here's the working base class:


Namespace UtowareExtJS
<Serializable()> _
Public Class Ext_Object


Private prvUtoType As String = "Ext_Object"
Public Overridable ReadOnly Property UtoType() As String
Get
Return prvUtoType
End Get
End Property

Private prvUtoID As String = Nothing
Public Overridable Property UtoID() As String
Get
Return prvUtoID
End Get
Set(ByVal value As String)
prvUtoID = value
End Set
End Property

Public Function SerializeMe() As String
Dim mySerializer As New System.Web.Script.Serialization.JavaScriptSerializer
Dim sb As New StringBuilder
Dim prptydata As Reflection.PropertyInfo
Dim properties As New Dictionary(Of String, Object)
For Each prptydata In Me.GetType.GetProperties
If Not IsNothing(prptydata.GetValue(Me, Nothing)) Then
If TypeOf (prptydata.GetValue(Me, Nothing)) Is IList Then
Dim obj As Object
Dim thisList As New List(Of Object)
For Each obj In prptydata.GetValue(Me, Nothing)
Dim newObj As Object = CType(obj, Ext_Object).ReturnMe
thisList.Add(newObj)
Next
properties.Add(prptydata.Name, thisList)
ElseIf TypeOf (prptydata.GetValue(Me, Nothing)) Is Ext_Object Then
properties.Add(prptydata.Name, prptydata.GetValue(Me, Nothing).ReturnMe)
Else
properties.Add(prptydata.Name, prptydata.GetValue(Me, Nothing))
End If
End If
Next
mySerializer.Serialize(properties, sb)
Dim json As String = sb.ToString
json = json.Replace("""@*", "")
json = json.Replace("*@""", "")
json = json.Replace("""\/", "new ")
json = json.Replace("\/""", "")
Return json
End Function

Public Function ReturnMe() As Dictionary(Of String, Object)
Dim prptydata As Reflection.PropertyInfo
Dim properties As New Dictionary(Of String, Object)
For Each prptydata In Me.GetType.GetProperties
If Not IsNothing(prptydata.GetValue(Me, Nothing)) Then
If TypeOf (prptydata.GetValue(Me, Nothing)) Is IList Then
Dim obj As Object
Dim thisList As New List(Of Object)
For Each obj In prptydata.GetValue(Me, Nothing)
Dim newObj As Object = CType(obj, Ext_Object).ReturnMe
thisList.Add(newObj)
Next
properties.Add(prptydata.Name, thisList)
ElseIf TypeOf (prptydata.GetValue(Me, Nothing)) Is Ext_Object Then
properties.Add(prptydata.Name, prptydata.GetValue(Me, Nothing).ReturnMe)
Else
properties.Add(prptydata.Name, prptydata.GetValue(Me, Nothing))
End If
End If
Next
Return properties
End Function



End Class
End Namespace


An example component:


Namespace UtowareExtJS
<Serializable()> _
Public Class Ext_form_TextField
Inherits Ext_form_Field

Private prvUtoType As String = "Ext_form_TextField"
Public Overrides ReadOnly Property UtoType() As String
Get
Return prvUtoType
End Get
End Property

Private prvUtoID As String = Nothing
Public Overrides Property UtoID() As String
Get
Return prvUtoID
End Get
Set(ByVal value As String)
prvUtoID = value
End Set
End Property

Private prvXType As String = "textfield"
Public Overrides Property xtype() As String
Get
Return prvXType
End Get
Set(ByVal value As String)
prvXType = value
End Set
End Property

Private prvAllowBlank As Object = Nothing
Public Property allowBlank() As Object
Get
Return prvAllowBlank
End Get
Set(ByVal value As Object)
prvAllowBlank = value
End Set
End Property
Private prvBlankText As String = Nothing
Public Property blankText() As String
Get
Return prvBlankText
End Get
Set(ByVal value As String)
prvBlankText = value
End Set
End Property

Private prvDisableKeyFilter As Object = Nothing
Public Property disableKeyFilter() As Object
Get
Return prvDisableKeyFilter
End Get
Set(ByVal value As Object)
prvDisableKeyFilter = value
End Set
End Property

Private prvEmptyClass As String = Nothing
Public Property emptyClass() As String
Get
Return prvEmptyClass
End Get
Set(ByVal value As String)
prvEmptyClass = value
End Set
End Property

Private prvEmptyText As String = Nothing
Public Property emptyText() As String
Get
Return prvEmptyText
End Get
Set(ByVal value As String)
prvEmptyText = value
End Set
End Property

Private prvGrow As Object = Nothing
Public Property grow() As Object
Get
Return prvGrow
End Get
Set(ByVal value As Object)
prvGrow = value
End Set
End Property

Private prvGrowMax As Object = Nothing
Public Overridable Property growMax() As Object
Get
Return prvGrowMax
End Get
Set(ByVal value As Object)
prvGrowMax = value
End Set
End Property

Private prvGrowMin As Object = Nothing
Public Overridable Property growMin() As Object
Get
Return prvGrowMin
End Get
Set(ByVal value As Object)
prvGrowMin = value
End Set
End Property

Private prvMaskRe As RegularExpressions.Regex = Nothing
Public Property maskRe() As RegularExpressions.Regex
Get
Return prvMaskRe
End Get
Set(ByVal value As RegularExpressions.Regex)
prvMaskRe = value
End Set
End Property

Private prvMaxLength As Object = Nothing
Public Property maxLength() As Object
Get
Return prvMaxLength
End Get
Set(ByVal value As Object)
prvMaxLength = value
End Set
End Property

Private prvMaxLengthText As String = Nothing
Public Property maxLengthText() As String
Get
Return prvMaxLengthText
End Get
Set(ByVal value As String)
prvMaxLengthText = value
End Set
End Property

Private prvMinLength As Object = Nothing
Public Property minLength() As Object
Get
Return prvMinLength
End Get
Set(ByVal value As Object)
prvMinLength = value
End Set
End Property

Private prvMinLengthText As String = Nothing
Public Property minLengthText() As String
Get
Return prvMinLengthText
End Get
Set(ByVal value As String)
prvMinLengthText = value
End Set
End Property

Private prvMsgTarget As String = Nothing
Public Property msgTarget() As String
Get
Return prvMsgTarget
End Get
Set(ByVal value As String)
prvMsgTarget = value
End Set
End Property

Private prvRegex As RegularExpressions.Regex = Nothing
Public Property regex() As RegularExpressions.Regex
Get
Return prvRegex
End Get
Set(ByVal value As RegularExpressions.Regex)
prvRegex = value
End Set
End Property

Private prvRegexText As String = Nothing
Public Property regexText() As String
Get
Return prvRegexText
End Get
Set(ByVal value As String)
prvRegexText = value
End Set
End Property

Private prvSelectOnFocus As Object = Nothing
Public Property selectOnFocus() As Object
Get
Return prvSelectOnFocus
End Get
Set(ByVal value As Object)
prvSelectOnFocus = value
End Set
End Property

Private prvValidator As String = Nothing
Public Property validator() As String
Get
If IsNothing(prvValidator) Then
Return Nothing
Else
Return "@*" & prvValidator & "*@"
End If
End Get
Set(ByVal value As String)
prvValidator = value
End Set
End Property

Private prvVType As String = Nothing
Public Property vtype() As String
Get
Return prvVType
End Get
Set(ByVal value As String)
prvVType = value
End Set
End Property

Private prvVTypeText As String = Nothing
Public Property vtypeText() As String
Get
Return prvVTypeText
End Get
Set(ByVal value As String)
prvVTypeText = value
End Set
End Property

End Class
End Namespace


The code used in the webservice method:


Case "Company-View"
Dim frmDefaults As New Ext_Defaults
frmDefaults.autoHeight = True
frmDefaults.bodyStyle = "padding:5px"

Dim txtName As New Ext_form_TextField
txtName.fieldLabel = "Name"
txtName.name = "Name"
txtName.anchor = "96%"
txtName.readOnly = True
txtName.style = "background:#d6d6ff;"
txtName.value = "@*Utoware.OrgStructureTree.getSelectionModel().getSelectedNode().attributes.data.Name*@"

Dim txtCode As New Ext_form_TextField
txtCode.fieldLabel = "Code"
txtCode.name = "Code"
txtCode.anchor = "96%"
txtCode.readOnly = True
txtCode.style = "background:#d6d6ff;"
txtCode.value = "@*Utoware.OrgStructureTree.getSelectionModel().getSelectedNode().attributes.data.Code*@"

Dim txtProduct As New Ext_form_TextArea
txtProduct.fieldLabel = "Product"
txtProduct.name = "Product"
txtProduct.anchor = "96%"
txtProduct.readOnly = True
txtProduct.style = "background:#d6d6ff;"
txtProduct.value = "@*Utoware.OrgStructureTree.getSelectionModel().getSelectedNode().attributes.data.Product*@"

Dim fsCompany As New Ext_form_FieldSet
fsCompany.title = "<span style=\""display:inline-block;margin:0px 0px 0px 0px;width:38px;height:20px;background:url(icons/Co.jpg);background-repeat: no-repeat;\"">&nbsp;</span><span style=\""display:inline-block; margin:0px 0px 4px 0px;\"">Company Details</span>"
fsCompany.autoHeight = True
fsCompany.id = "fsCoCoDetailsViewForm"
fsCompany.bodyStyle = "width: 90%;"
'fsCompany.labelWidth = 60
'fsCompany.labelAlign = "right"
fsCompany.anchor = "92%"
fsCompany.items.Add(txtName)
fsCompany.items.Add(txtCode)
fsCompany.items.Add(txtProduct)

Dim frmCompanyView As New Ext_form_FormPanel
frmCompanyView.bodyStyle = "padding:5px;background-color:#d6d6ff;"
frmCompanyView.id = "frmpnlCompanyView"
frmCompanyView.defaults = frmDefaults
frmCompanyView.layout = "anchor"
frmCompanyView.autoHeight = True
frmCompanyView.labelAlign = "right"
frmCompanyView.labelWidth = 60
frmCompanyView.items.Add(fsCompany)

Return frmCompanyView.SerializeMe

The returned JSON (formatted for readability):


{
"UtoType" : "Ext_form_FormPanel",
"xtype" : "form",
"labelAlign" : "right",
"labelWidth" : 60,
"bodyStyle" : "padding:5px;background-color:#d6d6ff;",
"defaults" : {
"UtoType" : "Ext_Defaults",
"readOnly" : false,
"maxValue" : 0,
"minValue" : 0,
"autoHeight" : true,
"bodyStyle" : "padding:5px"
},
"items" : [{
"UtoType" : "Ext_form_FieldSet",
"xtype" : "fieldset",
"bodyStyle" : "width: 90%;",
"title" : "\u003cspan style=\\\"display:inline-block;margin:0px 0px 0px 0px;width:38px;height:20px;background:url(icons/Co.jpg);background-repeat: no-repeat;\\\"\u003e&nbsp;\u003c/span\u003e\u003cspan style=\\\"display:inline-block; margin:0px 0px 4px 0px;\\\"\u003eCompany Details\u003c/span\u003e",
"items" : [
{
"UtoType" : "Ext_form_TextField",
"xtype" : "textfield",
"fieldLabel" : "Name",
"name" : "Name",
"readOnly" : true,
"value" : Utoware.OrgStructureTree.getSelectionModel()
.getSelectedNode().attributes.data.Name,
"anchor" : "96%",
"style" : "background:#d6d6ff;"
},
{
"UtoType" : "Ext_form_TextField",
"xtype" : "textfield",
"fieldLabel" : "Code",
"name" : "Code",
"readOnly" : true,
"value" : Utoware.OrgStructureTree.getSelectionModel()
.getSelectedNode().attributes.data.Code,
"anchor" : "96%",
"style" : "background:#d6d6ff;"
},
{
"UtoType" : "Ext_form_TextArea",
"xtype" : "textarea",
"fieldLabel" : "Product",
"name" : "Product",
"readOnly" : true,
"value" : Utoware.OrgStructureTree.getSelectionModel()
.getSelectedNode().attributes.data.Product,
"anchor" : "96%",
"style" : "background:#d6d6ff;"
}],
"autoHeight" : true,
"anchor" : "92%",
"id" : "fsCoCoDetailsViewForm"
}],
"layout" : "anchor",
"autoHeight" : true,
"id" : "frmpnlCompanyView"
}

And a screenie of the form is attached. Nothing pretty, just proof the concept works.

[Animal]

Nice work. But the server-side code is very similar to the javascript. It's a mirror image which is just translated into a javascript object literal.

Does ASP have the concept of custom tags?

Because page authors have become use to a declarative way of programming a page.

So for the above you would have (assuming a namespace of "ext")



<ext:form labelalign="right" labelwidth="60" ...etc
<ext:fieldset title="....
<ext:textfield...


etc.

That way, each object that represnts an Ext object is actually nested in its correct place. Certainly in JSP, a tag handling object that represents one of these tags can traverse its parentNode axis, and find out exactly where it is, who its ancestors are and what their settings are to make intelligent decisions about what kind of code to generate for their own config objects.

[mdissel]

But I agree with your initiative. Server-side creation of fully nested config objects, and the static javascript to be cached as long as possible in the browser.


My problem with deep nested objects is that i also want to add some functions to specific events... but json doesn't allow functions to be rendered.

How are you handling this?

Thanks
Marco

[DragonFist]

@Animal

Yes, ASP.net supports custom tags on the server pages. Eventually, I would what to create a more declarative approach.

Right now, I just need the json being generated somewhat dynamically.

Edit: A little clarification, there are projects that are creating server page controls for Ext. I needed to something that provide pure json from webmethods for XHRs. This is for that. One could just write the javascript on the page, but then you'd have to write it for each component and load it on documentReady. It isn't dynamic and adds to page load time. Here I can create forms, grids, etc. on the server based on params passed and return the json when it is needed. Plus I get dotnotation completion in VB. Down the road, some interface like tof's formbuilder could be written to give visual tools for creating this code and server page controls could be created to wrap the classes.

But if you just have a webservice and want to pass config objects down from it, this kind of thing is all that is needed.

@mdissel

I am placing functions in strings and wrapping the strings with a know set of characters "@*
and *@"

Then after the serialization, I do a find replace which removes the any quotes where I have placed these characters making it a literal.

[Animal]

My problem with deep nested objects is that i also want to add some functions to specific events... but json doesn't allow functions to be rendered.

How are you handling this?

Thanks
Marco

It does. The listeners config:



{
xtype: 'grid',
listeners: {
render: function() {
// fix things up on render
}.
selectionchange: function() {
// handle selection change
},
scope: this
}
}

[DragonFist]

I thought he was referring to the transfer of the functions via json (the json standard doesn't support literals via json and MS decided to go with the standard on this one, go figure) so you get

"function(){}"

instead of

function(){}

For the record, my current solution to this, posted above, doesn't work if the function has internal quotes. The "\"'s don't get escaped.

Right now I am keeping them simple or I give call named functions from the client-side

"@*myFunction()*@"

[DragonFist]

Later news on that, I handled got a few complex, internally quoted functions to pass and work. Involved extra escape characters and string.replace to remove two escape characters in a row.

[Animal]

Are you sure you can't use the code from json.org?

I don't have any hassle with escaping characters for javascript since I started stuffing everything in a JSONObject rather then building up a StringBuffer.

[DragonFist]

I don't know, I'll have to test it. Since I now have enough to work with and have a show this coming weekend that needs to have several parts of it done, I won't likely be able to give that a real go till then.

[extsharp]

You can visit www.extsharp.cn

this site can provide some extsharp code and lessons for you

if your Chinese is well :>