添加新行或编辑现有行时行编辑插件的奇怪行为答案

【问题标题】：Rowediting plugin strange behavior when adding a new row or editing an existing row添加新行或编辑现有行时行编辑插件的奇怪行为
【发布时间】：2019-07-01 08:44:13
【问题描述】：

第一次（在渲染组件之后）添加新行或编辑现有行时，Rowediting 插件出现奇怪的行为：编辑器大小不正确和按钮偏离中心。它是一个错误吗？如果是bug，有没有办法解决这个问题？

Ext JS 6.7.0

小提琴：https://fiddle.sencha.com/#view/editor&fiddle/2sqf

【问题讨论】：

标签： extjs plugins extjs6

【解决方案1】：

我曾经遇到过这个问题，虽然我没有详细的答案，但我有几个解决方案。

当您使用带有 inline data 的商店（未定义适当的 Ext.data.Model），并且您正在添加以 Ext.data.Model 实例化的新记录时，就会出现该问题。

所以这里有两个解决方案：

第一个解决方案：添加内联数据

您无需添加 Ext.data.Model 的实例，而是添加带有必填字段的简单 json 数据。

  // in your handler...

  // create the record as json
  jsonRecord =  {
     name: '',
     email: '',
     phone: ''
  }

  // Adding to the store converts the json data into records
  const addedRecords = store.add(jsonRecord);

  // Since we are only adding a single record, we edit the idx 0
  rowediting.startEdit(addedRecords[0]);

第二种解决方案：为您的数据定义模型

Ext.define('YourModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'email',   type: 'string'},
        {name: 'phone', type: 'string'}
    ]
});

并使用此模型创建您的商店...

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    model: 'YourModel',          // Set model here
    // fields:[ 'name', 'email', 'phone'],
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'homer@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', phone: '555-222-1254' }
    ]
});

...并创建新记录。

   // In your handler

   // Create the record with your model
   record = Ext.create('YourModel');

   // Add to the store
   store.add(record);

   // Edit the record instance
   rowediting.startEdit(record);

在这两种方法中，更新行也会更新新添加的记录。

希望对你有帮助

【讨论】：

感谢 NAmorim。我的真实应用程序是使用商店和模型构建的，与您的第二个解决方案相同。然而问题依然存在。在我看来这是一个错误。