Html helper lib for integrating Extjs4 with Asp.net MVC4. Pretty much the same idea as the commercial lib Ext.net, though this code totally unrelated.

Creates a Ext.grid.Panel with CellEditing plugin from a model instance property, based on this example. The idea is to keep the implementation DRY, so rather than re-modelleing your .net models in javascript to create the grid, a grid configuration is created by inspecting the model at runtime. The generated configuration includes column configurations with type-based editors. The grid configuration is not loaded with ajax but directly from script in markup, saving us a roundtrip.

Like things usually are in ASP.net MVC, column names can be specified with the DisplayAttribute, or if unspecified they will be deducted from the model property name.

Theres not yet a practical way of submitting the form data back to the server once modified (if you want to use this, you need to build that yourself).

publicclassHomeModel{publicIEnumerable<PersonModel>Persons{get;set;}}publicclassPersonModel{publicintId{get;set;}[Display(Name="The Person name")]publicstringName{get;set;}publicstringOccupationId{get;set;}publicIEnumerable<SelectListItem>Occupations{get;set;}[Display(Name="Date of birth")]publicDateTimeBirthDate{get;set;}[Display(Name="Ammassed fortune")][DisplayFormat(DataFormatString="{0} $")]publicdecimalFortune{get;set;}publicintNationalities{get;set;}}

@using Tewr.ExtJsMvc @using Tewr.ExtJsMvc.EditableGrid @model Tewr.ExtJsMvc.Examples.Models.HomeModel <divid="personsGrid"></div><scripttype="text/javascript" src="~/Scripts/Tewr.ExtJs-Mvc.grid.EditableGrid.js"></script> @Html.EditableGrid( "personsGrid", x => x.Persons, new GridOptions{width = "700", height = "400"}, g => g .Text(m => m.Name, new ColumnOptions{Width = 120 }) .Combo(m => m.Occupations, m => m.OccupationId, new ComboColumnOptions{Header = "Occupation", Width = 100 }) .Combo(m => m.Occupations, new ComboColumnOptions{Header = "Second Occupation", Width = 120 }) .Date(m => m.BirthDate, new ColumnOptions{Width = 100}) .Number(m => m.Fortune, new ColumnOptions{Width = 100 }) .Number(m => m.Nationalities) )

The same(ish) example can be found in full in [ExtJsMvc4.Examples] project. [ExtJsMvc4.Examples]: https://github.com/Tewr/Extjs4-Mvc4/tree/master/Tewr.ExtJs-Mvc/Tewr.ExtJs-Mvc.Examples