[2.0.x][FIXED] Resize Problem FormPanel in IE

[Alli]

I have anchor config, this is my code:

 
var form = new Ext.FormPanel({        
    labelAlign: 'top',
    layout: 'column'
});    
var rightPanel = new Ext.Panel({
    columnWidth: 1
});
var leftPanel = new Ext.Panel({
    width: 200
});
var L1 = new Ext.Panel({
    layout: 'form',
    labelAlign: 'left',
    frame: true,
    items: [{
        xtype:'checkbox',
        hideLabel: true,
        boxLabel: 'google'
    }]
});
 
var R1 = new Ext.Panel({
    frame: true,
    layout: 'form',
    items: [{
        fieldLabel:'title',
        xtype:'textfield',
        anchor:'100%'
    }]
});
var editor = new Ext.form.HtmlEditor({
    fieldLabel:'content',
    height:300,
    anchor:'100%',
    id:'editor'
});
editor.on("initialize",function () {
   var resizer = new Ext.Resizable(editor.getResizeEl(),{
       handles:"s",
       pinned:true
   });
   editor.getResizeEl().on('resize',function() {
       editor.setSize(editor.wrap.getSize());
   });            
});
editor.on("editmodechange",function () {
   editor.setSize(editor.wrap.getSize());
});
 
form.add(leftPanel);                        
form.add(rightPanel);
R1.add(editor);
rightPanel.add(R1);
leftPanel.add(L1);    
center.activate(center.add(form));    
form.doLayout();

Without your patch, once rightpanel get stretched, it doesn't shrink back in IE but not FF. With patch panel shrinks on both but editor and textfield doesn't get shrinked. I tested 2.1, problem exists.

By the way in IE7 it's not possible to make htmlEditor smaller with this resize code. It's just possible to make it bigger. It works in FF fine.

[Animal]

ColumnLayout does not call doLayout on each column. I think this is an Ext bug.

Try this override:

Ext.override(Ext.layout.ColumnLayout, {
    onLayout : function(ct, target){
        var cs = ct.items.items, len = cs.length, c, i;

        if(!this.innerCt){
            target.addClass('x-column-layout-ct');

            // the innerCt prevents wrapping and shuffling while
            // the container is resizing
            this.innerCt = target.createChild({cls:'x-column-inner'});
            this.innerCt.createChild({cls:'x-clear'});
        }
        this.renderAll(ct, this.innerCt);

        var size = target.getViewSize();

        if(size.width < 1 && size.height < 1){ // display none?
            return;
        }

        var w = size.width - target.getPadding('lr') - this.scrollOffset,
            h = size.height - target.getPadding('tb'),
            pw = w;

        this.innerCt.setWidth(w);
        
        // some columns can be percentages while others are fixed
        // so we need to make 2 passes

        for(i = 0; i < len; i++){
            c = cs[i];
            if(!c.columnWidth){
                pw -= (c.getSize().width + c.getEl().getMargins('lr'));
            }
        }

        pw = pw < 0 ? 0 : pw;

        for(i = 0; i < len; i++){
            c = cs[i];
            if(c.columnWidth){
                c.setSize(Math.floor(c.columnWidth*pw) - c.getEl().getMargins('lr'));
            }
            if (c.doLayout) c.doLayout();
        }
    }
});

[Alli]

I added your code but problem still exists in IE7, but it works fine in FF2.

[neoart]

Dear All:
I also found that Resizable is not workable in IE6/IE7,but workable in Firefox
I placed a columnlayout in an absolute-layout panel
and registrate a child of that columnLayout tobe Resizabe object.
Didi I miss something? (I am using Ext2.1,also pluse the code post by Animal)
Thanks for any reply

Regards

[brian.moeskau]

The original issue in this thread has been resolved (Animal's FormPanel fix from page 1 has been applied in SVN). I also added a fix in Window that will call doLayout on window resize.

Alli's code is missing layouts in several places because of extraneous panel nesting. If anyone has other layout-related issues, please post a new thread with a working test case.

(Note that you cannot generally just stick a resizable component into a layout and expect that the layout will adjust to its resizes. You'll most likely have to write code that syncs up your container after the resizable object has been resized).

[floppy]

FYI. I added the following code to my FormPanel object:

                        listeners: {
                            resize: function() {
                                if (Ext.isIE6) {
                                    MY_FIELDS.hide();
                                    MY_FIELDS.show();
                                }
                            }
                        }

Now I can resize my FormPanel in IE6 without any Ext.form.Fields components disappearing.