sench touch 页面跳转

下面是我做的一个简单的登录页面登录成功后跳转页面

首页要在app.js 里面添加

1.视图层   登录页面

 Ext.define('MyApp.view.Login', {
     extend: 'Ext.form.Panel',
     requires:['Ext.Img','Ext.field.Password'],
     alias: 'widget.Login',
     xtype: 'Login',
     config: {
         fullscreen: true,
         cls:'Login',
         items: [
             {
                 margin: 20,
                 html:'<p class="login-title">登录</p>'
             },
             {
                 margin: '20px',
                 style: 'border-bottom:1px solid #f5f5f5;border-radius:0;color:#fff;',
                 xtype: 'textfield',  //文本框
                 name: 'username',
                 id:"username",
                 placeHolder: '账号',
                 required: true,  //必填字段
                 ClearIcon: true  //输入内容后文本框后面会出现一个清空按钮
             },
             {
                 margin: '20px',
                 style: 'border-bottom:1px solid #f5f5f5;border-radius:0;color:#fff;',
                 xtype: 'passwordfield',  //密码文本框
                 name: 'password',
                 id:"password",
                 placeHolder: '密码',
                 required: true,
                 ClearIcon: true
             },
             {
                 margin: '20px',
                 html:'<div class="remPassword"><input id="remPassword" type="checkbox"><label for="remPassword">记住密码</label></div>'
             },
             {
                 xtype: 'button',//添加一个登录按钮，
                 text: '登录',
                 cls:'LoginBtn'
             }
         ]
     }
 });

2.controller login

 Ext.define('MyApp.controller.Login', {
     extend: 'Ext.app.Controller',
     config: {
         refs: {
             'addButton': 'Login button'  //找到按钮
         },
         control: {
             addButton: {
                 tap: 'loginBtn'  //为按钮添加方法
             }
         }
     },
     loginBtn:function(){
         var username = Ext.getCmp('username').getValue();
         var password = Ext.getCmp('password').getValue();
         if (username === "") {
             Ext.Msg.alert("提示", "用户名不许为空！");
             return;
         }
         if (password === "") {
             Ext.Msg.alert("提示", "密码不许为空！");
             return;
         }
         Ext.Msg.alert("提示", username + " 登录成功!");

         Ext.Viewport.setActiveItem(
             'main', {  //main 为要跳转的页面
                 type : 'slide',
                 direction : 'right'
             });
     }
 });

3.登录按钮 登录成功后跳转到的页面  视图层  首页

 Ext.define('MyApp.view.Main', {
     extend: 'Ext.tab.Panel',
     xtype: 'main',
     requires: [
         'Ext.tab.Panel'
     ],
     config: {
         tabBarPosition: 'bottom',
         items: [
             {
                 title: '首页',
                 iconCls: 'home',
                 items:[
                     {
                         html:'哈哈'
                     },
                     {
                         html:'哈哈'
                     },
                     {
                         html:'哈哈'
                     }
                 ]
             },
             {
                 title: '搜索',
                 iconCls: 'search',
                 html:'搜索'
             },
             {
                 title: '商城',
                 iconCls: 'add',
                 html:'分类'
             },
             {
                 title: '我的',
                 iconCls: 'user',
                 html:'我的'
             }
         ]
     }
 });