[4.1.0 beta 1] No resize event is fired for custom form field

[ritcoder]

Hi,
I'm creating an extjs text field from the codemirror library. Interestingly, the resize event never fires. I even took out anything to do with codemirror and it still didn't fire.

The code for the custom field is

/**
 * Wrapper around the CodeMirror control
 */
Ext.define('Ext.form.field.CodeEditor', {
    extend: 'Ext.form.field.TextArea',
    alias: 'widget.codeeditorx',

    initComponent: function () {
        this.callParent();
        this.on({
            afterrender: this.setupEditor,
            resize: function (field, width, height) {
                var el = this.getEl();
                console.log('resized');
            }
        });
    },

    setupEditor: function () {
        console.log('this will setup the control');
    },
    getValue: function () { return this.editor ? this.editor.getValue() : ''; },
    setValue: function (text) { this.editor && this.editor.setValue(text); },
    getRawValue: function () { return this.getValue() },
    setRawValue: function (text) { this.setValue(text); }
});

the code for testing is

//new JSPad page
var p = Ext.create('Ext.panel.Panel',{
    items: [Ext.create('Ext.form.field.CodeEditor',{options:{mode:'javascript'}})],
    layout:'fit',autoScroll:false
});
window.p = p;
var win = Ext.create('Ext.window.Window',{layout:'fit',items : p,width:300,height:400});
win.show();

Is this a bug or I'm doing something wrong?

regards.

[mitchellsimoens]

I actually moved this to the bugs forum as your code worked fine in 4.0.7 but not in 4.1.0 beta 1

[zombeerose]

REQUIRED INFORMATION

Ext version tested:

• Ext 4.1 beta 3

Browser versions tested against:

• Chrome 17

DOCTYPE tested against:

• Strict

Description:

• Resizing a form text field does not fire the 'resize' event.
• This also applies to all subclasses of Ext.form.field.Text.

Steps to reproduce the problem:

• Run the code.
• Drag the border of the panel to resize the component.
• Two messages should be logged in the console - one for the panel resize and one for the field.

The result that was expected:

• The 'resize' event for both the panel and the field should fire.

The result that occurs instead:

• The 'resize' event is not fired.

Test Case:

var cmp = Ext.create('Ext.panel.Panel',{
    resizable: true,
    width: 100,
    height: 100,
    frame: true,
    items: [{
        anchor: '100% 100%',
        listeners: {
            'resize': function(){
                console.log('Field was resized',arguments);
            }
        },
        value: 'Value of field',
        xtype: 'textarea'
    }],
    layout: 'anchor',
    listeners: {
        'resize': function(){
            console.log('Panel was resized',arguments);
        }
    },
    title: 'Resize Me',
    renderTo: Ext.getBody()
});

HELPFUL INFORMATION

Additional CSS used:

• only default ext-all.css

Operating System:

• WinXP Pro

[mankz]

Something's fishy, I can see this in RC1 too. Even if putting resizable : true on the text area it doesn't fire any resize event after resize.

[zombeerose]

Here is a smaller test case...

Ext.widget({ 
  xtype:'textfield',   
  renderTo: Ext.getBody(), 
  resizable:true,  
  listeners:{
    resize:function(){ console.log('resize'); }
  }  
});

[zombeerose]

Reviewing the RC2 release notes - bug EXTJSIV-5193 is not listed anywhere - fixed or known issues. Any more info would be nice...

[mitchellsimoens]

This has been pushed back to 4.2 with an option for a possible 4.1.x inclusion.

[zombeerose]

@mitchellsimoens

That is quite disappointing. Do you have any suggestions how to deal with this in the interim?

[zombeerose]

I believe I have identified the problem and it is a super simple fix.

In the Ext.form.field.Text class, the redefined method afterComponentLayout does not pass arguments to the parent method, which means the size params are all undefined and never change.

Here is the fix for the Ext.form.field.Text source...

    afterComponentLayout: function() {
        var me = this,
            width;


        me.callParent(arguments); //ADD ARGUMENTS HERE
        if (me.autoSizing) {
            width = me.inputEl.getWidth();
            if (width !== me.lastInputWidth) {
                me.fireEvent('autosize', me, width);
                me.lastInputWidth = width;
                delete me.autoSizing;
            }
        }
    }

Here is a temp override...

Ext.define('Ext.form.field.TextOverride',{
    override: 'Ext.form.field.Text',
    
    afterComponentLayout: function() {
        var me = this,
            width;


        //need to bypass the Text implementation
        //me.callParent(); 
        Ext.form.field.Base.prototype.afterComponentLayout.apply(me,arguments); 
        if (me.autoSizing) {
            width = me.inputEl.getWidth();
            if (width !== me.lastInputWidth) {
                me.fireEvent('autosize', me, width);
                me.lastInputWidth = width;
                delete me.autoSizing;
            }
        }
    }
});

Please fix this before GA.

[dmurat]

+1 for fixing this before GA.
Fix by zombeerose works perfectly for me. Thank you very much, zombeerose.