Animated (slide) transition in sencha

I have a panel in the sencha app swich contains the login form. I think I want to upload new content when submitting the form. I want new content to load after the slide animation. I tried using mainPanel.setCard ({type: 'slide'}), but I don't know how to post new content. Any idea?

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!', function(btn, 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(); } }); 
+1
source share
1 answer

The correct code should be:

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

All Articles