extjs6-classic

How to style RowEditing plugin

When activating the row editing plugin, the padding is bigger than usual:

enter image description here

Any idea of what can be affecting the layout or how to fix it?

Solution

  • The grid is inside a form definition. It inherited the fieldDefaults, so I had to move them inside the fieldset definition and leave the grid outside of it:

    Ext.define('App.view.Test', {
    extend: 'Ext.form.Panel',
    xtype: 'test-form',

    layout: 'vbox',
    bodyPadding: 20,
    fieldDefaults: { //defined here will affect the roweditor plugin
        labelAlign: 'top',
        margin: 20
    },

   items: [
      { 
        xtype: 'fieldset',
        //fieldDefaults should be moved here and leave the grid untouched
        items: [...]
      },
      {
         xtype: 'grid',
         [...]
      }
});