Firefox 10 and auto height

[hanni ball]

I have been using Firefox 10 and have found the bug in the ExtJS 3.4. I have code for the form which is as follows:

formBeschreibungKategorie = new Ext.form.FormPanel({
     width: 900,
    height: 800,
            // autoHeight: true,
            url: '/admin/hotelkategories/setdescription/',
            fileUpload: true,
            title: 'Beschreibung der Kategorie',
            frame: true,
            layout: 'column',
            labelWidth: 130,
            items: [{
                columnWidth: 0.7,
                layout: 'form',
                bodyStyle: 'padding: 10px;',
                    items:[{
                            xtype: 'textfield',
                            id: 'headline',
                            width: 400,
                            name: 'headline',
                            fieldLabel: 'Überschrift',
                            helpText: 'Überschrift der Kategoriebeschreibung',
                            allowBlank: false
                        },{
                            xtype: 'textarea',
                            id: 'description_short',
                            height: 75,
                            width: 400,
                            name: 'description_short',
                            fieldLabel: 'Kurzbeschreibung',
                            helpText: 'Kurzbeschreibung der Kategorie',
                            allowBlank: false
                        },{
                            xtype: 'htmleditor',
                            id: 'description_long',
                            height: 200,
                            width: 400,
                            fieldLabel: 'Beschreibung der Kategorie',
                            helpText: 'Beschreibung der Kategorie'
                        },{
                            xtype: 'label',
                            text: 'nur Bilder im *.jpg Format'
                        },{
                            xtype: 'textfield',
                            id: 'kategorieImage',
                            width: 400,
                            inputType: 'file',
                            fieldLabel: 'Bild',
                            helpText: 'Bild, Breite 150px'
                }]
            },{
                columnWidth: 0.3,
                bodyStyle: 'padding: 10px;',
                items: [{
                    xtype: 'box',
                    autoEl: {
                        tag: 'div',
                        html: '<img id="kategoriePic" src="/images/kategorieImages/kategoriePic_' + memoryCategoryId + '.jpg">'
                    }
                }]
            }],
            buttons: [{
                text: 'speichern der Kategoriebeschreibung',
                tooltip: 'speichern der Kategoriebeschreibung',
                handler: function(){

                    formBeschreibungKategorie.getForm().submit({
                        params: {
                            language: memorySprache,
                            hotelId: memoryHotelId,
                            kategorieId: memoryCategoryId
                        },
                        success: function(){
                            var now = new Date();
                            Ext.getDom('kategoriePic').src = '/images/kategorieImages/kategoriePic_' + memoryCategoryId + '.jpg?' + now.getTime();
                        }
                    });
                }
            }]
        });

And the following is the code for the panel:

tabs = new Ext.TabPanel({
            activeTab: 0,
            renderTo: 'tabs',
            padding: 10,
            height: 800,
            // autoHeight: true,
            id: 'kategorieTabs',
            items: [{
                        xtype: 'panel',
                        title: 'Kategorie Stammdaten',
                        height: 500,
                        id: 'tabKategorieStammdaten',
                        items: [formKategorieHotel]
                    },{
                        xtype: 'panel',
                        title: 'Sprache',
                        disabled: true,
                        id: 'tabSprache',
                        height: 500,
                        items: [formBeschreibungKategorie]
                    }]
        });

If you set value for the auto height then form is not visible in the panel. This happens only in the Firefox 10. I have used Firefox from 3.x.x and internet explorer 9.x. it was working properly there. Have you encountered the same with your Firefox 10 browser .

[Suigetsu]

Firefox 10 doesn’t support it. You should check it with the Ext JS 4. You can send the bug report of this with the following format. You have to fill the blanks with your information like Ext JS version that you are using, browser and the tests that you made. They will then use this information to make correction . You can give any additional information if you wish. There is separate format given below. Here is the format for you:

REQUIRED INFORMATION


        Ext version tested:
        
Ext 4.____ rev ____

        Browser versions tested against:
        
IE8
FF3 (firebug 1.3.0.10 installed)
Safari 4

        DOCTYPE tested against:
        
____

        Description:
        
Describe the problem in greater detail here, summarizing the behavior.

        Steps to reproduce the problem:
     

        The result that was expected:
     

        The result that occurs instead:


        Test Case:

        

	
	
            <<insert working code to reproduce the report >>


        HELPFUL INFORMATION


        Screenshot or Video:
        
attached

        See this URL for live test case: http://


        Debugging already done:
        
none

        Possible fix:
        
not provided

        Additional CSS used:
        
only default ext-all.css
custom css (include details)

        Operating System:
        
________
WinXP Pro

[AliyaK]

Yes I have also found this .Ext JS 4 doesn’t support and there is a trouble using Ext JS 3.x version. There must be some kind of issue with this. I have paid for this version 4 and have bought it officially after the release. Now I come to know that product is not ready fully. I have also renewed my license but not able to use this product. So I am left with the version 3 only. I don’t understand why they have not updated this with bug fix.

[KirtiPatel]

I have created the bug report using the above format. Here is the example for you.

REQUIRED INFORMATION
Ext version tested:  Ext 4.0.2
Browser versions tested:
  Chrome 11
  IE8
Description:
No effects seen on Ext.tab.Bar - minTabWidth 

Steps to check the problem:
 Create an Ext.TabPanel where the tabBar is configured with a minTabWidth

The result expected:
Tab width should be at least as much as the configured width
The result that was found:
 Minimum width is getting ignored and if text is short then tab looks too narrow.
Test Case code:
   Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 200,
        renderTo: Ext.getBody(),
        
        //this is being ingnored
        tabBar: {
            minTabWidth: 150
        },
        
        //shown some items to show the problem
        items: [
            {
                title: 'Short'
            },
            {
                title: 'This is a much longer tab title'
            }
        ]
    });


HELPFUL INFORMATION
Screenshot or Video:
provide any video or images that will describe your problem

Debugging done:  none
Possible fix: not provided

Additional CSS used:
only default ext-all.css

Operating System:
My operating system was Mac OS X.

[PhoebeM]

This could also be possible because Firefox has now turned to version 10. I think some code should be changed now. I have noted this and it looks doubtful:

i

sGecko :true
isGecko2:false
isGecko3:false

This line still exist in ext-all-debug for 3.4.0

Ext.isGecko ? "ext-gecko " + (Ext.isGecko2 ? 'ext-gecko2' : 'ext-gecko3')

This looks doubtful because ext-gecko3 is added as a class in CSS but still gecko3 has value assigned as “false”.