Question

I have a composite field with two textfield items. The first textfield’s grow property is set to true. When the first textfield’s width autoresize, it overlaps the field to the right. I would like the succeeding items to adjust/move it’s position to the right as the preceeding field grows.
e.g

  new Ext.form.CompositeField({
       autoHeight: true
       , autoWidth: true
       , items:[{
           xtype:'textfield'
           , flex: 1
           , growMax: 125
           , growMin: 80
           , width: 80
           , grow: true
           , listeners: {
               'autoSize': function () { 
               // what should I do here??  i tried accessing the 
               // ownerCt syncSize() but didn't work
            }            
        }}
        , {
           xtype:'textfield'
           , flex: 1
           , width: 80
        }]
     });

Thank you in advance.

Answer 1

This seem to be bug of extjs. However, I ‘ve found workaround:

    'autoSize': function () { 
           if (this.width == this.el.dom.offsetWidth)
               return;
           this.width = this.el.dom.offsetWidth;
           this.ownerCt.doLayout();
        }

Here is fiddle