problem in ie7

[sptangirala]

Hi,
The width of west panel is not proper in IE7. I have written the following,

var viewport = new Ext.Viewport({
        layout:'border',    
        items: [
                    new Ext.BoxComponent({
                        region:'north',
                        el: 'North',
                        height:'10%',
                        autoHeight:true 
                     }),                                         
                    new Ext.Panel({  
                        id: 'westPanel',                      
                        el:'West',
                        region: 'west',
                        title:'Select',
                        layout: 'fit',
                        width: 427,                        
                        minSize: 427,
                        split: true,                        
                        collapsible: true,
                        items:[ tabs ]
                    }),
                     {
                         id:'center-panel',
                         region:'center',
                         collapsible: true,
                         layout:'fit',
                         items: [grid]             
                     },                
                    southPanel  
        ]
   }); 

i have written the following code for tabs in west panel,


    var tabs = new Ext.ExtTabPanel({
        id:'tabs1',
        renderTo: 'WestTab',
        activeTab: activeTabPanel,        
        layoutOnTabChange:true,
        items:[ 
            new Ext.Panel({
             ContentEl:'CenterTab1',
             title:'Browse',
             layout: 'fit',
             items:[ treePanel ]
            }),  
            new Ext.Panel({
                contentEl:'CenterTab2',
                title:'Query',  
                layout: 'fit',
                buttonAlign: 'center',            
                items: [accordionPanel]
           }),new Ext.Panel({
                    ContentEl:'CenterTab3',
                 title:'Import',
                 layout: 'fit',                 
                 frame: true,    
                 hideMode:'offsets',
                 items: [{
                     xtype: 'panel',
                     bodyCfg: {tag: 'center',  style:'{background:white;}'},                                          
                     items: [importPanel]
                 }]
           }),new Ext.Panel({
             ContentEl:'CenterTab4',
             title:'Export',
             layout: 'absolute',             
             border: false,
             hideMode:'offsets',
             items:[{
                 x: -20,
                y: 10,
                width: 350,               
                 ContentEl: 'ExportForm',
                 items:[fp1]
             },
             {
                 x: -160,
                y: 60,
                 width: 360,
                 ContentEl: 'ExportDetails',
                 items: [formP1]
             }]
            }),new Ext.Panel({
                ContentEl: 'CenterTab5',
                title: 'Save',
                layout: 'absolute',
                border: false,
                hideMode:'offsets',
                items: [{
                    x: -5,
                    y:10,
                    width: 350,
                    ContentEl: 'saveFields',
                    items: [saveFieldsPanel]
                },{
                    x: -90,
                    y:60,                    
                    width: 360,
                    ContentEl: 'saveButtons',
                    items: [saveButtonsPanel]
                }]
            })]
                   
    });

Someone please help. I have tried for lot of time i could not get it. With Firefox there are no issues.

[jay@moduscreate.com]

you can't use percentages in height.

remove el from that west panel

[jay@moduscreate.com]

remove renderTo from your tab panel. Remove contentEL and ContentEl from every container that has items.

[sptangirala]

Thank you very much jgarcia for the reply.

But there is a problem with file upload in ie7 itself. It shows up well in firefox. The way i have done is,

    var fp = new Ext.FormPanel({        
        fileUpload: true,
        layoutOnTabChange: true,        
        labelAlign: 'right',
        layout: 'absolute',
        height: 50,
        width : 330, 
        border: false,
        defaults: {           
            allowBlank: false,
            msgTarget: 'qtip'
        },
        items: [{
            xtype: 'label',
            x: 25,
            y: 18,
            text: 'Import File :'
        },{
            xtype: 'fileuploadfield',
            id: 'formfile',  
            width: 225,  
            x: 88,
            y: 15,        
            emptyText: 'Select file to upload',            
            name: 'FilePath',
            buttonCfg: {
                text: '',                
                iconCls:'upload-icon'
            }
         }
        ]});

var formP = new Ext.FormPanel({        
        fileUpload: false,        
        border: false,
        autoWidth: true,        
        labelAlign: 'right',        
        defaults: {
            anchor: '100%',
            allowBlank: false,
            msgTarget: 'qtip',
            border: false
        },
        items: [{
            xtype: 'fieldset',
            id: 'headingid',
            autoHeight: false,            
            height:40,            
            border: false,            
            defaultType: 'checkbox',
            items: [{
                name: 'heading',
                id: 'checkid',
                labelSeparator: '',
                checked: true,                
                boxLabel: 'First Row contains Header'
            }]
        },{
               xtype: 'panel',                                  
               items: [{
                   xtype: 'progress',
                   id: 'pbar',
                   hidden: true,
                   text: 'Uploading...'
               },{                    
                   xtype: 'panel',                   
                   layout: 'fit',
                   id: 'ImportGridPanel'                    
               }]
        }]       
    });

var importPanel = new Ext.Panel({                
                layout:'table',
                layoutConfig: {columns:2},         
                items:[{                                             
                       width:320,                       
                       items: [fp]                                          
                },{                  
                   width:83,
                   buttons: [{
                           buttonAlign: 'center',
                           text: 'Import'                           
                   }]
                },{                   
                    width:410,
                    colspan:2,
                    items: [formP]                    
                }]
        });

Please help.

[sptangirala]

Can some bail me out from this. Please...

[Condor]

I see no difference in the file upload between IE7 and FF3.

(the only difference is that empty panels have a height in IE7 and zero height in FF3)

[sptangirala]

Thanks very much Condor for the reply.
As rightly mentioned by you there is no difference. It was with setting width incorrectly that i faced the issue.

Thanks,
Sai

[sharanya]

I am facing issue with IE7, panel table layout items.

I am removing the items from the table panel by removeAll().
But it looks like the panel show some default height in IE7. So next time, the items are laid out after some portion in the panel.
Though I set the panel height to 0, by panel.setHeight(0); the issue still persists.

Any help would be appreciated

Thanks