Ext.NET MVC – GridPanel Row Select & Get Row Key to Add New Tab

Ext.NET MVC – GridPanel Row Select & Get Row Key to Add New Tab

 
   Define GridPanel from View
 
   @(Html.X().GridPanel()
     .ID("GridPanel")
     .Store(
       Html.X().Store()
         … …
         .Model(
           Html.X().Model()
           .Fields(
             new ModelField("id", ModelFieldType.Int),
             new ModelField("company"),
             … …
           )
         )
         … …
     )
     … …
     .ColumnModel(
       Html.X().RowNumbererColumn(),
       Html.X().Column().Text("Company").DataIndex("company").Flex(1)
       … …
     ).Listeners(r => r.Select.Fn = "onRowSelect")
     .SelectionModel(
       Html.X().RowSelectionModel().Mode(SelectionMode.Single)
     )
     … …
 
   JavaScript to Get the Record Key as Url Parameter and to Add the New Tab
 
   // parent.App.TabPanel is the Tab Panel from Root Page.
   var onRowSelect = function (grid, e, rowIdx)
   {
 
     var url = "/ExtNetTest/ShowCompanyItem?id=" + id;
     var record = grid.getStore().getAt(rowIdx);
 
     if(record != null)
     {
       var id = record.get("id");
       var company = record.get("company");
 
       if (parent.App != null)
       {
         if (parent.App.TabPanel != null)
         {
           tab = parent.App.TabPanel.add({
             id: "CompanyDetails",
             title: url,
             closable: true,
             loader: {
               url: url,
               renderer: "frame",
               loadMask: {
                 showMask: true,
                 msg: "Loading " + url + "…"
               }
             }
           });
 
           parent.App.TabPanel.setActiveTab(tab);
         }
       }
     }
   };