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:'我的'
            }
        ]
    }
});