ExtJS and MVC : 05 - ExtJS ComboBox vs. MVC DropDownList

This website is no longer actively supported

Written by John DeVightJohn DeVight on 25 May 2011 13:26

rating: 0+x

Download RAZOR Source Code
Download ASPX Source Code
* Note: the extjs folder has all been removed to reduce the zip file size

Overview

In ExtJS and MVC : 04 - Load and Save an HTML Form Using AJAX I demonstrated putting some input fields on a View using the MVC HTML Helper functions. However, the only ExtJS control that was created was the button. I wanted to see what it would be like to use an ExtJS ComboBox and compare it to a DropDownList created using the MVC HTML DropDownListFor Helper function. Implementing the "MVC DropDownList" was easy to do while implementing the "ExtJS ComboBox" involved a bit of research and writing some javascript. To implement the "ExtJS ComboBox" I needed to create a JsonStore that would call the Controller to get the list of values. I then created the ComboBox and set the source of the data to be the JsonStore. When the JsonStore is loaded, the initial value for the ComboBox gets displayed. When the value for the ComboBox is changed, a hidden field is updated with the new value.

Implementing the "MVC DropDownList"

I implemented the DropDownList using the MVC HTML DropDownListFor Helper function and set the class to x-form-field so that the DropDownList uses the same font as the other controls on the form. When the form is saved, the value for the selected item is set in the Model that is passed to the Save method. That is all there is to it.

Here is the code to get the list of Tags for the DropDownList:

public static IList<Tag> TagList
{
    get
    {
        IList<Tag> list = new List<Tag>();
        list.Add(new Tag { Id = 1, Name = "ASP.NET" });
        list.Add(new Tag { Id = 2, Name = "ExtJS" });
        list.Add(new Tag { Id = 3, Name = "Telerik" });
        list.Add(new Tag { Id = 4, Name = "Razor" });
        list.Add(new Tag { Id = 5, Name = "ASPX" });
        return list;
    }
}

Here is the code for the View:

<div class="tableRow">
    <div class="tableColumn">
        <label for="Name" class="fieldLabel x-form-field">First Tag:</label>
    </div>
    <div class="tableColumn">
        @Html.DropDownListFor(model => model.TagOneId, new SelectList(ExtjsMvcRazorApp.Controllers.HomeController.TagList, "Id", "Name"), new { @class = "x-form-field" })
    </div>
</div>

Implementing the ExtJS ComboBox

JsonStore

To implement the ExtJS ComboBox I first needed to implement the JsonStore. In the controller I added a method to return a list of Tags.

Here is the code:

public JsonResult GetTagList()
{
    return Json(HomeController.TagList, JsonRequestBehavior.AllowGet);
}

In the Ext.onReady function, I create the JsonStore and specifiy a url to get the list of Tags from the controller. I also identify the fields that are in each "record" that is returned from the controller. The name of each field corresponds to the name of the property found in the Tag class.

Here is the code:

var tagStore = new Ext.data.JsonStore({
    url: '/Home/GetTagList',
    storeId: 'tagStore',
    fields: ['Id', 'Name'],
    listeners: {
        load: {
            fn: function(store, records, options) {
                var idx;
                if ((idx = tagStore.find('Id', Ext.get('TagTwoId').getValue())) >= 0) {
                    secondTagDropDownList.setValue(tagStore.getAt(idx).data.Name);
                }
            }
        }
    }
});
tagStore.load();

ComboBox

To implement the ComboBox I need to identify the location in the View where I want the ComboBox to appear. I use a div for that. I also need to store the initial value for the ComboBox in a hidden field.

Here is the code:

<div class="tableRow">
    <div class="tableColumn">
        <label for="Name" class="fieldLabel x-form-field">Second Tag:</label>
    </div>
    <div class="tableColumn">
        @Html.HiddenFor(model => model.TagTwoId)
        <div id="secondTagDropDownList"></div>
    </div>
</div>

In the Ext.onReady function I create the ComboBox and set the id of the div as the element to "transform" into a ComboBox. I also specify an event handler for the "load" event that updates the value in the hidden field.

Here is the code:

var secondTagDropDownList = new Ext.form.ComboBox({
    triggerAction: 'all',
    id: 'secondTagDropDownList',
    transform: 'secondTagDropDownList',
    valueField: 'Id',
    displayField: 'Name',
    store: tagStore,
    lazyInit: false,
    listeners: {
        change: {
            fn: function(combo, newValue, oldValue) {
                Ext.getDom('TagTwoId').value = newValue;
            }
        }
    }
});

Conclusion

The "MVC DropDownList" was very easy and fast to implement. However, depending on your need, the ExtJS ComboBox API will provide a lot more client functionality such as control over initialization, type ahead, manipulating data and event management.

References

Discussion Closed

Add a New Comment

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License