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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar