[Update v0.02]ASP.Net Classes for returning Ext 2.0 Config objects as JSON

Published by: jack 2008-11-26

A couple of weeks ago, I had the idea that with Ext 2.0's ablility to create components solely from config objects, one could create server-side classes to return these config objects and populate a page that way without html and mostly without "var this = new that; theOtherOne.add(this)"

PenisAdvantage.com.::
Natural Enlargement Guide Paying Upto $59.35 Per Sale - Now 75%.
http://welcomewlc.PENISADV.hop.clickbank.netHOME

I posted about it here (http://extjs.com/forum/showthread.php?t=15669).

Well, I spent some time and I create ASP.net classes that do this and recusively serialize themselves. So, now, on the server, you say "Dim form as new Ext_form_Form" and then go "form.title = "My Title" with intellisense and all that. Maybe "form.title = thisRecord.title". and finally, "return form.SerializeMe". Bam, dynamic forms.

I am attaching a .zip with the visual studio 2005 project so you can take a look at it, maybe contribute to the classes, since I am nowhere near close to having all of Ext in there.

I'm also going to quote my last post in the above thead so you have the examples I posted there.

Best,

Shawn "DragonFist" Smith

This .zip wound up being to large for the message board settings, so here it is:

ExtJS 2.0 ASP.Net Classes! Ver. 0.02 (http://www.mqual.com/extjsobjects.zip)

Update: Working on my current project required more classes and some updates to the serialization.

Passing functions are better supported.

This VB:

Registry Cleaner And Optimizer.::
Best Converting Most Popular Registry Repair Cleaner On CB Since 2003!. We Offer Full Tracking Code Support As Well As Huge Bonuses! Contact Us! Registryfix.com/affiliate.
http://welcomewlc.REGFIX.hop.clickbank.netHOME

Get More Buyers :: $381,195.06 In 90 DaysWith No Product!::
Stuff Your List Full Of Buyers And Start Seeing Five And Six Figures! Earn 60% On Front End And Upsell ($80-90 Average Payout) - Affiliate Tools Here: Http://www.getmorebuyers.com/affiliate.html.
http://welcomewlc.GETBUYERS.hop.clickbank.netHOME

Dim btnSave As New Ext_Button
btnSave.id = "StructSettingsMain_frmCompanyEdit_btnSave"
btnSave.text = "Save"
btnSave.tooltip = "Save your changes to the company details."
btnSave.icon = "icons/silk/page_save.png"
btnSave.cls = "x-btn-text-icon"
btnSave.handler = "@*function(C,B){var E=function(G,H){var I=Ext.util.JSON.decode(G.responseText);if(I.Messag e){Ext.MessageBox.alert(""Success Message"",""

""+I.Message+""

"")}Utoware.OrgStructureTree.getSelectionModel().get SelectedNode().setText(I.NewNode.text);Utoware.Org StructureTree.getSelectionModel().getSelectedNode( ).attributes.data = I.NewNode.data;Utoware.OrgStructureTree.TreeNodeSe lected(Utoware.OrgStructureTree.getSelectionModel( ),Utoware.OrgStructureTree.getSelectionModel().get SelectedNode());};var F=function(G,H){var I=Ext.util.JSON.decode(G.responseText);if(I.Messag e){Ext.MessageBox.alert(""Failure Message"",""

""+I.Message+""

"")}};var A=Ext.util.JSON.encode(Utoware.OrgStructureTree.ge tSelectionModel().getSelectedNode().attributes.dat a);var D=Ext.util.JSON.encode(Ext.getCmp(""frmCompanyEdit"").getForm().getValues());Ext.Ajax.request({method: ""POST"",url:""WebServices/CompanyStructureTree.asmx/UpdateCompany"",success:E,failure:F,params:Ext.util.JSON.encode({ OrigCompany:A,NewCompany:D})})}*@"

will serialize to:

{
"UtoType" : "Ext_Button",
"xtype" : "button",
"handler" : function(C, B) {
var E = function(G, H) {
var I = Ext.util.JSON.decode(G.responseText);
if (I.Message) {
Ext.MessageBox.alert("Success Message",
"

"
+ I.Message + "

")
}
Utoware.OrgStructureTree.getSelectionModel()
.getSelectedNode().setText(I.NewNode.text);
Utoware.OrgStructureTree.getSelectionModel()
.getSelectedNode().attributes.data = I.NewNode.data;
Utoware.OrgStructureTree.TreeNodeSelected(
Utoware.OrgStructureTree.getSelectionModel(),
Utoware.OrgStructureTree.getSelectionModel()
.getSelectedNode());
};
var F = function(G, H) {
var I = Ext.util.JSON.decode(G.responseText);
if (I.Message) {
Ext.MessageBox.alert("Failure Message",
"

"
+ I.Message + "

")
}
};
var A = Ext.util.JSON
.encode(Utoware.OrgStructureTree
.getSelectionModel().getSelectedNode().attributes. data);
var D = Ext.util.JSON.encode(Ext.getCmp("frmCompanyEdit")
.getForm().getValues());
Ext.Ajax
.request( {
method : "POST",
url : "WebServices/CompanyStructureTree.asmx/UpdateCompany",
success : E,
failure : F,
params : Ext.util.JSON.encode( {
OrigCompany : A,
NewCompany : D
})
})
},
"icon" : "icons/silk/page_save.png",
"text" : "Save",
"tooltip" : "Save your changes to the company details.",
"cls" : "x-btn-text-icon",
"id" : "StructSettingsMain_frmCompanyEdit_btnSave"
}

Okie-dokie, got it all workin'!

Here's the working base class:

Namespace UtowareExtJS
_
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.JavaScriptSerializ er
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))

