Hybrid View

  1. #1
    Sencha User
    Join Date
    Feb 2008
    Posts
    36
    Vote Rating
    0
    johnrembo is on a distinguished road

      0  

    Question [2.3.0] tabPanel + table layout + combo = chaotic render in IE

    [2.3.0] tabPanel + table layout + combo = chaotic render in IE


    Hello,

    the following code in IE results in:
    1. detached combo icons
    2. negative top margin for input element
    3. affects datefields as well


    Code:
    Ext.onReady(function(){
    
        var failForm = new Ext.FormPanel({
          title:'Tab-2',
    	    layout: 'fit',
          items: [{
            xtype:'fieldset',
            layout:'table',
            layoutConfig: {
              columns: 2
            },
            defaults:{width:300,autoHeight:true},
            items:[{
                xtype:'fieldset',
                title: 'Left Fieldset',
                defaults:{xtype:'combo'},
                items:[{
                        fieldLabel: 'Field-1'
                },{
                        fieldLabel: 'Field-2'
                },{
                        fieldLabel: 'Field-3'
                },{
                        fieldLabel: 'Field-4'
                }]
            },{
                xtype:'fieldset',
                title: 'Right Fieldset',
                defaults:{xtype:'combo'},
                items:[{
                        fieldLabel: 'Field-5'
                },{
                        fieldLabel: 'Field-6'
                },{
                        fieldLabel: 'Field-7'
                },{
                        fieldLabel: 'Field-8'
                }]
            }]
          }]
        });
    
        var emptyTab = new Ext.Panel({
          title: 'Tab-1',
          layout:'fit'
        });
        
        var displayer = new Ext.TabPanel({
          id: 'displayer',
          activeTab: 0,
          region:'center',
          deferredRender: false,
          items: [emptyTab,failForm]
        });
        
        var layout = new Ext.Window({
            id: 'major-window',
            title: 'window',
            layout: 'border',
            width:650,
            height:250,
            items: [displayer]
        });
        layout.show();
    });
    result:


    however - on mouse-over event it self-corrects:


    If active-tab is 'Tab-2', or table layout is replaced with column laoyt, or if formPanel gets rendered directly, or if we look into how FF sees it -it looks fine:


    any solutions/hacks so far for this?
    table layout is a must for me.

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


    1. Why do you have a fieldset in your formpanel if you are not really using it? Just make the formpanel itself layout:'table'.
    2. Wouldn't layout:'column' be better suited for this?
    3. If the tabs of a tabpanel contain layouts then you need to add the following lines to the tabpanel config:
    Code:
    layoutOnTabChange:true,
    defaults: {hideMode: 'offsets'}

  3. #3
    Sencha User
    Join Date
    Feb 2008
    Posts
    36
    Vote Rating
    0
    johnrembo is on a distinguished road

      0  

    Thumbs up


    Quote Originally Posted by Condor View Post
    1. Why do you have a fieldset in your formpanel if you are not really using it? Just make the formpanel itself layout:'table'.
    2. Wouldn't layout:'column' be better suited for this?
    3. If the tabs of a tabpanel contain layouts then you need to add the following lines to the tabpanel config:
    Code:
    layoutOnTabChange:true,
    defaults: {hideMode: 'offsets'}
    Condor, thanx for the fix (if we can name it so)

    I'm sorry I've missed a note i tabPanel's documentation reg. hideMode. However, you should consider adding one more note to documentation reg. layoutOnTabChange.

    an example I've provided above is a shortened version of a huge window manager, where table layout is necessary due to presence of the dynamic content. Otherwise - yes - column layout would have been chosen.

  4. #4
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by johnrembo View Post
    an example I've provided above is a shortened version of a huge window manager, where table layout is necessary due to presence of the dynamic content.
    where's the dynamic content?
    and why would it dictate the use of a table layout?

  5. #5
    Sencha User
    Join Date
    Feb 2008
    Posts
    36
    Vote Rating
    0
    johnrembo is on a distinguished road

      0  

    Default


    I doubt you're interested in 130KB Ext app

    Depending on the content a customer filters - different table layouts are provided (different column spanning etc...)

    if speaking globaly - what's wrong with a table layout you're both forcing the use of column layout? rendering time/resources, memory utilization or else?

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    96
    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'm not completely sure what everybody has against TableLayout. The only problem you can have with TableLayout is that cell sizes won't be consistent across different browsers.

  7. #7
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    74
    Vote Rating
    1
    cginzel is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    1. Why do you have a fieldset in your formpanel if you are not really using it? Just make the formpanel itself layout:'table'.
    2. Wouldn't layout:'column' be better suited for this?
    3. If the tabs of a tabpanel contain layouts then you need to add the following lines to the tabpanel config:
    Code:
    layoutOnTabChange:true,
    defaults: {hideMode: 'offsets'}
    Condor, I'm confused by your instruction here. I'm confused about the documentation too I guess. but why would you need layoutOnTabChange:true if you have defaults: {hideMode: 'offsets'}? the docs seem to say that any setting other than display gets layout commands even when the tab is not active.

    Note: the default of 'display' is generally preferred since items are automatically laid out when they are first shown (no sizing is done while hidden).
    so you wouldn't need the layoutOnTabChange set to true which seems to be the case from my testing. but I have a lot of tabs and so I don't want them all to get layout changes when hidden so I would think I need to just set layoutOnTabChange:true, but it seems to not work. Meaning it doesn't force the layout adjustments when the tab gets focus. i'm using v3.0.2

  8. #8
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    74
    Vote Rating
    1
    cginzel is on a distinguished road

      0  

    Default


    Sorry Condor, I confirmed that layoutOnTabChange:true does in fact force doLayout, but for some reason the border layout I have within is not working right. but I still stand by the question in the first half of my post above.

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


    So you say the API docs mention that a component hidden with hideMode:'offsets' always gets layed out? This is not true. Can you point out the location in the API docs where you found this?

  10. #10
    Ext JS Premium Member
    Join Date
    Dec 2007
    Posts
    74
    Vote Rating
    1
    cginzel is on a distinguished road

      0  

    Default


    I quoted it above, but here is a more complete quote from the TabPanel docs:

    hideMode : String
    How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset p...

    How this component should be hidden. Supported values are 'visibility' (css visibility), 'offsets' (negative offset position) and 'display' (css display).

    Note: the default of 'display' is generally preferred since items are automatically laid out when they are first shown (no sizing is done while hidden).
    Component
    so I read that last note to say, only when the hideMode is 'display' do the layout events not percolate to the hidden panel.

Thread Participants: 3