javascript - 如何在文本字段上正确创建 Resizer

Question

我使用的是 ExtJs 6.2(经典主题)，我必须基于 Ext.resize.Resizer 创建功能。当我为 TextField 元素创建一个新的 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) 的示例:

预先感谢您的帮助。

Answer 1

这是 ExtJs Theme Neptune 7.1.* 以下版本中的错误:

看看 fiddle :https://fiddle.sencha.com/#view/editor&fiddle/32h7

   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'
           });
       }
   });