Chopper-Tattoo - Top Tattoo Offer !::
The #1 Tattoo Gallery On The Web. Converting Like Crazy! Pays 75%, Affiliates Must See. Free Music Downloads With Membership Allows Creative Marketing. New Affiliate Tracking In Email, Exit Ad, & Google Upon Request: Chopper-tattoo.com/affiliates/.
http://welcomewlc.CHOPPERTAT.hop.clickbank.netHOME

Convert Your Car Using Gas4Free Water-Fuel Conversion System.::
Attention: New Diy Water Car Is Selling Like Crazy! Raising Prices Has Created Huge Demand! Few Refunds. Promote It Now Before It Becomes Competitive! Some Affiliates Are Converting At 15% And You Receive An Amazing $70.00+ Per Sale!
http://welcomewlc.CKGAS4FREE.hop.clickbank.netHOME

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
_
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().get SelectedNode().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().get SelectedNode().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().get SelectedNode().attributes.data.Product*@"

Dim fsCompany As New Ext_form_FieldSet
fsCompany.title = " Company Details"
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 u003c/spanu003eu003cspan style=\"display:inline-block; margin:0px 0px 4px 0px;\"u003eCompany Detailsu003c/spanu003e",
"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.

Javascript's "eval" statement (which is what Ext.util.JSON.decode calls) handles it correctly.

Right, wrong or indifferent.

The JSONObject add method should be able to add any object, including Arrays of any object, and know how to serialize it. The Java version certainly does.

We use the Java classes from json.org to serialize our server-side classes into Ext config objects.

Here's the C# version. You could use them to create a JSONObject (which is basically a Dictionary which knows how to serialize itself into a JSON String).

http://sourceforge.net/projects/csjson

According to the json specs at json.org you can't include a (anonymous) function in a JSON string. So this is an invalid jsonobject. Is it correct that the Ext.decode handles this correctly?
{
"readOnly" : true,
"click" : function(){ ..},
"beforeexpand" : this.expand
}

Thanks
Marco

I'll give it a run through after the show this weekend. It sounds great. The comments said that the above limitations were for this version and this one seems only about a couple of months old and may not have all the features of the Java version yet. But after I finish what's needed for the show I'll have some breathing room to give a real run through and see if it can't save me a lot of work on this.

I did finally find the folder in "programfiles", I made the mistake of looking in the visual studio folders for the project.

according to some comments in it, it only parses nested simple types, not arrays, etc. I've already have my classes serializing nested elements and arrays. Anyhow, I'll give it a go. No reason to re-invent the wheel when there's giving cars away for free.

I'm trying to check that out, I downloaded the .msi and installed it. But I have no idea what I am supposed to do from there, is it a .dll I have to reference? And executable? A project?

The site has no docs of any kind so I'm a little stuck on that.

Looks like it's a fairly new project - started only in September. Yes, you have to reference System.Net.Json.dll in the "Samples/cs" project... Use Reflector [^ (http://www.aisto.com/roeder/dotnet/)] to dig into the assembly if you need more information.

First, the file in the first post is updated with more classes and some work over on the serialization.

Also added an example of creating a button that passes a function that evals properly client-side.

I got a chance to check out that system.net.json library, Animal. It looks promising, I can definitely see making it possible to parse json into more usable objects on the client-to-server end of it and I can probably make the serialization more robust with it. In Asp.net, at this time, it is definitely not plug and play, that for sure. (it fails on its own sample) Again though, it is the first version, apparently only 5 weeks old.

Anyway, this is pretty down and dirty, I-need-stuff-so-make-stuff kind of thing. At some point I plan to clean it up, make it possible to automate creation of forms and such.

Anyone who sees something to improve or makes an improvement, please post the changes here or PM me so I can integrate it and post it.

Since, this is developing as a utility for me (that I am making available), I can't promise you'll see regular updates, etc. from me. When I have something useful, I'll post it. But I work on it shall be on a as-time-permits basis.

Best,

Shawn

Yes, the nice thing about using the JSON classes, is that you can process the JSONObject, and manipulate it.

So a function can create a Component config, and then you can go in and add new listeners to the "listeners" property, or add more items to the "items" Array.

If you were concatenating up a long string, this would be extremely difficult as you can imagine.