My Ext.form.Panel object does not want to show

[alexgrimaldi]

Hi all,

I am very new to Sencha Touch 2, so sorry for the stupid question. I am trying to display a form on a screen. I want to define my form in a separate file (LoginForm) and then call this file from my view (Viewport) using xtype. I have been follwing few tutorials and cannot see what I am doing wrong yet. Can you please help?

This is my LoginForm file:

Ext.define('CloudClient.view.component.custom.LoginForm', {
    extend: 'Ext.form.Panel',
    xtype: 'ccl-loginform',


    config: {
        items: [
            {
                xtype: 'fieldset',
                title: 'Title',
                instructions: 'please login',
                layout: 'vbox',


                defaults: {
                    labelWidth: '200px'
                },


                items: [
                    {
                        xtype: 'textfield',
                        name: 'username',
                        label: 'Username',
                        placeHolder: 'Username' ,


                    },
                    {
                        xtype: 'passwordfield',
                        name: 'password',
                        label: 'Password'
                        placeHolder: 'Password'
                    }
                ]
            },
            {
                xtype: 'button',
                text: 'Sign in',
                action :'loginaction'


            }
        ]
    },
    initialize: function() {
        this.callParent(arguments);
        console.log('loginform:initialize');
    }
});

This is my app.js

Ext.Loader.setConfig({
    enabled: true
});


Ext.application({


    name: 'CloudClient',


    appFolder: 'app',


    requires: [


    ],


    controllers : [
        'CloudClient.controller.LoginController'
    ],


    views : [
        'CloudClient.view.Viewport',
        'CloudClient.view.component.custom.LoginForm',
        'CloudClient.view.component.custom.ScreenHeader',
        'CloudClient.view.component.custom.SupportInfo',
    ],


    models: [


    ],


    stores: [


    ],


    autoCreateViewport: true,


    launch: function () {
        Ext.create('CloudClient.view.Viewport')        
    }
});

This is my viewport

Ext.define('CloudClient.view.Viewport', {
    extend: 'Ext.Panel',


    xtype: 'ccl-viewport',


    config: {
        fullscreen:true,
        scrollable: true,
        layout:'vbox',
        items: [
            { xtype: 'ccl-screenheader' },
            { xtype: 'ccl-loginform'},
            { xtype: 'ccl-supportinfo'}
        ]
    }
});

[mitchellsimoens]

You need to tell the form to have a size. Here is an example:

Ext.define('CloudClient.view.Viewport', {
    extend: 'Ext.Panel',
    xtype: 'ccl-viewport',

    config: {
        fullscreen:true,
        scrollable: true,
        layout:{
            type  : 'vbox',
            align : 'stretch'
        },
        items: [
            { xtype: 'ccl-screenheader' },
            { xtype: 'ccl-loginform', flex : 1},
            { xtype: 'ccl-supportinfo'}
        ]
    }
});

Changes in red.

[alexgrimaldi]

It worked! ... Thank you so much

[german.larrosa]

Hi,

I use the above recommendation (adding the layout config option and the flex option) but I couldnt solve the above problem.

My scenario is described as following:

I have defined an Ext.form.FormPanel (within two text fields) inside a custom class (this custom class inherits from an Ext.Panel). So the problem is that I cannot make the formPanel visible inside my custom class.

The only way to make it visible is adding the height property int the formPanel configuration setting a real value to the height property (i.e '100px' or '10em' since I've tried using percentaje without success).

I am wondering if there is another way to solve that problem without having to set the formPanel height property with a real value like 100em or 100px.

Following you can find my code:

initialize: function() {
var form = Ext.create('Ext.form.FormPanel', {
cls: "customForm",
height: '200px', <----- added option in order to make my formPanel visible
items: [
{
xtype: 'fieldset',
title: 'Showtimes',
items: [
{
id: 'txtLocationMovie',
xtype: 'textfield',
name: 'location',
label: 'Location'
}
]
}
]
});

//add my form to my custom class
this.add([form]);

} //end initialize

[alexgrimaldi]

Hi German,

I see your problem. Having or not having the height param should not make any difference as far as I know. Unfortunately I am not an expert. At the end of day I do not know why this is happening. Sorry!

Best of luck,
Alex

[jaux]

Hi,

I use the above recommendation (adding the layout config option and the flex option) but I couldnt solve the above problem.

My scenario is described as following:

I have defined an Ext.form.FormPanel (within two text fields) inside a custom class (this custom class inherits from an Ext.Panel). So the problem is that I cannot make the formPanel visible inside my custom class.

The only way to make it visible is adding the height property int the formPanel configuration setting a real value to the height property (i.e '100px' or '10em' since I've tried using percentaje without success).

I am wondering if there is another way to solve that problem without having to set the formPanel height property with a real value like 100em or 100px.

Following you can find my code:

initialize: function() {
var form = Ext.create('Ext.form.FormPanel', {
cls: "customForm",
height: '200px', <----- added option in order to make my formPanel visible
items: [
{
xtype: 'fieldset',
title: 'Showtimes',
items: [
{
id: 'txtLocationMovie',
xtype: 'textfield',
name: 'location',
label: 'Location'
}
]
}
]
});

//add my form to my custom class
this.add([form]);

} //end initialize

Same problem when I'm trying to use form.Panel inside an DataItem.