[CLOSED] Breaking Changes in 2.3 Release - startEdit Behavior Changed

I see a change, while i replaced the new version (version 2.3) DLL of ext.net.

When you Click the Add Button in 2.2 Version, Focus is on the first column...
Attachment 7372



When you click the Add Button in 2.3 version, Focus is no the first column... which is hidden.
Attachment 7373

Basically Hidden column is getting focus in the new version, which is wrong.

View :

Code:

---

@model IEnumerable<Ext.Net.MVC.Examples.Areas.GridPanel_Update.Models.Batch.TestPerson>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_BaseLayout.cshtml";
}

@section headtag
{
    <script>
        var updateRecord = function (form) {
            if (form.getForm()._record == null) {
                return;
            }

            if (!form.getForm().isValid()) {
                Ext.net.Notification.show({
                    iconCls: "icon-exclamation",
                    html: "Form is invalid",
                    title: "Error"
                });
                return false;
            }

            form.getForm().updateRecord();
        };

        var addRecord = function (form, grid) {
            debugger;
            if (!form.getForm().isValid()) {
                Ext.net.Notification.show({
                    iconCls: "icon-exclamation",
                    html: "Form is invalid",
                    title: "Error"
                });

                return false;
            }

            grid.store.insert(0, new Person(form.getForm().getValues()));
            //form.getForm().reset();
            debugger;

            grid.getView().focusRow(0);
            grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[0]);

        };
        var addRecordNew = function (form, grid) {


            grid.store.insert(0, new Person(form.getValues()));

            grid.getView().focusRow(0);
            grid.editingPlugin.startEdit(grid.store.getAt(0), grid.columns[0]);

        };

    </script>
}

