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

  1. #1

    [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...
    Click image for larger version. 

Name:	BreakingChangeGridFocus.JPG 
Views:	14 
Size:	48.3 KB 
ID:	7372



    When you click the Add Button in 2.3 version, Focus is no the first column... which is hidden.
    Click image for larger version. 

Name:	BreakingChangeGridFocusNew.JPG 
Views:	13 
Size:	49.2 KB 
ID:	7373

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

    View :
    @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 :
    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 :
    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;
                }
            }
        }
    }
    Last edited by Daniil; Dec 24, 2013 at 8:29 AM. Reason: [CLOSED]
  2. #2
    Hi @RajivDutt,

    Please replace
    grid.columns[0]
    with
    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.
    Last edited by Daniil; Dec 16, 2013 at 2:35 PM.
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi @RajivDutt,

    Please replace
    grid.columns[0]
    with
    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
  4. #4
    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.
    Last edited by Baidaly; Dec 16, 2013 at 8:15 PM.

Similar Threads

  1. [CLOSED] Breaking Changes in 2.3 Release
    By RajivDutt in forum 2.x Premium Help
    Replies: 5
    Last Post: Dec 17, 2013, 4:27 PM
  2. Replies: 4
    Last Post: Mar 26, 2013, 2:09 AM
  3. Replies: 9
    Last Post: Dec 12, 2012, 5:04 AM
  4. Replies: 11
    Last Post: Mar 26, 2012, 3:26 PM
  5. RowEditor startEdit and validation
    By ralex in forum 1.x Help
    Replies: 11
    Last Post: Nov 23, 2011, 9:03 PM

Tags for this Thread

Posting Permissions