Javascript 如何在文本字段上正确创建大小调整器

我使用的是ExtJs 6.2（经典主题），我必须基于Ext.resize.Resizer创建功能。当我为TextField元素创建一个新的大小调整器时，其输入字段的宽度会减小。但是，调整大小处理程序和字段边框之间的距离很大。问题只发生在输入字段（textfield、numberfield、textarea等）上，对于其他对象，resizer工作正常-处理程序设置在元素的边界上

这是Ext的问题还是我做错了什么？我怎样才能避免Ext的这种奇怪行为？下面是我的示例代码和图像

   Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.panel.Panel', {
            title: 'Resizer example',
            renderTo: Ext.getBody(),
            width: 1000,
            height: 300,
            items: [{
                xtype: 'textfield',
                id: 'ID_1',
                width: 300,
                labelWidth: 75,
                fieldLabel: "Resizable"
            }]
        });
        var resizer = Ext.create('Ext.create', 'Ext.resizer.Resizer', {
            target: 'ID_1',
            handles: 'all'
        });
    }
});

带大小调整器（1）的输入字段的宽度明显小于不带大小调整器（2）的示例中的宽度：

---

提前感谢您的帮助。

这是7.1版以下ExtJs主题

Neptune

中的一个错误。*：

看看小提琴：

---

尝试使文本框的宽度为100%？它也不起作用。此外，我必须首先为文本框指定一个固定的宽度。

   Ext.application({
       name: 'Fiddle',

       launch: function () {
           Ext.create('Ext.panel.Panel', {
               title: 'Resizer example',
               renderTo: Ext.getBody(),
               width: 1000,
               height: 300,
               layout: 'vbox',
               items: [{
                   xtype: 'textfield',
                   id: 'ID_1',
                   width: 300,
                   labelWidth: 75,
                   fieldLabel: "Resizable"
               }, {
                   xtype: 'textfield',
                   id: 'ID_2',
                   width: 300,
                   labelWidth: 75,
                   fieldLabel: "Not"
               }]
           });
           var resizer = Ext.create('Ext.create', 'Ext.resizer.Resizer', {
               target: 'ID_1',
               handles: 'all'
           });
       }
   });