1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Exclamation FormPanel doesn't display but Panel does. Bug?

    FormPanel doesn't display but Panel does. Bug?


    This simple app does NOT display:

    Code:
    Ext.application({
        name: 'Sencha',
    
    
        launch: function() {
            Ext.create("Ext.form.Panel", {
                fullscreen: true,
                items: [
    				{
    					xtype: 'panel',
    					items: [
    						{
    							xtype: 'toolbar',
    							docked: 'top',
    							title: 'test'
    						},
    						{
    							xtype: 'formpanel',
    							items: [
    					        {
    					            xtype: 'textfield',
    					            name : 'name',
    					            label: 'Name'
    					        },
    					        {
    					            xtype: 'emailfield',
    					            name : 'email',
    					            label: 'Email'
    					        },
    					        {
    					            xtype: 'passwordfield',
    					            name : 'password',
    					            label: 'Password'
    					        }
    			]
    						}
    					]
    				}
                ]
            });
        }
    });

    BUT this one does. Note that the only thing that changed was "formpanel" => "panel". If the code looks familiar, it's from the "Getting Started" guide: docs/index.html#!/guide/forms

    Code:
    Ext.application({
        name: 'Sencha',
    
    
        launch: function() {
            Ext.create("Ext.form.Panel", {
                fullscreen: true,
                items: [
    				{
    					xtype: 'panel',
    					items: [
    						{
    							xtype: 'toolbar',
    							docked: 'top',
    							title: 'test'
    						},
    						{
    							xtype: 'panel',
    							items: [
    					        {
    					            xtype: 'textfield',
    					            name : 'name',
    					            label: 'Name'
    					        },
    					        {
    					            xtype: 'emailfield',
    					            name : 'email',
    					            label: 'Email'
    					        },
    					        {
    					            xtype: 'passwordfield',
    					            name : 'password',
    					            label: 'Password'
    					        }
    			]
    						}
    					]
    				}
                ]
            });
        }
    });

  2. #2
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    9
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    I see a couple things wrong with your code sample. First of all, you are nesting a form panel inside of a form panel. Second, you are not specifying any layouts anywhere. Since scrollable items don't support auto height, and form panel is scrollable by default, the form panel never gets a height. Try the following code where I removed over nesting and gave stuff layout.

    PHP Code:
        launch: function() {
            
    Ext.create("Ext.Panel", {
                
    fullscreentrue,
                
    layout'fit',
                
    items: [{
                    
    xtype'formpanel',
                    
    items: [{
                        
    xtype'toolbar',
                        
    docked'top',
                        
    title'test'
                    
    }, {
                        
    xtype'textfield',
                        
    name 'name',
                        
    label'Name'
                    
    }, {
                        
    xtype'emailfield',
                        
    name 'email',
                        
    label'Email'
                    
    }, {
                        
    xtype'passwordfield',
                        
    name 'password',
                        
    label'Password'
                    
    }]
                }]
            });
        }, 
    Even cleaner would be to just do:

    PHP Code:
        launch: function() {
            
    Ext.create("Ext.form.Panel", {
                
    fullscreentrue,
                
    items: [{
                    
    xtype'toolbar',
                    
    docked'top',
                    
    title'test'
                
    }, {
                    
    xtype'textfield',
                    
    name 'name',
                    
    label'Name'
                
    }, {
                    
    xtype'emailfield',
                    
    name 'email',
                    
    label'Email'
                
    }, {
                    
    xtype'passwordfield',
                    
    name 'password',
                    
    label'Password'
                
    }]
            });
        }, 

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default


    Thanks Tommy. It was the missing 'layout' attributes. Can you put an assert/exception into the framework for Panels that don't define layouts? These kinds of issues are a real pain and will always occur despite diligence on the part of the programmer.

    Additionally, it would be nice to see some debug logs in various methods in the "debug" version of the sencha touch library so that we can more easily follow what's going on. This would take ~30 mins to do and would not impact performance of a production app because production apps would not use the debug js.

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    9
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    We can't throw debug warnings for panels without a layout, since it happens quite often that you don't actually want to define a layout.

    As for various debug logs, we try to do this in many places. When you say it would take ~30 mins to do, I'm pretty sure you underestimate the time required Any particular debug logs you like to see?

  5. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    127
    Vote Rating
    0
    robl is on a distinguished road

      0  

    Default


    Indeed, it would take more than 30 minutes. It has be analyzed, coded, tested, checked in, etc... I am just saying that it's not a huge effort.

    Under which situations would there be no layout? If it's so that you can programmatically specify one, perhaps when the form is rendered, there could be an assertion...

Thread Participants: 1