1. #21
    Ext User
    Join Date
    Apr 2008
    Posts
    3
    Vote Rating
    0
    Alli is on a distinguished road

      0  

    Default


    I have anchor config, this is my code:


    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.

  2. #22
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

    Try this override:

    Code:
    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();
            }
        }
    });

  3. #23
    Ext User
    Join Date
    Apr 2008
    Posts
    3
    Vote Rating
    0
    Alli is on a distinguished road

      0  

    Default


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

  4. #24
    Sencha User
    Join Date
    Mar 2008
    Posts
    27
    Vote Rating
    0
    neoart is on a distinguished road

      0  

    Default


    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

  5. #25
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4
    Vote Rating
    0
    brian.moeskau is an unknown quantity at this point

      0  

    Default


    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).

  6. #26
    Ext JS Premium Member
    Join Date
    Aug 2007
    Posts
    10
    Vote Rating
    0
    floppy is on a distinguished road

      0  

    Default


    FYI. I added the following code to my FormPanel object:
    Code:
                            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.