Sencha Touch - 重定向到另一个视图 [英] Sencha Touch - Redirect to another view

问题描述

我正在建立一个Sencha Touch应用程序，并在登录后重新导向或更改另一个视图。登录后，我需要把它带到主页。但是我下面的登录控制器的authenticateUser（）中的 代码不起作用 。

使用Ext.Viewport.push homePanel），Ext.Viewport.setActiveItem（homePanel）也。但没有任何效果。

LoginView

  Ext.define（Mobile.view.LoginView，{
 extends：Ext.form.FormPanel，
 alias：widget.mylogin，
 id：'loginFormPanel' 
 
 config：{
 
 
名称：'loginform'，
框架：true，
 url：'login / Authenticate'，
标题：'Login'，
 items：[
 
 {
 xtype：'fieldset'，
 itemId：'LoginFieldset'，
 margin ：'10 auto 0 auto'，
 title：''，
 items：[
 
 {
 //用户名字段def 
}，
 
 {
 // Pwd Field Def 
} 
] 
}，
 {
 xtype：'button'，
 id：'loginButton'，
 text：'Login'，
 action：'login 
} 
 
] 
} 
 
}）; 
  

登录控制器

  Ext.define（Mobile.controller.LoginController，{
 extends：Ext.app.Controller，
 views：['LoginView' 'HomeView']，
 models：['UserModel']，
 config：{
 refs：{
 loginForm：#loginFormPanel
}，
控制：{
'按钮[action = login]'：{
点击：authenticateUser
} 
} 
}，
 
 authenticateUser：function（button）{
 loginForm.submit（{
 method：'POST'，
 success：function（form，result）{
 //这不工作
 Ext.Viewport.add（Ext.create（'Mobile.view.HomeView'））; 
 
}，
失败：function（form，result）{
 console.log（'Error'）; 
 Ext.Msg.alert（'检查登录和重定向的逻辑'）; 
} 
}）; 
} 
}）; 
  

首页视图

  Ext.define（'Mobile.view.HomeView'，{
 extends：'Ext.Container'，
 id：'homescreen'，
别名：widget.homepanel，
 config：{
 layout：{
 type：'card'，
 animation：{
 type：'flip'
} 
}，
 items：[
 {
 xtype：'toolbar'，
 docked：'bottom'，
 id：'Toolbar '，
标题：'我的应用'，
项目：[
 {
 id：'settingsBtn'，
 xtype：'button'，
 iconCls ：'settings'，
 ui：'plain'，
 iconMask：true 
} 
] 
}，
 {
 xclass：' Mobile.view.ActionListView'
} 
] 
}， 
}）; 
  

App.JS

{pre> Ext.application（{
name：Mobile，
controllers：[LoginController，HomeController]，
views： ['LoginView'，'HomeView'，'ActionListView']，
模型：['UserModel'，'OrganizationModel'，'ActionModel']，
存储：['OrganizationStore'，'ActionStore'
launch：function（）{

var loginPanel = Ext.create（'Ext.Panel'，{
layout：'fit'，
items：[
{
xtype：'mylogin'
}
]
}）;
Ext.Viewport.add（loginPanel）;
}

}）;


任何一个想法？
已引用登录后加载另一个视图sencha touch 2.0 。但是没有答案。请帮助

解决方案

您需要为HomeView创建参考：

  refs：{
 HomeView：{
 autoCreate：true，
 selector：'HomeView'，
 xtype：'HomeView'
}，
} 
  

将此视图设置为活动：

  Ext.Viewport.setActiveItem（this.getHomeView（））; 
  

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

解决方案

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());

这篇关于Sencha Touch - 重定向到另一个视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！