Results 1 to 3 of 3

Thread: Field Set not working in IE

  1. #1

    Default Field Set not working in IE

    Hi,

    I am developing application using ext js 2.1 version. As i am new to ext js, i have taken the layout example and modifying this according to my requirement.

    I have defined my fieldset(newfieldset) with two columns and each column contain one textfield.(check my fieldset definition.)

    I want to put fieldset in one of my tabs. If i put fieldset in tab1,it is working fine. Able to see field set completely.

    And if i put the same in tab2/tab3, inside field set second column fields are not visible.

    Please see the below code:

    Code:
     
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
                    new Ext.BoxComponent({ // raw
                    region:'north',
                    el: 'north',
                    height:32,
                    title:'Application'
                    }),{
                        region:'south',
                        contentEl: 'south',
                        split:true,
                        height: 100,
                        minSize: 100,
                        maxSize: 200,
                        collapsible: true,
                        title:'South',
                        margins:'0 0 0 0'
                    }, {
                        region:'east',
                        title: 'East Side',
                        collapsible: true,
                        split:true,
                        width: 225,
                        minSize: 175,
                        maxSize: 400,
                        layout:'fit',
                        margins:'0 5 0 0'
                     },
                    new Ext.TabPanel({
                        region:'center',     
                        xtype: 'tabpanel',
                        deferredRender:false,
                        activeTab:0,
                        items:[{      
                            layout:'column',      
                            contentEl:'center1',
                            title: 'tab1',                        
                            autoScroll:true,
                            buttonAlign:'center',      
                            bodyStyle:"padding:50px 20px 0",
                        items: [{
                            columnWidth:0.5,
                            layout: 'form',
                            height:360,         
                            bodyStyle:"padding:50px 20px 0",
                            buttonAlign:'center',         
                            labelWidth: 120,
                            labelAlign: 'right',
                            items:[textbox1,textbox2]
                       },{
                            columnWidth:0.5,
                            layout: 'form',
                            height:360, 
                            labelWidth: 120,
                            width:500
                          //items:[newfieldset] //WORKING FINE - able to see complete fieldset
                      }]
                        },{
                            contentEl:'center2',
                            title: 'tab2',
                            autoScroll:true,
                            width:500,
                            layout:'column',
                            items: [{
                              columnWidth:0.5,
                              layout: 'form',
                              height:360,         
                              bodyStyle:"padding:50px 20px 0",        
                              labelWidth: 120,
                              items:[newfieldset] // NOT WORKING - not able to see the second 
                                                        column field
                        },{
                            columnWidth:0.5,
                            layout: 'form',
                            height:360, 
                            labelWidth: 120
                      }]
                        },{
                            contentEl:'center3',
                            layout:'column',
                            title: 'tab3',
                            autoScroll:true,
                            width:600,
                           items:[newfieldset] // NOT WORKING -- not able to see the second 
                                                        column field
                        }]
                    })
                 ]
            });
    and my fieldset is:

    Code:
    var xxx =  new Ext.form.TextField({
             fieldLabel:"xxx",
             name:"xxxname",
             id:"xxxID",
             minLength:6,
             maxLength:6,
             width:145
      });
      var yyy=  new Ext.form.TextField({
             fieldLabel:"yyy",
             name:"yyyname",
             id:"yyyID",
             minLength:6,
             maxLength:6,
             width:145
      });
     
      var newfieldset= new Ext.form.FieldSet({
       layout:'column',
       id:'newfieldsetID',
       title: 'Categories',
       width:550,
       height:300,
       items: [{
         columnWidth:0.70,
         layout: 'form',
         height:330,
         labelAlign: 'left',
         items :[xxx]
         },{
         columnWidth:0.30,
         layout: 'form',
         hideLabel:true,
         height:330,
         items :[yyy]
        }]      
     });
    I am using IE 6.0 version.
    Don't know what is the problem? The same is working in fine in Fire Fox.

  2. #2
    Sencha Premium User
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,258

    Default

    Try adding:

    Code:
    layoutOnTabChange: true
    To your tab panel config.

  3. #3

    Default [Solved]

    Hi Evant,

    Thanx for the reply. It is working now.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •