ExtJs + ASP.Net MVC + Fluent Helper = My spike

The goal of why I begun to write a "Helper" is very simple "Write less code". This is a basic configuration of ExtJs Grid with javascript. On the other hand, this is the code to configure it with my helper:
            colBuilder.For(x => x.Id).Named("Código");
            colBuilder.For(x => x.Descripcion).Named("Descripción");
            colBuilder.For(x => x.Id).LinksTo("Edit", "Person/Edit/{Id}");
Almost all of these configurations are optional and have some overloads. So, How I've achieved this I've added another "level of indirection". Ext JS and JQuery frameworks use something called Joln (Javascript Object Literal Notation). This is like JSON but the member names are not quoted (more info here). Take a look to my other level of indirection For instance, this is a javascript configuration for JsonStore:
var store = new Ext.data.JsonStore({
url: 'get-images.php',
root: 'images'})
Then I wrote the following class:
public class ExtJsonStore : JsObject<ExtJsonStore{
public ExtJsonStore(string url){...}
public string Root { get; set; }
public string Url { get; set; }
protected override string GetJsClassName()
return "Ext.data.JsonStore";
protected override string GetConfiguratorConstructor()
return JolnBuilder.Start()
          .With("url", Url)
          .With("root", Root)
In this class the function called GetConfiguratorConstructor returns this string: {url: 'foo', root: 'bar'}. The abstract class JsObject has some methods as follows:
  • string CreateNewInstance() => return "new Ext.data.JsonStore({url: 'foo', root: 'bar'})"
  • JsObject CreateNewInstanceAndAssignToVar(string varName) => stack "var foo = new Ext.data.JsonStore({url: 'foo', root: 'bar'})"
  • JsObject WithMethodCall(string method) => stack "foo.doSomething()"
Finally this is a tdd spike! Don't use it in a real word application. Here is the project for download.

blog comments powered by Disqus
  • Categories

  • Archives