I saw on the MVCContrib site that there is at least talk of creating helpers for Ext.

As I personnally love this Javascript framework and want to leverage it and the MS MVC, I was wondering how to go about doing so.

 There are a number factors involved, not the least of which is the fact that with the advent of Ext 2.0, creating of components directly via json strings is definitely the way to go from a strictly Extjs perspective.

Anyhow, I've created some VB classes to generate json strings that I was using from webservices and have started using from the codebehind in MVC .aspx view.  I don't think it is the most elegant solution and would prefer something more re-usable, closer to server controls in without the "postbacks".  Has anyone else tried tackling this?  Any ideas on how best to best leverage Ext 2.0 within this framework?

Perhaps, developers using both Ext and MVC can pool our resources to get a working solution up and running.

Best,

 Shawn M. Smith

It's a lot of work to create wrappers around the extjs library. I've already modified the ExtSharp parser (see extjs forum) to create simple c# classes for each extjs control. (from the ext-all-debug.js).. after that it should get a "c# sauce", but i'm not sure how to do that without loosing the option to recreate the library from the ext-all-debug.js.

But if we got a a extjs c# library, we could use the Ext.ux.RemoteComponent plugin to dynamically create a full userinterface from the controller...It would be a MC (without the View) framework.
 

Thanks

Marco 

For me the higher priority is to write ExtJS custom controls that play nice with Microsoft MVC. Because the temptation with C# Helper Classes would be to try and create automatic javascript validation from Attributes on classes and the like. Or the Ext based scaffolding mentioned above. I almost think that's a step too clever.

What I've been exploring is creating an ExtJS.MVC.Form control and link/button extenders - one for each standard MVC action to allow inline editing. So below, a link that works when javascript is turned off with a full postback, can be extended. DeleteButton adds an onclick event to display an Ext Msg alert to confirm. Sure this is a very basic example. But I've not seen any samples of enabling inline editing with either Ext or jQuery for all types of common CRUD editing in a fluid inline/AJAX way.

<a id="comment-delete-1" href="/Comment/Delete/1" onclick="return false;">Delete</a>
<script> new ExtJS.MVC.DeleteButton('comment-delete-1', { message: 'Delete Comment 1?' }); </script>

I've been working on similar ones for Edit (extends link, posts back for form via AJAX and displays inline within a given target element), Update/Create (use ExtJS BasicForm and TextField for validation, shows errors in a Modal popup) and Show (update a target element on a page, similar to ASP.NET AJAX UpdatePanel).

One thing that I've been looking at is, given Ext 2.0's json-centric nature, is using views to supply this json.

Currently, I am creating a property for the view called "json" and on init, using wrapper to provide the json from the code-behind.

The page looks like:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="AdditionalPositions.aspx.vb" Inherits="UtowareAjaxMVC.AdditionalPositions" %>
<%=Me.json%>

I'd like to have a more declarative method of doing so.

Anyhow, it is a different way of using the views but I think it is worth looking at it as a means of rendering Ext applications.

I've lost the blog link, but there was a sample article on the web showing I believe a custom ViewFactory that checked for either format=json or mime=application/json in the querystring to then perform automatic serialisation to those formats from the current ViewData. That way a View isn't even needed for json. If the querystring isn't there it would simply use a default .aspx view. Think it worked something like that.

Or I suppose checking for the Header "X-Requested-With: XMLHttpRequest" and then serving serialised JSON.

