Solution 1 :

It’s a bug in ExtJs Theme Neptune below version 7.1.*:

Take a look on 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'
           });
       }
   });

Problem :

I’m using ExtJs 6.2 (Classic theme) and I have to create functionality based on Ext.resize.Resizer. When I create a new Resizer for the TextField element, the width of its input field is reduced. However, the distance between the resize handler and the field border is large. The problem only occurs with input fields (textfield, numberfield, textarea etc.), for other objects resizer works properly – the handlers are set right on the borders of the elements.

Is this Ext’s problem or am I doing something wrong? How could I avoid this strange behaviour of Ext? Below is my sample code and image.

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

Input field with resizer (1) has visibly smaller width than in the example without resizer (2):

enter image description here

Thank you in advance for your help.

Comments

Comment posted by Matt Oestreich

Try to make the width of the textbox 100% ?

Comment posted by TomTom11

It doesn’t work either. Besides, I must first specify a fixed width for the textbox.

By