1
votes

I'm starting with Sencha Touch and have a small issue with a floating Panel. The idea is to create a small login panel to grant access to the aplication main panel. The viewport is a panel with card layout and two panels into it, the loginPanel and the mainPanel.

My first approach was to create a floating FormPanel for the login form and insert it in the viewport, but the problem is that this Panel stretches out to the whole viewport instead of be centered as specified in the properties. The only way I could get it is the following:

var App = new Ext.Application({
    name: 'tool'
    ,useLoadMask: true
    ,launch: function(){

        tool.views.loginPanel = new Ext.Panel({
            listeners: {
                afterrender: function(){
                //setTimeout('loginForm.show();', 2000);
                tool.views.loginForm.show();
                }
            }
        });

        tool.views.loginForm = new Ext.form.FormPanel({
                        floating: true
                        ,width: 350
                        ,height: 300
                        ,centered: true
                        ,modal: true
                        ,hideOnMaskTap: false
                        ,dockedItems:[{
                            xtype: 'toolbar'
                            ,title: 'Identificación'
                            ,ui: 'light'
                            }],
                        items: [{
                            xtype: 'fieldset'
                            ,id: 'loginFormSet'
                            ,title: ''
                            ,items: [
                                {
                                    xtype: 'emailfield',
                                    placeHolder: 'Usuario',
                                    name: 'Usuario',
                                    id: 'Username',
                                    required: true,
                                }, {
                                    xtype: 'passwordfield',
                                    placeHolder: 'Password',
                                    name: 'Password',
                                    required: true
                                }, {
                                    xtype: 'checkboxfield',
                                    id: 'RememberMe',
                                    name: 'RememberMe',
                                    label: '¿Guardar ID?',
                                    labelWidth: '40%'
                                },{
                                    xtype: 'button',
                                    text: 'Acceder',
                                    ui: 'confirm',
                                    style: 'margin:2%;',
                            handler: function(){
                                mainPanel.setActiveItem(1);
                                loginForm.destroy();
                            }

                                    }]
                            }]
                });

        tool.views.viewport = new Ext.Panel({
            fullscreen: true
            ,cls: 'mi_clase1'
            ,layout: 'card'
            ,cardAnimation: 'slide'
            ,items: [tool.views.loginPanel]

        }) // Fin del PAnel viewPort
    } // Find de funcion ,launch
}) // Fin de la application

As you can see, the loginForm has to be inserted in a Panel, and this Panel in the viewport with the card layout. If I insert the formPanel in the viewport, it doesn´t work. Why is this? Am I doing something wrong?, or maybe this way is the only way to get a floating panel in a card layout?

Another question is the: setTimeout('loginForm.show();', 2000);

It doesn´t work, and doesn´t display anything. any idea?

Thanks a lot

1

1 Answers

0
votes

Part one - In general, a Sencha Touch application should contain one fullscreen panel. This is called the viewport and it acts as a container for all other components. When you create a floating window without a viewport, it has no frame of reference in which to center itself.

Part two - Instead of:

setTimeout('loginForm.show();', 2000);

try this:

setTimeout('tool.views.loginForm.show();', 2000);