Hybrid View

  1. #1
    Ext User
    Join Date
    Dec 2008
    Posts
    32
    Vote Rating
    0
    sptangirala is on a distinguished road

      0  

    Question problem in ie7

    problem in ie7


    Hi,
    The width of west panel is not proper in IE7. I have written the following,
    Code:
    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.
    Last edited by mystix; 24 Feb 2009 at 7:11 AM. Reason: moved to 2.x Help from Examples. post code in [code][/code] tags. see http://extjs.com/forum/misc.php?do=bbcode#code

  2. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    you can't use percentages in height.

    remove el from that west panel

  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  4. #4
    Ext User
    Join Date
    Dec 2008
    Posts
    32
    Vote Rating
    0
    sptangirala is on a distinguished road

      0  

    Question File upload display problem in ie7

    File upload display problem in ie7


    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,

    Code:
        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.

  5. #5
    Ext User
    Join Date
    Dec 2008
    Posts
    32
    Vote Rating
    0
    sptangirala is on a distinguished road

      0  

    Question fileupload display problen in ie7

    fileupload display problen in ie7


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

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    91
    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


    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)