Doesn't seem to me that getting and returning the proper format is a problem.  If for no other reason than, I know what I am asking for and can provide it.

 I actually prefer the idea of having a view and usercontrols.  Something that I can pass ViewData to and have it simply render the json for the ext component.  For example:

        Dim dvPositionsList As DataView = Utoware.Org.EmplPositionAssignment.GetEmplPositionAssignmentDataView(EmployeeID:=ViewData.EmployeeID)

        Dim viewableFields As New List(Of String)

        viewableFields.Add("SectCode")
        viewableFields.Add("PostCode")
        viewableFields.Add("PayAmount")
        viewableFields.Add("PayRate")
        viewableFields.Add("DefaultUnitCode")
        viewableFields.Add("PostAssignmentType")


        Dim grdPositionsList As Ext_grid_GridPanel = Ext_grid_GridPanel.CreateGridFromDataTable(data:=dvPositionsList.ToTable, visibleColumnFields:=viewableFields)
        grdPositionsList.title = "Position List"
        grdPositionsList.id = "winHireWizard_winAddPositions_pnlAddPositions_grdPositionList"
        grdPositionsList.height = 280
        grdPositionsList.columnWidth = 0.5
        grdPositionsList.listeners = "@*{rowdblclick: function(grd, rowIndex, evt){var selection = grd.getSelectionModel().getSelected();if(selection){var PositionData = selection.data;Ext.getCmp('winHireWizard_winAddPositions_pnlAddPositions_frmAdditionalPostDetails').getForm().setValues(PositionData);var cbxDiv = Ext.getCmp('winEmplManageHire_winAddPositions_pnlAddPositions_cbxDivNo');var cbxDept = Ext.getCmp('winEmplManageHire_winAddPositions_pnlAddPositions_cbxDeptNo');var cbxSect = Ext.getCmp('winEmplManageHire_winAddPositions_pnlAddPositions_cbxSectCode');var cbxPost = Ext.getCmp('winEmplManageHire_winAddPositions_pnlAddPositions_cbxPostCode');cbxDept.store.filter('DivNo', cbxDiv.getValue());cbxSect.store.filter('DeptNo', cbxDept.getValue());cbxPost.store.filter('SectCode', cbxSect.getValue());}}}*@"


        Dim btnPositionListEdit As New Ext_Button With {.text = "Edit the Selected Position", _
        .handler = "@*function(btn) {var grd = Ext.getCmp('winHireWizard_winAddPositions_pnlAddPositions_grdPositionList');var selection = grd.getSelectionModel().getSelected();if(selection){var PositionData = selection.data;Ext.getCmp('winHireWizard_winAddPositions_pnlAddPositions_frmAdditionalPostDetails').getForm().setValues(PositionData);var cbxDiv = Ext.getCmp('winEmplManageHire_winAddPositions_pnlAddPositions_cbxDivNo');var cbxDept = Ext.getCmp('winEmplManageHire_winAddPositions_pnlAddPositions_cbxDeptNo');var cbxSect = Ext.getCmp('winEmplManageHire_winAddPositions_pnlAddPositions_cbxSectCode');var cbxPost = Ext.getCmp('winEmplManageHire_winAddPositions_pnlAddPositions_cbxPostCode');cbxDept.store.filter('DivNo', cbxDiv.getValue());cbxSect.store.filter('DeptNo', cbxDept.getValue());cbxPost.store.filter('SectCode', cbxSect.getValue());}}*@"}
        grdPositionsList.bbar.Add(btnPositionListEdit)

        grdPositionsList.bbar.Add(New Ext_Toolbar_Separator)

        Dim btnPositionListRemove As New Ext_Button With {.text = "Remove Selected from List", _
        .handler = "@*function(btn) {var grd = Ext.getCmp('winHireWizard_winAddPositions_pnlAddPositions_grdPositionList');var selection = grd.getSelectionModel().getSelected();if(selection){var emgPositionData = selection.data;Ext.Ajax.request( {method : 'POST',url : '../../WebServices/EmployeeManagement.asmx/DeleteEmgPosition',params : Ext.util.JSON.encode( {EmgPositionData : emgPositionData}),callback : function(opt, success, rsp) {var r = Ext.util.JSON.decode(rsp.responseText);if (r.Success === true) {Ext.Msg.alert('Success Message', r.Message);grd.getStore().remove(selection);grd.getView().refresh();} else {Ext.Msg.alert('Failure Message', r.Message);}}})}}*@"}
        grdPositionsList.bbar.Add(btnPositionListRemove)



        pnlAddPositions.items.Add(grdPositionsList)

I use code like this in the code behind to create a grid with its store and column model.  It works and is working out great for me.  However, I would prefer to an "RenderExtGrid(ViewData.datatable, ViewData.ColumnConfig)".  I also don't like having to hardcode the ID's.  Seems to me that there would be a way to create some kind of templating system for use with Extjs.

There is a small group from the MVC Contrib project working on a Client Library Helpers.  The plan is to support prototype, jquery and ext in the first release.

We're still in the initial phases of this and working out how the api will work and look.

Very nice to read that !! I am working on a dynamic Ext Grid using DynamicController but I am having a problem  serializing

the data from LinqToSql to json (circular reference). Does anybody here know how to solve this?(I am using the JavascriptSerializer class)

jcteague:

There is a small group from the MVC Contrib project working on a Client Library Helpers.  The plan is to support prototype, jquery and ext in the first release.

We're still in the initial phases of this and working out how the api will work and look.

How can i join this group?

 I'm interested too

As I would be.

As John pointed we are still fleshing out the initial api to make something that will work with multiple frameworks but give extension points for custom needs.  The key areas we are working on are dom manipulation, ajax, effects, validation, and widgets.  Our goal is to provide a solid foundation so extending what is there will be simple and reusable.  Once we have a base it will get merged into the MVC Contrib project and then it will be open to patches like everything else.  If you have ideas, sample code, etc, feel free to email me and we can talk offline.

This is the kind of generic client-side API that I'd like to have, that in theory could be implimented in both ExtJS and jquery. Then it's fairly easy to write either inline or via an Html Helper. Then events like onConfirm could be added to allow customisation of the UI.

<form id="product-update-1" action="/product/update/1" method="POST">

    <div id="validation-summary"></div>

    <label>Title</label><input id="product-1-title" name="product.title" value="Product Title 1"/><br/>

    <label>Description</label><textarea id="product-1-description" name="product.description">Product Description</textarea><br/>

    <input type="submit" value="Update"/><br/>

    <a id="product-destroy-1" href="/product/destroy/1">Delete</a>

</form>

<script>

var productUpdate = MVC.Form('product-update-1', { action: MVC.Actions.Update, validationFormat: MVC.UIFormat.BulletList, validationSummaryId: 'validation-summary' } );

productUpdate.add(new MVC.InputField('product-1-title', { required: true, maxLength: 50 }));

productUpdate.add(new MVC.InputField('product-1-description', { required: true, isRichTextEditor: true }));

var productDestroy = MVC.Button('product-destroy-1', { action: MVC.Actions.Destroy, confirmFormat: MVC.UIFormat.ModalPopup, confirmTitleId: 'product-1-title' });

</script>

anybody here is using Extjs just jslibrary with imports in master page for example and building components in jsfiles, then intercomunicate them? so wich is better or has more performance?

Thanks!