下面是我做的一个简单的登录页面登录成功后跳转页面
首页要在app.js 里面添加
1.视图层 登录页面
1 Ext.define('MyApp.view.Login', { 2 extend: 'Ext.form.Panel', 3 requires:['Ext.Img','Ext.field.Password'], 4 alias: 'widget.Login', 5 xtype: 'Login', 6 config: { 7 fullscreen: true, 8 cls:'Login', 9 items: [ 10 { 11 margin: 20, 12 html:'<p class="login-title">登录</p>' 13 }, 14 { 15 margin: '20px', 16 style: 'border-bottom:1px solid #f5f5f5;border-radius:0;color:#fff;', 17 xtype: 'textfield', //文本框 18 name: 'username', 19 id:"username", 20 placeHolder: '账号', 21 required: true, //必填字段 22 ClearIcon: true //输入内容后文本框后面会出现一个清空按钮 23 }, 24 { 25 margin: '20px', 26 style: 'border-bottom:1px solid #f5f5f5;border-radius:0;color:#fff;', 27 xtype: 'passwordfield', //密码文本框 28 name: 'password', 29 id:"password", 30 placeHolder: '密码', 31 required: true, 32 ClearIcon: true 33 }, 34 { 35 margin: '20px', 36 html:'<div class="remPassword"><input id="remPassword" type="checkbox"><label for="remPassword">记住密码</label></div>' 37 }, 38 { 39 xtype: 'button',//添加一个登录按钮, 40 text: '登录', 41 cls:'LoginBtn' 42 } 43 ] 44 } 45 });
2.controller login
1 Ext.define('MyApp.controller.Login', { 2 extend: 'Ext.app.Controller', 3 config: { 4 refs: { 5 'addButton': 'Login button' //找到按钮 6 }, 7 control: { 8 addButton: { 9 tap: 'loginBtn' //为按钮添加方法 10 } 11 } 12 }, 13 loginBtn:function(){ 14 var username = Ext.getCmp('username').getValue(); 15 var password = Ext.getCmp('password').getValue(); 16 if (username === "") { 17 Ext.Msg.alert("提示", "用户名不许为空!"); 18 return; 19 } 20 if (password === "") { 21 Ext.Msg.alert("提示", "密码不许为空!"); 22 return; 23 } 24 Ext.Msg.alert("提示", username + " 登录成功!"); 25 26 Ext.Viewport.setActiveItem( 27 'main', { //main 为要跳转的页面 28 type : 'slide', 29 direction : 'right' 30 }); 31 } 32 });
3.登录按钮 登录成功后跳转到的页面 视图层 首页
1 Ext.define('MyApp.view.Main', { 2 extend: 'Ext.tab.Panel', 3 xtype: 'main', 4 requires: [ 5 'Ext.tab.Panel' 6 ], 7 config: { 8 tabBarPosition: 'bottom', 9 items: [ 10 { 11 title: '首页', 12 iconCls: 'home', 13 items:[ 14 { 15 html:'哈哈' 16 }, 17 { 18 html:'哈哈' 19 }, 20 { 21 html:'哈哈' 22 } 23 ] 24 }, 25 { 26 title: '搜索', 27 iconCls: 'search', 28 html:'搜索' 29 }, 30 { 31 title: '商城', 32 iconCls: 'add', 33 html:'分类' 34 }, 35 { 36 title: '我的', 37 iconCls: 'user', 38 html:'我的' 39 } 40 ] 41 } 42 });