@section example
{
    <h1>Grid with batch saving</h1>
   
    @(
 Html.X().FormPanelForModel()
            .ID("UserForm")
            .Icon(Icon.User)
            .Frame(true)
            .Title("User -- All fields are required")
            .Width(500)
            .DefaultAnchor("100%")
            .FieldDefaults(d => {
                d.LabelAlign = LabelAlign.Right;
            })
            .Buttons(
                Html.X().Button()
                    .Text("Save")
                    .Icon(Icon.Disk)
                    .Handler("updateRecord(this.up('form'));"),

                Html.X().Button()
                    .Text("Create")
                    .Icon(Icon.UserAdd)
                    .Handler("addRecord(this.up('form'), App.GridPanel1);"),
                   
                Html.X().Button()
                    .Text("Reset")
                    .Handler("this.up('form').getForm().reset();")
            )
    )
   
    @(   
 Html.X().GridPanel()
            .ID("GridPanel1")
            .Store(
                Html.X().StoreForModel().ID("Store1")
            )
            .Icon(Icon.Table)
            .Frame(true)
            .Title("Users")
            .Height(400)
            .Width(500)
            .StyleSpec("margin-top: 10px;")
            .ColumnModel(
                Html.X().ColumnFor(Model, m => m.Id)
                    .ToBuilder<Column.Builder>()
                    .Width(40).Hidden(true),

                Html.X().ColumnFor(Model, m => m.Email)
                    .ToBuilder<Column.Builder>()
                    .Flex(1)
                    .Editor(
                        Html.X().TextField().AllowBlank(false).StandardVtype(ValidationType.Email)
                    ),

              Html.X().ColumnFor(Model, m => m.First)
                    .ToBuilder<Column.Builder>()
                    .Flex(1)
                    .Editor(
                        Html.X().TextField().AllowBlank(false)
                    ),

              Html.X().ColumnFor(Model, m => m.Last)
                    .ToBuilder<Column.Builder>()
                    .Flex(1)
                    .Editor(
                        Html.X().TextField().AllowBlank(false)
                    ),

              Html.X().CommandColumn()
                  .Width(70)
                  .Commands(
                        Html.X().GridCommand()
                            .Text("Reject")
                            .ToolTip(t =>
                            {
                                t.Text = "Reject row changes";
                            })
                            .CommandName("reject")
                            .Icon(Icon.ArrowUndo)
                  )
                  .PrepareToolbar(t =>
                  {
                      t.Handler = "toolbar.items.get(0).setVisible(record.dirty);";
                  })
                  .Listeners(l =>
                  {
                      l.Command.Handler = "record.reject();";
                  })
            )
            .TopBar(
                Html.X().Toolbar()
                    .Items(
                        Html.X().Button()
                            .Text("Add")
                            .Icon(Icon.Add)
                            .Handler("addRecordNew(App.UserForm.getForm(), App.GridPanel1);"),

                        Html.X().Button()
                            .Text("Delete")
                            .Icon(Icon.Exclamation)
                            .Handler("this.up('grid').deleteSelected(); App.UserForm.getForm().reset();")
                    )
            )
            .SelectionModel(
                Html.X().RowSelectionModel()
                    .Mode(SelectionMode.Single)
                    .Listeners(l =>
                    {
                        l.Select.Handler = "App.UserForm.getForm().loadRecord(record);";
                    })
            )
            .Buttons(
                Html.X().Button()
                    .Text("Sync")
                    .Icon(Icon.Disk)
                    .DirectEvents(de => {
                        de.Click.Url = Url.Action("HandleChanges");
                        de.Click.ExtraParams.Add(new Parameter {
                            Name = "data",
                            Value = "this.up('grid').store.getChangedData({skipIdForPhantomRecords : false})",
                            Mode = ParameterMode.Raw,
                            Encode = true
                        });
                    })
            )
            .Plugins(
                Html.X().CellEditing().ClicksToEdit(1)
            )
    )

---

Controller :

Code:

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Ext.Net.MVC.Examples.Areas.GridPanel_Update.Models.Batch;

namespace Ext.Net.MVC.Examples.Areas.GridPanel_Update.Controllers
{
    public class BatchController : Controller
    {
        public ActionResult Index()
        {
            TestPerson.Clear();
            return View(TestPerson.TestData);
        }

        public ActionResult HandleChanges(StoreDataHandler handler)
        {
            ChangeRecords<TestPerson> persons = handler.BatchObjectData<TestPerson>();
            var store = this.GetCmp<Store>("Store1");

            foreach (TestPerson created in persons.Created)
            {
                TestPerson.AddPerson(created);

                var record = store.GetByInternalId(created.PhantomId);
                record.CreateVariable = true;
                record.SetId(created.Id);
                record.Commit();
                created.PhantomId = null;
            }

            foreach (TestPerson deleted in persons.Deleted)
            {
                TestPerson.DeletePerson(deleted.Id.Value);
                store.CommitRemoving(deleted.Id.Value);
            }

            foreach (TestPerson updated in persons.Updated)
            {
                TestPerson.UpdatePerson(updated);

                var record = store.GetById(updated.Id.Value);
                record.Commit();
            }

            return this.Direct();
        }
    }
}

---

Model :

Code:

---

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace Ext.Net.MVC.Examples.Areas.GridPanel_Update.Models.Batch
{
    [Model(Name = "Person", ClientIdProperty = "PhantomId")]
    [JsonWriter(Encode=true, Root="data")]
    public class TestPerson
    {
        [ModelField(IDProperty=true, UseNull=true)]
        [Field(Ignore=true)]
        public int? Id
        {
            get;
            set;
        }

        [ModelField(Ignore=true)]
        public string PhantomId
        {
            get;
            set;
        }

        [EmailValidation]
        [PresenceValidation]
        public string Email
        {
            get;
            set;
        }

        [PresenceValidation]
        public string First
        {
            get;
            set;
        }

        [PresenceValidation]
        public string Last
        {
            get;
            set;
        }

        private static int curId = 7;
        private static object lockObj = new object();

        private static int NewId
        {
            get
            {
                return System.Threading.Interlocked.Increment(ref curId);
            }
        }

        public static List<TestPerson> TestData
        {
            get
            {
                return new List<TestPerson>
              {
                  new TestPerson{Id=1, Email="fred@flintstone.com", First="Fred", Last="Flintstone"},
                  new TestPerson{Id=2, Email="wilma@flintstone.com", First="Wilma", Last="Flintstone"},
                  new TestPerson{Id=3, Email="pebbles@flintstone.com", First="Pebbles", Last="Flintstone"},
                  new TestPerson{Id=4, Email="barney@rubble.com", First="Barney", Last="Rubble"},
                  new TestPerson{Id=5, Email="betty@rubble.com", First="Betty", Last="Rubble"},
                  new TestPerson{Id=6, Email="bambam@rubble.com", First="BamBam", Last="Rubble"}
              };
            }
        }

        public static List<TestPerson> Storage
        {
            get
            {
                var persons = HttpContext.Current.Session["BatchTestPersons"];

                if (persons == null)
                {
                    persons = TestPerson.TestData;
                    HttpContext.Current.Session["BatchTestPersons"] = persons;
                }

                return (List<TestPerson>)persons;
            }
            set
            {
                HttpContext.Current.Session["BatchTestPersons"] = value;
            }
        }

        public static void Clear()
        {
            TestPerson.Storage = null;
        }

        public static int? AddPerson(TestPerson person)
        {
            lock (lockObj)
            {
                var persons = TestPerson.Storage;
                person.Id = TestPerson.NewId;
                persons.Add(person);
                TestPerson.Storage = persons;

                return person.Id;
            }
        }

        public static void DeletePerson(int id)
        {
            lock (lockObj)
            {
                var persons = TestPerson.Storage;
                TestPerson person = null;

                foreach (TestPerson p in persons)
                {
                    if (p.Id == id)
                    {
                        person = p;
                        break;
                    }
                }

                if (person == null)
                {
                    throw new Exception("TestPerson not found");
                }

                persons.Remove(person);

                TestPerson.Storage = persons;
            }
        }

        public static void UpdatePerson(TestPerson person)
        {
            lock (lockObj)
            {
                var persons = TestPerson.Storage;
                TestPerson updatingPerson = null;

                foreach (TestPerson p in persons)
                {
                    if (p.Id == person.Id)
                    {
                        updatingPerson = p;
                        break;
                    }
                }

                if (updatingPerson == null)
                {
                    throw new Exception("TestPerson not found");
                }

                updatingPerson.Email = person.Email;
                updatingPerson.Last = person.Last;
                updatingPerson.First = person.First;

                TestPerson.Storage = persons;
            }
        }
    }
}

---

Hi @RajivDutt,

Please replace

Code:

---

grid.columns[0]

---

with

Code:

---

grid.headerCt.getVisibleGridColumns()[0]

---

I think it was the incorrect usage of the GridPanel's columns. I don't think it is an API item as a property. It should be used as a config item only.

Quote:

---

Originally Posted by Daniil

Hi @RajivDutt,

Please replace

Code:

---

grid.columns[0]

---

with

Code:

---

grid.headerCt.getVisibleGridColumns()[0]

---

I think it was the incorrect usage of the GridPanel's columns. I don't think it is an API item as a property. It should be used as a config item only.

---

Thanks...

I am not sure, if it should be considered a breaking change or not. Also documentation is not available... its difficult to find out the good practices or bad practices.

Thanks,
Rajiv Dutt

Hello!

Well, yes some points in Ext JS is not clear and the only way is to ask or investigate on your own.

Usually, reviewing the source code of the components helps but it requires some practice and time.