Rendering problem (Forms and Viewport)

[Carlos Souza]

Hello to all!


I'm having some problems with the rendering of my forms. I think it's something simple to solve, but I still haven't found a solution ...
I'm doing a simple application with a login screen. After authentication, my application redirects the user to the system main screen (viewport).
The problem is that when my viewport creates some form (Ext.create), the form does not render correctly, and when I logout the system (destroying the viewport) the forms created are not destroyed. I think this problem is related to the property "renderTo" of my forms.
How to solve this problem?


Thanks!

[joel.watson]

Hi--

If you are adding the forms as children of existing components, you shouldn't have to use renderTo. Can you share an example of the issue you're having in a test case (https://fiddle.sencha.com)? I'll be happy to test this along with you.

Thanks!
Joel

[claudio.massarotto]

If you insert the form directly to your viewport you should use

viewport.add({xtype:'myForm'});

of the defined component.

[Carlos Souza]

Hi--

If you are adding the forms as children of existing components, you shouldn't have to use renderTo. Can you share an example of the issue you're having in a test case (https://fiddle.sencha.com)? I'll be happy to test this along with you.

Thanks!
Joel

I'm sorry, but I have difficulties to post a test case on the fiddle ... I'm still learning EXTJS 5 ...
However, the code of my viewport is something like the code below:

/**Suppose that the user has already done the login to the system. 
*The user then simply clicks the "Form Generator Button" button to create a form. 
*With this form visible, the user performs the logout by clicking the "Logout" button
*/

Ext.define('SGA.view.main.Main', {
    extend: 'Ext.container.Container',
    xtype: 'app-main',    
    plugins: 'viewport',    
    controller: 'main',    
    viewModel: {
        type: 'main'
    },
    layout: {
        type: 'border'
    },
    renderTo : document.body, 
    items: [        
    {            
        xtype: 'panel',
        title: "User Menu",
        region: 'north',            
        bodyBorder: true,
        buttonAlign: 'center',            
        frame: false,
        tbar: {
            xtype: 'toolbar',       
            items: [
            {
                //Here, a simple button that creates the form "exampleForm"                

                xtype: 'button',
                text: 'Form Generator Button',
                handler: function(){
                    
                  //Here, the form is created, supposing "autoShow:true".  
                 //This form is not rendering to the viewport!

                    Ext.create('exampleForm'); 
                    
                }


            },
            {
                xtype: 'button',
                text: 'Logout',
                handler: function(){
                    
                    //By clicking this button, the viewport is destroyed, and the user is redirected to the login form.
                    //The problem is, if "exampleForm"  is created, it is not destroyed along with the viwport.
                     
                    var MainView =  this.getView();
                    MainView.destroy();                        
                    Ext.widget('login'); //The user is redirected to the "login" form and the "exampleForm" is still visible!"
                    
                    
                }


            },        
          ]
        } 
    }]
});

Could anyone help me with this problem? How to render the form "exampleForm" as a viewport child?
Thank you in advance and sorry for my English.

[joel.watson]

If you add() the form to your "Main" component, it should get destroyed when "Main" is destroyed.

https://fiddle.sencha.com/#fiddle/tde

Thanks
Joel

[Carlos Souza]

If you add() the form to your "Main" component, it should get destroyed when "Main" is destroyed.

https://fiddle.sencha.com/#fiddle/tde

Thanks
Joel

Solved! Thank you!