ExtJS: Why isn't autosize working for my textfields?

[charris]

I have a FormPanel (Ext.form.Panel) with text fields; I'd like the text fields to automatically resize so that their entire contents are visible, but the following isn't working:

Ext.define('myapp.view.admin.EditUserFormPanel', {    
    extend: 'Ext.form.Panel',
    initComponent: function() {
        var me = this;
        me.items = [
            {
                xtype: 'textfield',
                fieldLabel: 'OpenID',
                name: 'openid',
                grow: true,
                listeners: {
                    autosize: function(newWidth) {
                        console.log(newWidth);
                    },
                    focus: function(txtField) {
                        console.log('focus fired');
                        txtField.autoSize();
                    }
                }
            }
        ];
        me.callParent();
    }
});

Both of my event handlers fire. However, autosize only fires when the form is rendered; not when I try to manually call autoSize().


Any ideas?

[charris]

Changing the layout to something other than the default 'anchor' solved the problem. Example:

ZJiRz.jpg

I have an example on JSFiddle that anyone can try running/modifying if they have a similar problem and want to see how this works: http://jsfiddle.net/clint_harris/5wzjG/