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

Extjs 行编辑插件添加新行或编辑现有行时的奇怪行为,extjs,plugins,extjs6,Extjs,Plugins,Extjs6,行编辑插件首次添加新行或编辑现有行(在渲染组件之后)时的奇怪行为:编辑器大小不正确和按钮偏心。 是虫子吗? 如果它是一个bug,有没有解决这个问题的方法 Ext JS 6.7.0 Fiddle:我曾经遇到过这个问题,虽然我没有详细的答案,但我有两个解决方案 当您使用带有内联数据的存储时(未定义正确的Ext.data.Model),以及添加用Ext.data.Model实例化的新记录时,会发生此问题 因此,这里有两种解决方案: 第一种解决方案:添加内联数据 Ext.define('YourMode

行编辑插件首次添加新行或编辑现有行(在渲染组件之后)时的奇怪行为:编辑器大小不正确和按钮偏心。 是虫子吗? 如果它是一个bug,有没有解决这个问题的方法

Ext JS 6.7.0


Fiddle:

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

当您使用带有
内联数据的存储时(未定义正确的Ext.data.Model),以及添加用
Ext.data.Model
实例化的新记录时,会发生此问题

因此,这里有两种解决方案:

第一种解决方案:添加内联数据

Ext.define('YourModel', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'name',  type: 'string'},
        {name: 'email',   type: 'string'},
        {name: 'phone', type: 'string'}
    ]
});
您没有添加
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。我真正的应用程序是用商店和模型构建的,与您的第二个解决方案相同。然而,问题依然存在。在我看来,这是一只虫子。