Good article about possible solutions for creating WEB DataTables

http://www.sitepoint.com/responsive-data-tables-comprehensive-list-solutions/

react js
http://adazzle.github.io/react-data-grid/examples.html#/basic

Introdution example from KnockoutJs

//HTML
<p>First name: <strong data-bind="text: firstName"></strong></p>
<p>Last name: <strong data-bind="text: lastName"></strong></p>

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>

<p>Full name: <strong data-bind="text: fullName"></strong></p>

<button data-bind="click: capitalizeLastName">Go caps</button>

----------------------------------------------------------------------

//JS
function AppViewModel() {
    this.firstName = ko.observable("Bert");
    this.lastName = ko.observable("Bertington");
    
    this.fullName = ko.computed(function() {
    return this.firstName() + " " + this.lastName();    
    }, this);
    
    this.capitalizeLastName = function() {
        var currentVal = this.lastName();        // Read the current value
        this.lastName(currentVal.toUpperCase()); // Write back a modified value
    };
}

ko.applyBindings(new AppViewModel());



Download KnockOutJS

Jquery UI Dialog

    $("#dialog").dialog({
        autoOpen: false,
        height: 500,
        width: 960
    });
 
$("#dialog").dialog("open");

<div id="dialog" title="Dialog title"></div>

ASP NET MVC JQuery table with ajax refresh

       var oProtocolTable = $('#ProtocolTable').DataTable({
        "bPaginate": false,
        "ordering": false,
        "bFilter": false,
        "bInfo": false,
        "bProcessing": true,
        "bLengthChange": false,
        "ajax": "/Home/ProtocolAjaxHandler",
        "language": {
            "url": "Content/Russian.txt"
        },
        "fnServerParams": function (aoData) {
            aoData.push({ "name": "GroupID", "value": GroupID });
            aoData.push({ "name": "OrgInn", "value": orgINN });
            aoData.push({ "name": "check_id", "value": check_id });
        }
    });
 
    $('#OrganisationRisk tbody').on('click', 'tr', function () {
        check_id = oOrganisationRisk.cell(this, 0).data();
        oProtocolTable.ajax.reload();
    });

 /// <summary>
    /// Class that encapsulates most common parameters sent by DataTables plugin
    /// </summary>
    public class JQueryDataTableParamModel
    {
        /// <summary>
        /// Request sequence number sent by DataTable, same value must be returned in response
        /// </summary>       
        public string sEcho{ get; set; }
 
        /// <summary>
        /// Text used for filtering
        /// </summary>
        public string sSearch{ get; set; }
 
        /// <summary>
        /// Number of records that should be shown in table
        /// </summary>
        public int iDisplayLength{ get; set; }
 
        /// <summary>
        /// First record that should be shown(used for paging)
        /// </summary>
        public int iDisplayStart{ get; set; }
 
        /// <summary>
        /// Number of columns in table
        /// </summary>
        public int iColumns{ get; set; }
 
        /// <summary>
        /// Number of columns that are used in sorting
        /// </summary>
        public int iSortingCols{ get; set; }
 
        /// <summary>
        /// Comma separated list of column names
        /// </summary>
        public string sColumns{ get; set; }
 
    }

  public ActionResult ProtocolAjaxHandler(JQueryDataTableParamModel param, int? GroupID, string OrgInn, int? check_id)
        {
            var riski = RiskiRepository.Show_Protocol(OrgInn ?? "", GroupID ?? 0, check_id ?? 0);
            if (riski == null)
                return Json(new
                {
                    data = new List<string>()
                },
                JsonRequestBehavior.AllowGet);
            return Json(new
            {
                aaData = from emp in riski
                         select new[] { emp.description, emp.date_check.ToShortDateString() }
 
            },
            JsonRequestBehavior.AllowGet);
 
        }

ExtJS основы

ПРИМЕРЫ. Вот ссылку мне дали,я так понимаю это официальный сайт разработчика и там есть куча примеров http://cdn.sencha.io/ext-4.0.7-gpl/examples/

LAYOUT. По позиционировании контролов смотрим тему про layout(слои):
Вот допустим слой HBox http://cdn.sencha.io/ext-4.0.7-gpl/examples/layout/hbox.html. Тыкаем и смотрим как в зависимости от настройек лэйауте меняется расположение контролов.Чтобы посмотреть как это всё делается,смотрим исходный код страницы там расписано.
Туда же слой VBox http://cdn.sencha.io/ext-4.0.7-gpl/examples/layout/vbox.html

ДОКУМЕНТАЦИЯ. http://cdn.sencha.io/ext-4.0.7-gpl/docs/index.html#!/api