Question

我从Sencha Touch开始，并且浮动面板存在一个小问题。我们的想法是创建一个小的登录面板来授予对应用程序主面板的访问权限。视口是一个带有卡片布局的面板，其中有两个面板，即loginPanel和mainPanel。

我的第一种方法是为登录表单创建一个浮动FormPanel并将其插入视口中，但问题是此Panel会延伸到整个视口而不是按属性中指定的方式居中。我能得到它的唯一方法是：

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

正如您所看到的，必须在面板中插入loginForm，并在视口中使用卡布局此面板。如果我在视口中插入formPanel，它就不起作用。为什么是这样？我做错了什么？或者这种方式是在卡片布局中获得浮动面板的唯一方法？

另一个问题是： setTimeout（'loginForm.show（）;'，2000）;

它不起作用，也没有任何显示。任何想法？

非常感谢

Answer 1

第一部分 - 通常，Sencha Touch应用程序应包含一个全屏面板。这称为视口，它充当所有其他组件的容器。当您创建一个没有视口的浮动窗口时，它没有可以居中的参考框架。

第二部分 - 而不是：

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

试试这个：

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

卡布局不允许浮动面板

1 个答案: