1

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 Answer 1

0

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);
3
  • Thanks a lot @nelstrom. Your answer to the second part is so obvious that I feel embarrased ;) The first part is not so clear, though. I understand that there must be a viewport "fullscreen" as base for the whole application, and I do have it (tool.views.viewport). The issue is that if I add ",items: [tool.views.loginForm]" to this viewport, the FormPanel is rendered stretched, instead of floating. In order to have it floating I have to add another panel (tool.views.loginPanel) to the portview and then the floating panel to this other panel. And I don´t understand why. Dalton
    – Dalton
    Jul 5, 2011 at 19:33
  • A Card layout extends the Fit layout and so will expand any child to fill its dimensions. This is why your login form shows expanded when added directly to your viewport but not when added as a second child. Floating panels are essentially 'windows' and so probably shouldn't be added to any parent but rather be left standalone and the show() method called. That way they will 'float' above the other content and not be part of other components' layouts.
    – Stuart
    Jul 7, 2011 at 15:38
  • Got it, That sounds reasonable. I´ll give a try, and leave the loginPanel "floating" instead of added to any other Panel. Dalton
    – Dalton
    Jul 7, 2011 at 16:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.