Hybrid 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

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

      0  

    Talking Found a workaround

    Found a workaround


    Ok, I found a workaround finally... It's a little bit cheezy but it works for now.

    Basically, we set deferredRender back to true, and then iterate through the tabs, activating each one of them before re-activating the tab that we want to be the default.

    Code:
    var tabPanel = (initialize tabpanel here)
    
    tabPanel.items.each(function(item) {
       tabPanel.activate(item); // force tabs to render by activating them
    });
    
    tabPanel.activate('name_of_first_tab'); // return to first tab
    Last edited by theturtle32; 28 Nov 2007 at 10:06 PM. Reason: more detail.

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

      0  

    Default


    Does anyone have any ideas about this issue? This is kindof a big deal and nobody's commented on it yet.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    7,854
    Vote Rating
    4
    tryanDLS is on a distinguished road

      0  

    Default


    Have you retested this with 2.0 Final? Also, have you tried the layoutOnTabChange:true config?

  5. #5
    Ext User erki's Avatar
    Join Date
    Dec 2007
    Posts
    10
    Vote Rating
    0
    erki is on a distinguished road

      0  

    Default


    Hi,

    I can confirm this bug in 2.0-final. Here's my testcase:
    Code:
            Ext.onReady(function() {
    
                var win = new Ext.Window({
                    layout:         'fit',
                    width:          620,
                    height:         300,
                    plain:          true,
                    items:
                        {
                            xtype:      'form',
                            border:     false,
                            items:
                                {
                                    xtype:              'tabpanel',
                                    plain:              true,
                                    deferredRender:     false,
            //                         layoutOnTabChange:  true,
                                    activeTab:          0,
                                    autoHeight:         true,
                                    items: [
                                        {
                                            title:      'Tab 1',
                                            autoHeight: true,
                                            items: [
                                                {
                                                    xtype:          'fieldset',
                                                    title:          'Fieldset 1.1',
                                                    style:          'margin: 10px; padding: 10px',
                                                    autoHeight:     true,
                                                    html:           'This tab (activeTab) renders fine. There is a problem with the other tab(s), when <b>deferredRender</b> is set <b>false</b> on TabPanel. TriggerFields are longer than TextFields. Click the other tab...'
                                                },
                                            ]
                                        },
    
                                        {
                                            title:      'Tab 2',
                                            items: [
                                                {
                                                    xtype:      'fieldset',
                                                    title:      'Fieldset 2.1',
                                                    style:      'margin: 10px; padding: 10px',
                                                    autoHeight: true,
                                                    items: [
                                                        {
                                                            xtype:          'combo',
                                                            fieldLabel:     'ComboBox 2.1.1',
                                                            width:          150
                                                        }, {
                                                            xtype:          'textfield',
                                                            fieldLabel:     'Textfield 2.1.1',
                                                            width:          150
                                                        },  {
                                                            xtype:          'textfield',
                                                            fieldLabel:     'TextField 2.1.2',
                                                            width:          150
                                                        }
                                                    ]
                                                },
                                            ]
                                        }
                                    ]
                                }
                        }
    
                });
    
                win.show(this);
    
            });
    With "layoutOnTabChange: true", everything works OK, but using "deferredRender: false" is sometimes preferred.

    Last edited by erki; 3 Jan 2008 at 2:30 AM. Reason: adding testcase

  6. #6
    Ext User
    Join Date
    Mar 2007
    Posts
    74
    Vote Rating
    0
    Teflon is on a distinguished road

      0  

    Default


    I am experiencing this exact same problem. I came across this when trying to load a Record into a form. The data does not load into any inactive tabs in the form when deferredRender is true. The data will load perfectly when deferredRender is false, but comboboxes go crazy. The trigger on the combo is misaligned and when clicked, the list is very narrow. See attached image.

    Here's sample code:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Forms</title>
        <link rel="stylesheet" type="text/css" href="js/ext2/css/ext-all.css"/>
        <script type="text/javascript" src="js/ext2/ext-base.js"></script>
        <script type="text/javascript" src="js/ext2/ext-all.js"></script>
        <script type="text/javascript">
            Ext.onReady(function(){
    
                Ext.QuickTips.init();
    
                // turn on validation errors beside the field globally
                Ext.form.Field.prototype.msgTarget = 'side';
    
                var bd = Ext.getBody();
    
                /*
                 * ================  Form 1  =======================
                 */
                bd.createChild({tag: 'h2', html: 'Form 1 - deferredRender: true'});
    
                var deferred = new Ext.FormPanel({
                    labelWidth: 75,
                    border:true,
                    width: 350,
    
                    items: {
                        xtype:'tabpanel',
                        activeTab: 0,
                        
                        // when set to true, no data is loaded
                        // when set to false, data is loaded but combos get stupid
                        //deferredRender: false,
                    
                        defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
                        items:[{
                            title:'Personal Details',
                            layout:'form',
                            defaults: {width: 230},
                            defaultType: 'textfield',
    
                            items: [{
                                fieldLabel: 'First Name',
                                name: 'first',
                                allowBlank:false
                            },{
                                fieldLabel: 'Last Name',
                                name: 'last'
                            },{
                                fieldLabel: 'Company',
                                name: 'company'
                            }, {
                                fieldLabel: 'Email',
                                name: 'email'
                            }]
                        },{
                            title:'Phone Numbers',
                            layout:'form',
                            defaults: {width: 230},
                            defaultType: 'textfield',
    
                            items: [{
                                fieldLabel: 'Home',
                                name: 'home'
                            },{
                                fieldLabel: 'Business',
                                name: 'business'
                            },{
                                fieldLabel: 'Mobile',
                                name: 'mobile'
                            },{
                                fieldLabel: 'Fax',
                                name: 'fax'
                            }, new Ext.form.ComboBox({
                                store: new Ext.data.SimpleStore({
                                    fields: [ 'text', 'value' ],
                                    data: [
                                        [ 'Home', 'h' ],
                                        [ 'Business', 'b' ],
                                        [ 'Mobile', 'm' ],
                                        [ 'Fax', 'f' ]
                                    ]
                                }),
                                fieldLabel: 'Type',
                                displayField: 'text',
                                valueField: 'value',
                                hiddenName: 'phoneType',
                                mode: 'local',
                                triggerAction: 'all',
                                editable: false,
                                selectOnFocus: true,
                                allowBlank: false,
                                width: 230
                            })]
                        }]
                    },
    
                    buttons: [{
                        text: 'Save'
                    },{
                        text: 'Cancel'
                    }]
                });
    
                deferred.render(document.body);
                
                bd.createChild({tag: 'br'});
                bd.createChild({tag: 'br'});
    
                /*
                 * ================  Form 2  =======================
                 */
                
                bd.createChild({tag: 'h2', html: 'Form 2 - deferredRender: false'});
    
                var immediate = new Ext.FormPanel({
                    labelWidth: 75,
                    border:true,
                    width: 350,
    
                    items: {
                        xtype:'tabpanel',
                        activeTab: 0,
                        
                        // when set to true, no data is loaded
                        // when set to false, data is loaded but combos get stupid
                        deferredRender: false,
                    
                        defaults:{autoHeight:true, bodyStyle:'padding:10px'}, 
                        items:[{
                            title:'Personal Details',
                            layout:'form',
                            defaults: {width: 230},
                            defaultType: 'textfield',
    
                            items: [{
                                fieldLabel: 'First Name',
                                name: 'first',
                                allowBlank:false
                            },{
                                fieldLabel: 'Last Name',
                                name: 'last'
                            },{
                                fieldLabel: 'Company',
                                name: 'company'
                            }, {
                                fieldLabel: 'Email',
                                name: 'email'
                            }]
                        },{
                            title:'Phone Numbers',
                            layout:'form',
                            defaults: {width: 230},
                            defaultType: 'textfield',
    
                            items: [{
                                fieldLabel: 'Home',
                                name: 'home'
                            },{
                                fieldLabel: 'Business',
                                name: 'business'
                            },{
                                fieldLabel: 'Mobile',
                                name: 'mobile'
                            },{
                                fieldLabel: 'Fax',
                                name: 'fax'
                            }, new Ext.form.ComboBox({
                                store: new Ext.data.SimpleStore({
                                    fields: [ 'text', 'value' ],
                                    data: [
                                        [ 'Home', 'h' ],
                                        [ 'Business', 'b' ],
                                        [ 'Mobile', 'm' ],
                                        [ 'Fax', 'f' ]
                                    ]
                                }),
                                fieldLabel: 'Type',
                                displayField: 'text',
                                valueField: 'value',
                                hiddenName: 'phoneType',
                                mode: 'local',
                                triggerAction: 'all',
                                editable: false,
                                selectOnFocus: true,
                                allowBlank: false,
                                width: 230
                            })]
                        }]
                    },
    
                    buttons: [{
                        text: 'Save'
                    },{
                        text: 'Cancel'
                    }]
                });
    
                immediate.render(document.body);
    
    
                var PersonRecord = Ext.data.Record.create([
                    { name: 'first' },
                    { name: 'last' },
                    { name: 'company' },
                    { name: 'email' },
                    { name: 'home' },
                    { name: 'business' },
                    { name: 'mobile' },
                    { name: 'fax' },
                    { name: 'phoneType' }
                ]);
                
                var jack = new PersonRecord({
                    first: 'Jack',
                    last: 'Slocum',
                    company: 'Ext JS',
                    home: '(888) 555-1212',
                    mobile: '(888) 555-3434',
                    phoneType: 'b'
                });
                
                deferred.form.loadRecord(jack);
                immediate.form.loadRecord(jack);
            });    
        </script>
    </head>
    <body>
    <br /><br />
    </body>
    </html>
    theturtle32, thanks for the workaround, i'll give it a shot.
    Attached Images

  7. #7

  8. #8
    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 galdaka View Post
    Hi,

    Same problem in Ext 3.0.0.

    This WorkArround works: http://www.extjs.com/forum/showthrea...2764#post92764

    Greetings,
    did you also set
    Code:
    defaults: {
        hideMode: 'offsets'
    }
    on the tabpanel itself?

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