Aspnet demo

Nov 18, 2010 at 7:33 PM
Do you have an example or ideas how this can be used in aspnet (mvc) apps?
Coordinator
Nov 18, 2010 at 9:45 PM

The idea is to make exactly what Telerik MVC components do:

 

    <%= Html.Telerik().ComboBox()
                      .Name("ComboBox")
                      .AutoFill(Model.ComboBoxAttributes.AutoFill.Value)
                      .SelectedIndex(Model.ComboBoxAttributes.SelectedIndex.Value)
                      .BindTo(new SelectList(Model.Products, "ProductID", "ProductName"))
                      .HtmlAttributes(new { style = string.Format("width:{0}px",
                          Model.ComboBoxAttributes.Width) })
                      .Filterable(filtering =>
                      {
                          if (Model.ComboBoxAttributes.FilterMode != 0) 
                          {
                              filtering.FilterMode(AutoCompleteFilterMode.StartsWith);
                          }
                      })
                      .HighlightFirstMatch(Model.ComboBoxAttributes.HighlightFirst.Value)
    %>


With this lib, would be something like:

<%= Html.Ext().Form().ComboBox()
.Store("storeId") // A data provider. Ajax, Astoria, WebService, Model, etc.
.DisplayField("state")
.TypeAhead(true)
.Mode(DataMode.Remote)
.ForceSelection(true)
.TriggerAction(TriggerAction.All)
.EmptyText(Resources.ComboBoxLocalizedMessage)
.SelectOnFocus(true)
.ApplyTo("some div id perhaps")
.ToJavascript("combo")%>

This would render something like:

    var combo = new Ext.form.ComboBox({
        store: store,
        displayField:'state',
        typeAhead: true,
        mode: 'local',
        forceSelection: true,
        triggerAction: 'all',
        emptyText:'Select a state...',
        selectOnFocus:true,
        applyTo: 'local-states'
    });

In the end, a combo would be rendered on somewhere (inside a div or into another component, like a form). How to fill the combo data? ExtJS allows us to make "data stores".

It would be possible to use a local provider (exactly like a common combobox with mvc, a select filled with data from the model), a call to a web service, a call to a web method, a call to a WCF Rest method, a call to a ADO.net Data services feed, etc.

 

As my helper only generates javascript text, this could be used in WebForms as well. For the common scenarios, additional javascript wouldn't be necessary (as ExtJS is smart enough to, for example, submit a form with its values without further script coding).

 

There would be some automatic integrations with MVC, for example: templates to make <%=Html.ComboFor(m => m.Field) %> render a ExtJS combo instead of a normal combo, and automatic binding of MVC validation into the ExtJS validation system.

 

One point that someone told me: a simple combo in ExtJS has dozen of config options, so the intelissense would be a list of dozen of different methods that, even with some xml documentation, would be hard to figure out what to use without the help opened.

My ideia is to create the components with only a few more common used configs, and a method called .ToAdvanced() to show all the remaining options.

Ex.:

Html.Ext().Combo().Text("This is common").Listeners("events are common").ToAdvanced().HideCollapseTool(false) <-- this is uncommon, so it appears on fluent only after the call to .ToAdvanced().

The main idea is to use the ExtJS framework with all its power in a c# environment, with intellisense, code compilation, etc.

 

What can be made? All of this: =) http://dev.sencha.com/deploy/dev/examples/

Nov 18, 2010 at 10:16 PM

Ok, but if <%= Html.Ext().Form().ComboBox() has a result of var combo = new Ext.form.ComboBox({..}), that is not enough.

Where do you specify the Ext.Form.FormPanel with the items collection? And will this be automatically wrapped in an Ext.onReady(..) method?

ps. I do like the fluent interface, but i like to know your ideas how this is used inside a 'one-page-asp.net-ext.js' solution where only ajax callbacks are used to render forms (and if already rendered, load the data).

Coordinator
Nov 18, 2010 at 10:34 PM
Edited Nov 18, 2010 at 10:38 PM

Let's assume the following HTML view (or remove the script tag if your view returns only JS):

<html>
<body>
<script type="text/javascript">
Ext.onReady(function(){
<%= Html.Ext().FormPanel().Items
  (
    Ext().ComboBox().Label("Something")
  ).ToJavascript("myForm")%>});
</script>

...

This would render:

Ext.onReady(function()
{
  var myForm = Ext.form.FormPanel(
  {
    items: [
      new Ext.form.ComboBox({label:"something"})
    ]
  });
}

You can do even better: by using a fluent for the combo (with .ToJavascript) and another for the form, you get two javascript vars (and you can set the Items on the FormPanel as the var name of the combo, it is the same).

This would allow to access the combo later through javascript:   myCombo.getValue(), for example.

 

Maybe I can create something like:

Ext.OnReady(FormFluent(with ArrayOf Components)) that would render the entire Ext.onReady function.

 

Throwing the result into a javascript var (using the method .ToJavascript("varName")) is good to make the component availble, but you can also set the .Id("something") and later get the component through javascript (Ext.getCmp("something")).

 

The idea is to throw what the ExtJS Designer throws as a result, and give options to render the result in different ways (ex.: ToString() render the javascript as a json, ToJavascript("name") renders a "var name = constructor({json})), ToObject() renders only the "constructor({json})"