Threaded View

  1. #1
    Ext User
    Join Date
    Nov 2007
    Posts
    4
    Vote Rating
    0
    theturtle32 is on a distinguished road

      0  

    Default [2.0rc1] Combo Fields in a hidden tab render incorrectly with deferredRender: false

    [2.0rc1] Combo Fields in a hidden tab render incorrectly with deferredRender: false


    Hey, all.

    I'm having a major problem using combo fields, date fields, time fields, etc., in a tabpanel when deferredRender is set to false.

    I MUST use deferredRender: false.
    I have one over-arching form that contains the tabpanel, all the tabs, and form fields. All fields on every tab should be submitted at once with the form. Additionally, I use the 'load' action to populate the data from JSON returned by the server.

    If I use deferredRender: true, when the load action is called, any fields contained by a tab that has not yet been shown do not get populated because they do not yet exist.

    The problem is that the width of the field is not rendered correctly, presumably because the sizing and layout of the panel contained in a tab that has not yet been displayed has not been calculated by the time the form is added to it. That is just my best guess, since I don't know much about the Ext internals.

    deferredLayout: false should make the TabPanel set up all the sizing and layout for panels even if they have not yet been displayed.

    Additionally, calling doLayout() on the FormPanel container, the TabPanel, or the Panel containing the form in question after it has been rendered and displayed does nothing.

    I have posted a simplified example on my website at http://www.codecomposer.net/ext/examples/tabs/tabs.html
    I wrote the example javascript to plug into the tabs.html example provided with Ext 2.0rc1.

    For now, my fallback is to use traditional, hand-coded HTML forms in the tabpanel.

    I've attached two screenshots.
    Picture 1.jpg is the result in Safari 3.0.4 beta (Mac)
    Picture 2.jpg is the result in Firefox 2.0.0.10 (Mac)

    I'm not even going to bother targeting Firefox on mac --- there are WAY too many problems with Ext running in Firefox 2 for mac. Most all of them are Mozilla's fault and I've submitted some bug reports there, but I doubt anything will be done about them with FF3's imminent release. Firefox 2 on Linux is worse still -- pretty much completely unusable with a heavy Ext app due to slow-as-molasses speeds.


    Here is the code:
    Code:
    Ext.onReady(function(){
        /* =========================================
            First Tab Set uses deferredRender: true
            This works correctly.
    	   ========================================= */
        var tabs1 = new Ext.FormPanel({
    		renderTo: document.body,
    		title: 'Form Test',
    		url: '/',
    		width: 350,
    		height: 180,
    		layout: 'fit',
    		items: [
    			{
    				xtype: 'tabpanel',
    				activeTab: 0,
    				height: 153, // Why do I have to specify the height here?
    				             // Shouldn't its container's 'fit' layout take
    				             // care of that?
    				border: false,
    				deferredRender: true, // This works
    				defaults: {autoScroll: true},
    				items: [
    					{
    						title: 'Basic Tab One',
    						bodyStyle: 'padding 10px;',
    						html: "This is just some text..."
    					},
    					{
    						layout: 'form',
    						title: 'Form Tab One',
    						labelAlign: 'right',
    						defaults: {width: 175},
    						items: [
    							{
    								xtype: 'textfield',
    								name: 'text_field_1',
    								value: 'Foo Bar',
    								fieldLabel: 'Text Field 1'
    							},
    							{
    								xtype: 'combo',
    								hiddenName: 'combo_field_1',
    								fieldLabel: 'Combo Field 1',
    								store: new Ext.data.SimpleStore({
    		                            fields: ['name', 'value'],
    		                            data: [
    										["Option 1","1"],
    										["Option 2","2"],
    										["Option 3","3"]
    									]
    		                        }),
    								editable: false,
    								allowBlank: true,
    		                        valueField:'value',
    		                        displayField:'name',
    		                        typeAhead: true,
    		                        mode: 'local',
    		                        triggerAction: 'all',
    		                        selectOnFocus:true
    							},
    							{
    								xtype: 'datefield',
    								name: 'date_field_1',
    								fieldLabel: 'Date Field 1'
    							}
    						]
    					}
    				]
    			}
    		]
    	});
    
    
        /* ======================================================================
            Second Tab Set uses deferredRender: false
            The forms do not render correctly, presumably because the panel's
            contents don't know how to size themselves until the layout has
            been run on their container panel... but I'm not sure, as I don't
            really know how Ext works under the hood.
    	   ====================================================================== */
        var tabs2 = new Ext.FormPanel({
    		renderTo: document.body,
    		title: 'Form Test',
    		url: '/',
    		width: 350,
    		height: 180,
    		layout: 'fit',
    		items: [
    			{
    				xtype: 'tabpanel',
    				activeTab: 0,
    				height: 153,
    				border: false,
    				deferredRender: false, // This doesn't.
    				defaults: {autoScroll: true},
    				items: [
    					{
    						title: 'Basic Tab One',
    						bodyStyle: 'padding 10px;',
    						html: "This is just some text..."
    					},
    					{
    						layout: 'form',
    						title: 'Form Tab One',
    						labelAlign: 'right',
    						defaults: {width: 175},
    						items: [
    							{
    								xtype: 'textfield',
    								name: 'text_field_1',
    								value: 'Foo Bar',
    								fieldLabel: 'Text Field 1'
    							},
    							{
    								xtype: 'combo',
    								hiddenName: 'combo_field_1',
    								fieldLabel: 'Combo Field 1',
    								store: new Ext.data.SimpleStore({
    		                            fields: ['name', 'value'],
    		                            data: [
    										["Option 1","1"],
    										["Option 2","2"],
    										["Option 3","3"]
    									]
    		                        }),
    								editable: false,
    								allowBlank: true,
    		                        valueField:'value',
    		                        displayField:'name',
    		                        typeAhead: true,
    		                        mode: 'local',
    		                        triggerAction: 'all',
    		                        selectOnFocus:true
    							},
    							{
    								xtype: 'datefield',
    								name: 'date_field_1',
    								fieldLabel: 'Date Field 1'
    							}
    						]
    					}
    				]
    			}
    		]
    	});
    
    
    });
    Attached Images
    Last edited by theturtle32; 28 Nov 2007 at 7:32 PM. Reason: Adding details

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi