Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Aug 2008
    Location
    Turin, Italy
    Posts
    21
    Vote Rating
    0
    paolocavelli is on a distinguished road

      0  

    Default [FIXED] FormPanel in a non active TabPanel: bad displacement

    [FIXED] FormPanel in a non active TabPanel: bad displacement


    I know it: there are many threads about this...
    I have a TabPanel with "deferredRender: false" and a FormPanel in a non active tab.
    The objects in the FormPanel are placed wrong (the size of the combos is not correcty calculated, I suppose).
    But if I nest the FormPanel in a card layout panel, all is right...
    Look at the following code:
    • tab1 is empty and is the active tab
    • tab2 contains a formPanel: bad rendering
    • tab3 contains a formPanel nested in a fit layout panel: bad rendering
    • tab4 contains a formPanel nested in a card layout panel: good rendering
    Is it possible to get the FormPanel to appear correctly without using the card layout?
    Thanks

    Code:
    <HTML>
    <HEAD>
    <TITLE>Title</TITLE>
    <link rel='stylesheet' type='text/css' href='js/ext-3.1.2/resources/css/ext-all.css' />
    <script type='text/javascript' src='js/ext-3.1.2/adapter/ext/ext-base.js'></script>
    <script type='text/javascript' src='js/ext-3.1.2/ext-all-debug.js'></script>
    </HEAD>
    <BODY CLASS=me_class>
    <style>
    .x-table-layout-cell {
        padding: 5px;
    }
    </style>
    <SCRIPT type='text/javascript'>
    
    Ext.onReady(function(){
    
        Ext.QuickTips.init();
    
        var mystore = [
            ['y', 'yes'],
            ['n', 'no']
            ];
    
        var tabPanelItems = [];
        tabPanelItems[tabPanelItems.length] = new Ext.Panel ({
                        title: 'tab 1',
                        layout: 'fit',
                        items: [
                            { html: 'tab 1' }
                        ]
                    });
        tabPanelItems[tabPanelItems.length] = new Ext.FormPanel ({
                        title: 'tab 2',
                        items: [{
                            layout:'table',
                            xtype:'container',
                            layoutConfig: {
                                columns: 3
                            },
                            items:[
                                { xtype:'label', text:'label1' },
                                { xtype: 'combo',
                                  store: mystore,
                                  name: 'o1',
                                  width: 250,
                                  mode: 'local',
                                  hideLabel: true
                                },
                                { xtype: 'textfield', hideLabel: true, name: 'n1', maxLength: 40, width: 250 }
                            ]
                        }]
                    });
        tabPanelItems[tabPanelItems.length] = new Ext.Panel ({
                        title: 'tab 3',
                        layout:'fit',
                        items:[
                            new Ext.FormPanel ({
                            items: [{
                                layout:'table',
                                xtype:'container',
                                layoutConfig: {
                                    columns: 3
                                },
                                items:[
                                    { xtype:'label', text:'label1' },
                                    { xtype: 'combo',
                                      store: mystore,
                                      name: 'o1',
                                      width: 250,
                                      mode: 'local',
                                      hideLabel: true
                                    },
                                    { xtype: 'textfield', hideLabel: true, name: 'n1', maxLength: 40, width: 250 }
                                ]
                            }]
                        })
                    ]
                });
        tabPanelItems[tabPanelItems.length] = new Ext.Panel ({
                        title: 'tab 4',
                        layout:'card',
                        activeItem:0,
                        items:[
                            new Ext.FormPanel ({
                            items: [{
                                layout:'table',
                                xtype:'container',
                                layoutConfig: {
                                    columns: 3
                                },
                                items:[
                                    { xtype:'label', text:'label1' },
                                    { xtype: 'combo',
                                      store: mystore,
                                      name: 'o1',
                                      width: 250,
                                      mode: 'local',
                                      hideLabel: true
                                    },
                                    { xtype: 'textfield', hideLabel: true, name: 'n1', maxLength: 40, width: 250 }
                                ]
                            }]
                        })
                    ]
                });
    
        var tabs = new Ext.TabPanel({
            activeTab: 0,
            region:'center',
            deferredRender: false,
            layoutOnTabChange: true,
            enableTabScroll:true,
            items: tabPanelItems
        });
    
        var win = new Ext.Viewport ({
            layout:  'border',
            layoutConfig: {
                minWidth: 800,
                minHeight: 600
            },
            items:[
                tabs
            ]
            });
    });
    </SCRIPT>
    </BODY>
    </HTML>

  2. #2
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    Table layout isn't an 'active' layout. It doesn't do measurements and try to size child elements, etc. You should have been able to drop in an hbox and have this work, but I did find an issue with the combo's measurement that I'm checking in a fix for now.

  3. #3
    Sencha - Sencha Touch Dev Team Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    21
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    [type]: fix
    [module]: TriggerField
    [id]:
    [desc]: TriggerField's getWidth will now make sure the resizeEl (wrap) is sized before measuring width. This allows combo boxes, etc. to be measured properly for active layouts.

Thread Participants: 1