Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    May 2008
    Posts
    180
    Vote Rating
    0
    archmisha is on a distinguished road

      0  

    Default [FIXED-202] HtmlEditor - Source Edit mode - autoHeight

    [FIXED-202] HtmlEditor - Source Edit mode - autoHeight


    When setting the height attribute of the HtmlEditor to autoHeight (and not some static number).
    Then the regular view is ok.
    But when switching to source edit view, it gets crazy and takes height of 300px.

  2. #2
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    6
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


    Thanks for the report.

    Please post in the format requested here:
    http://extjs.com/forum/showthread.php?t=71015

    Need a working test case, and information about which browser this happens with, etc. Screenshot would also be helpful as I'm not sure what 'crazy' means exactly.

  3. #3
    Sencha User
    Join Date
    May 2008
    Posts
    180
    Vote Rating
    0
    archmisha is on a distinguished road

      0  

    Default


    Following is a modified code of examples\form\dynamic.js
    Form 3 is the relevant one.

    Code:
    /*!
     * Ext JS Library 3.0.0
     * Copyright(c) 2006-2009 Ext JS, LLC
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
    
        // turn on validation errors beside the field globally
        Ext.form.Field.prototype.msgTarget = 'side';
    
        var bd = Ext.getBody();
    
        /*
         * ================  Simple form  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
    
    
        var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
    
            items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }, new Ext.form.TimeField({
                    fieldLabel: 'Time',
                    name: 'time',
                    minValue: '8:00am',
                    maxValue: '6:00pm'
                })
            ],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        simple.render(document.body);
    
        
        /*
         * ================  Form 2  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
    
        var fsf = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            title: 'Simple Form with FieldSets',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
    
            items: [{
                xtype:'fieldset',
                checkboxToggle:true,
                title: 'User Information',
                autoHeight:true,
                defaults: {width: 210},
                defaultType: 'textfield',
                collapsed: true,
                items :[{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last'
                    },{
                        fieldLabel: 'Company',
                        name: 'company'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }
                ]
            },{
                xtype:'fieldset',
                title: 'Phone Number',
                collapsible: true,
                autoHeight:true,
                defaults: {width: 210},
                defaultType: 'textfield',
                items :[{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }
                ]
            }],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        fsf.render(document.body);
    
        /*
         * ================  Form 3  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
    
    
        var top = new Ext.FormPanel({
            labelAlign: 'top',
            frame:true,
            title: 'Multi Column, Nested Layouts and Anchoring',
            bodyStyle:'padding:5px 5px 0',
            width: 600,
            items: [{
                layout:'column',
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first',
                        anchor:'95%'
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        anchor:'95%'
                    }]
                }]
            },{
                xtype:'htmleditor',
                id:'bio',
                fieldLabel:'Biography',
                //height:200,                // <=====
                height: 'autoHeight',     // <===============
                anchor:'98%'
            }],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        top.render(document.body);
    
    
        /*
         * ================  Form 4  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
    
    
    
        var tabs = new Ext.FormPanel({
            labelWidth: 75,
            border:false,
            width: 350,
    
            items: {
                xtype:'tabpanel',
                activeTab: 0,
                defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
                items:[{
                    title:'Personal Details',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        value: 'Jack'
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'Slocum'
                    },{
                        fieldLabel: 'Company',
                        name: 'company',
                        value: 'Ext JS'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }]
                },{
                    title:'Phone Numbers',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }]
                }]
            },
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        tabs.render(document.body);
    
    
    
        /*
         * ================  Form 5  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
    
        var tab2 = new Ext.FormPanel({
            labelAlign: 'top',
            title: 'Inner Tabs',
            bodyStyle:'padding:5px',
            width: 600,
            items: [{
                layout:'column',
                border:false,
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first',
                        anchor:'95%'
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        anchor:'95%'
                    }]
                }]
            },{
                xtype:'tabpanel',
                plain:true,
                activeTab: 0,
                height:235,
                defaults:{bodyStyle:'padding:10px'},
                items:[{
                    title:'Personal Details',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        value: 'Jack'
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'Slocum'
                    },{
                        fieldLabel: 'Company',
                        name: 'company',
                        value: 'Ext JS'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }]
                },{
                    title:'Phone Numbers',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',
    
                    items: [{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }]
                },{
                    cls:'x-plain',
                    title:'Biography',
                    layout:'fit',
                    items: {
                        xtype:'htmleditor',
                        id:'bio2',
                        fieldLabel:'Biography'
                    }
                }]
            }],
    
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
    
        tab2.render(document.body);
    });
    Attached Images

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    94
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    height:'autoHeight' -> autoHeight:true

    (but this doesn't fix the problem)

  5. #5
    Ext User
    Join Date
    Aug 2009
    Posts
    22
    Vote Rating
    0
    nandubochkar is on a distinguished road

      0  

    Default i am also getting the same problem any one help me

    i am also getting the same problem any one help me


    need help ?

    Quote Originally Posted by archmisha View Post
    Following is a modified code of examples\form\dynamic.js
    Form 3 is the relevant one.

    Code:
    /*!
     * Ext JS Library 3.0.0
     * Copyright(c) 2006-2009 Ext JS, LLC
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    Ext.onReady(function(){
     
        Ext.QuickTips.init();
     
        // turn on validation errors beside the field globally
        Ext.form.Field.prototype.msgTarget = 'side';
     
        var bd = Ext.getBody();
     
        /*
         * ================  Simple form  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
     
     
        var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
     
            items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }, new Ext.form.TimeField({
                    fieldLabel: 'Time',
                    name: 'time',
                    minValue: '8:00am',
                    maxValue: '6:00pm'
                })
            ],
     
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
     
        simple.render(document.body);
     
     
        /*
         * ================  Form 2  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});
     
        var fsf = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            title: 'Simple Form with FieldSets',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
     
            items: [{
                xtype:'fieldset',
                checkboxToggle:true,
                title: 'User Information',
                autoHeight:true,
                defaults: {width: 210},
                defaultType: 'textfield',
                collapsed: true,
                items :[{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last'
                    },{
                        fieldLabel: 'Company',
                        name: 'company'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }
                ]
            },{
                xtype:'fieldset',
                title: 'Phone Number',
                collapsible: true,
                autoHeight:true,
                defaults: {width: 210},
                defaultType: 'textfield',
                items :[{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }
                ]
            }],
     
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
     
        fsf.render(document.body);
     
        /*
         * ================  Form 3  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});
     
     
        var top = new Ext.FormPanel({
            labelAlign: 'top',
            frame:true,
            title: 'Multi Column, Nested Layouts and Anchoring',
            bodyStyle:'padding:5px 5px 0',
            width: 600,
            items: [{
                layout:'column',
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first',
                        anchor:'95%'
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        anchor:'95%'
                    }]
                }]
            },{
                xtype:'htmleditor',
                id:'bio',
                fieldLabel:'Biography',
                //height:200,                // <=====
               height: 'autoHeight',     // <===============
                anchor:'98%'
            }],
     
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
     
        top.render(document.body);
     
     
        /*
         * ================  Form 4  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});
     
     
     
        var tabs = new Ext.FormPanel({
            labelWidth: 75,
            border:false,
            width: 350,
     
            items: {
                xtype:'tabpanel',
                activeTab: 0,
                defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
                items:[{
                    title:'Personal Details',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',
     
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        value: 'Jack'
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'Slocum'
                    },{
                        fieldLabel: 'Company',
                        name: 'company',
                        value: 'Ext JS'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }]
                },{
                    title:'Phone Numbers',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',
     
                    items: [{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }]
                }]
            },
     
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
     
        tabs.render(document.body);
     
     
     
        /*
         * ================  Form 5  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});
     
        var tab2 = new Ext.FormPanel({
            labelAlign: 'top',
            title: 'Inner Tabs',
            bodyStyle:'padding:5px',
            width: 600,
            items: [{
                layout:'column',
                border:false,
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first',
                        anchor:'95%'
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        anchor:'95%'
                    }]
                }]
            },{
                xtype:'tabpanel',
                plain:true,
                activeTab: 0,
                height:235,
                defaults:{bodyStyle:'padding:10px'},
                items:[{
                    title:'Personal Details',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',
     
                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        value: 'Jack'
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'Slocum'
                    },{
                        fieldLabel: 'Company',
                        name: 'company',
                        value: 'Ext JS'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }]
                },{
                    title:'Phone Numbers',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',
     
                    items: [{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }]
                },{
                    cls:'x-plain',
                    title:'Biography',
                    layout:'fit',
                    items: {
                        xtype:'htmleditor',
                        id:'bio2',
                        fieldLabel:'Biography'
                    }
                }]
            }],
     
            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });
     
        tab2.render(document.body);
    });

  6. #6
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Fixed in svn 6052.