Sencha Touch - Redirect to another view
Solution 1
You need create a ref for your HomeView:
refs: {
HomeView: {
autoCreate: true,
selector: 'HomeView',
xtype: 'HomeView'
},
}
And set this view active:
Ext.Viewport.setActiveItem(this.getHomeView());
Solution 2
If you use Sencha Touch 2, you should use Route to redirect to another page. So, it wil be like this:
this.redirectTo('home');
Then create a controller with has a route "home"
FOr more information about routes. http://docs.sencha.com/touch/2-0/#!/guide/controllers-section-4
Murali Murugesan
Working as a Senior FullStack & Cloud Developer in Stockholm, Sweden. Interested in Web stack, Application Architecture and Design, Front end development frameworks. C# Azure ASP.NET Core Angular TypeScript WebAPI micro-services Agile Domain Driven Design Clean Code TDD SQL Server Clean Coder, Passionate to build a better software!
Updated on June 22, 2022Comments
-
Murali Murugesan almost 2 years
I am building a Sencha Touch application and struggling with redirecting or changing another view after login. After login i need to take it to Home Page. But my below code in Login Controller's authenticateUser()not working.
Tried with Ext.Viewport.push(homePanel) , Ext.Viewport.setActiveItem(homePanel) also. But nothing works.
LoginView
Ext.define("Mobile.view.LoginView", { extend: "Ext.form.FormPanel", alias: "widget.mylogin", id: 'loginFormPanel', config: { name: 'loginform', frame: true, url: 'login/Authenticate', title: 'Login', items: [ { xtype: 'fieldset', itemId: 'LoginFieldset', margin: '10 auto 0 auto ', title: '', items: [ { //User Name field def }, { //Pwd Field Def } ] }, { xtype: 'button', id: 'loginButton', text: 'Login', action: 'login' } ] } });
Login Controller
Ext.define("Mobile.controller.LoginController", { extend: "Ext.app.Controller", views: ['LoginView', 'HomeView'], models: ['UserModel'], config: { refs: { loginForm: "#loginFormPanel" }, control: { 'button[action=login]': { tap: "authenticateUser" } } }, authenticateUser: function (button) { loginForm.submit({ method: 'POST', success: function (form, result) { //THIS IS NOT WORKING Ext.Viewport.add(Ext.create('Mobile.view.HomeView')); }, failure: function (form, result) { console.log('Error'); Ext.Msg.alert('Check the logic for login and redirect'); } }); } });
Home View
Ext.define('Mobile.view.HomeView', { extend: 'Ext.Container', id: 'homescreen', alias: "widget.homepanel", config: { layout: { type: 'card', animation: { type: 'flip' } }, items: [ { xtype: 'toolbar', docked: 'bottom', id: 'Toolbar', title: 'My App', items: [ { id: 'settingsBtn', xtype: 'button', iconCls: 'settings', ui: 'plain', iconMask: true } ] }, { xclass: 'Mobile.view.ActionListView' } ] }, });
App.JS
Ext.application({ name: "Mobile", controllers: ["LoginController", "HomeController"], views: ['LoginView', 'HomeView', 'ActionListView'], models: ['UserModel', 'OrganizationModel', 'ActionModel'], stores: ['OrganizationStore', 'ActionStore'], launch: function () { var loginPanel = Ext.create('Ext.Panel', { layout: 'fit', items: [ { xtype: 'mylogin' } ] }); Ext.Viewport.add(loginPanel); } });
Any one have any idea? Already referred Load another view after login with sencha touch 2.0 . But there is no answer . Please help
-
Vikal Sharma over 11 yearsany error is coming? If yes,please specify.
-
Murali Murugesan over 11 yearsNo errors showing. I checked with console.log also. It executed with out error. But view is not changing. Cant we simply change view like Ext.Viewport.add(Ext.create('Mobile.view.HomeView')); ?
-
Murali Murugesan over 11 yearsInitially i am adding login view in app.js lauch function using same way. Now i want to replace it with new view also should not allow user to go back to login page once they authenticated.
-
-
Murali Murugesan over 11 yearsHi it worked for me. However i modified few things based on 'this' keyword scope and the 'refs' based on the code i put in my question. Thanks for your help !!
-
MattioliSencha over 11 yearsI dont like use id propety, i prefer create a ref with a xtype alias, that way you dont have chance to duplicate id's... but is a option...