sencha触摸中的动画幻灯片过渡

问题描述

|| 我在sencha应用程序中有一个面板，其中包含一个登录表单。我的想法是，我想在提交表单时加载新内容。我想在幻灯片动画之后加载新内容。我尝试使用mainPanel.setCard（{type：\'slide \'}），但我不知道如何放置新内容。任何想法？

Ext.setup({
    icon: \'icon.png\',tabletStartupScreen: \'tablet_startup.png\',phonestartupScreen: \'phone_startup.png\',glossOnIcon: false,onReady: function() {
        var mainPanel = new Ext.Panel({
            id:\'main-panel\',renderTo: \'content\',html: \'<h1>Please Identify:</h1><p>Lorem ipsum dolor sit amet,consectetur adipiscing elit. Suspendisse vel neque nec mauris eleifend fringilla. Nulla sagittis placerat ullamcorper. Duis ac elit sapien. Pellentesque semper vestibulum leo id vehicula.</p>\'
        });

        var form;

        Ext.regModel(\'User\',{
            fields: [
            {
                name: \'name\',type: \'string\'
            },{
                name: \'password\',type: \'password\'
            },]
        });

        var formBase = {
            renderTo:\'main-panel\',id: \'login-form\',url   : \'resources/login.PHP\',standardSubmit : false,items: [{
                xtype: \'fieldset\',defaults: {
                    required: true,labelAlign: \'left\',labelWidth: \'40%\'
                },items: [
                {
                    xtype: \'textfield\',name : \'username\',label: \'Usuario\',useClearIcon: true,autoCapitalize : false
                },{
                    xtype: \'passwordfield\',name : \'password\',label: \'Contraseña\',useClearIcon: false
                }
                ]
            }
            ],listeners : {
                submit : function(form,result){
                    console.log(\'success\',Ext.toArray(arguments));
                },exception : function(form,result){
                    console.log(\'failure\',Ext.toArray(arguments));
                }
            },dockedItems: [{
                xtype: \'toolbar\',dock: \'bottom\',items: [
                {
                    text: \'Entrar\',id: \'login-submit\',ui: \'confirm\',handler: function() {                        
                        form.submit({
                            method:\'POST\',waitTitle:\'Connecting\',waitMsg:\'Sending data...\',success:function(response){
                                Ext.Msg.alert(\'Status\',\'Login Successful!\',function(btn,text){
                                    if (btn == \'ok\'){
                                        mainPanel.setCard({
                                            type: \'slide\'
                                        });
                                    }
                                });
                            },failure:function(form,action){
                                Ext.Msg.alert(\'Status\',\'Login Failed!\',text){
                                    if (btn == \'ok\'){
                                        form.reset();
                                    }
                                });
                                if(action.failureType == \'server\'){
                                    obj = Ext.util.JSON.decode(action.response.responseText);
                                    Ext.Msg.alert(\'Login Failed!\',obj.errors.reason);
                                }else{
                                    Ext.Msg.alert(\'Warning!\',\'Authentication server is unreachable : \' + action.response.responseText);
                                }
                                form.reset();
                            }
                        });
                    }
                }
                ]
            }]
        };

        Ext.apply(formBase,{
            height: 150,width: 300
        });

        form = new Ext.form.FormPanel(formBase);

        form.show();
    }
});

    

解决方法

        正确的代码应为：

Ext.get(\'main-panel\').setActiveItem(1,{type : \'slide\',direction:\'left\'});