我是sencha touch的新手,我推荐this project用于学习目的 在这个项目中,我正在尝试添加登录模块,如果登录成功,则显示其他内容(已经在项目中)。
我在app.js
文件中进行了更改并加载了登录表单(这是有效的)
app.js :
ToolbarDemo = new Ext.Application({
name: "ToolbarDemo",
launch: function() {
this.views.Home = new this.views.Home();
//this.views.viewport = new this.views.Viewport();
//this.views.homecard = this.views.viewport.getComponent('home');
}
});
并在Home.js
中,我创建了登录屏幕,如果用户名不是空白,我想将其重定向到包含其他页面的Viewport.js
。
我尝试了一些在块中注释的内容。
Home.js :
ToolbarDemo.views.Home = Ext.extend(Ext.form.FormPanel, {
fullscreen: true,
title: 'Login',
cls:'Loginscreen',
id:'loginFormPanel',
items:
[
{
html: '<div align="center"><img style="height: 100px; width: 100px;" src="stylesheets/images/main-logo.png" /></div>'
},
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name : 'name',
id:'name',
placeHolder : 'User Name',
},{
xtype: 'passwordfield',
name : 'password',
placeHolder : 'Password',
}
]
},
{
xtype: 'button',
text: 'Login',
cls:'LogingButton',
ui: 'confirm',
itemId:'loginbutton',
handler: function() {
var name = Ext.getCmp('name').getValue();
//var pass = Ext.getCmp('password').getValue();
if(name != '')
{
//ToolbarDemo.app.switchMainView('ToolbarDemo.view.Viewport');
//Ext.Viewport.setActiveItem(Ext.create('ToolbarDemo.view.Viewport'));
//this.redirectTo('Viewport');
//var firststep = Ext.create('ToolbarDemo.view.Viewport');
//Ext.Viewport.setActiveItem(firststep);
/*ToolbarDemo = new Ext.Application({
name: "ToolbarDemo",
launch: function() {
this.views.viewport = new this.views.Viewport();
this.views.homecard = this.views.viewport.getComponent('home');
}
});*/
alert("aa");
}
}
}
],
});
Viewport.js :
ToolbarDemo.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
xtype: 'viewport',
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard', id: 'home' },
{ xtype: 'searchcard' },
{ xtype: 'actioncard' },
{ xtype: 'logincard' },
{ xtype: 'settingscard' },
{ xtype: 'morecard' }
]
});
ToolbarDemo.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
那么如何浏览页面?我正在尝试this和this,但没有帮助。
another quetion:
我也参考其他教程以及他们使用controller,model and view
类型模式的sencha官方网站,在我的项目中没有controller
。
我应该遵循哪种编码格式,这有助于我理解senchatouch?
我的项目是否适合练习?
我指的是差异。教程和我变得困惑。那么我该怎么办? 提前谢谢。
答案 0 :(得分:1)
阅读本文Sencha Touch coding guidelines you should follow: Part 1中的第4点 - 动画并激活常用功能中的容器,您将了解如何执行此操作。我们的Utility类通常有一个常用的函数来处理页面导航。
关于Sencha Touch练习,似乎你仍然缺乏一些理解。你应该找一本好书,花些时间理解基本概念。这是一个关于如何创建Sencha Touch应用程序的好教程:How to Create a Sencha Touch 2 App
如果你想要一个高级教程,这里有一个全面的教程,提供了一步一步的应用程序开发过程: