Question

我是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？

我的项目是否适合练习？

我指的是差异。教程和我变得困惑。那么我该怎么办？提前谢谢。

Answer 1

阅读本文Sencha Touch coding guidelines you should follow: Part 1中的第4点 - 动画并激活常用功能中的容器，您将了解如何执行此操作。我们的Utility类通常有一个常用的函数来处理页面导航。

关于Sencha Touch练习，似乎你仍然缺乏一些理解。你应该找一本好书，花些时间理解基本概念。这是一个关于如何创建Sencha Touch应用程序的好教程：How to Create a Sencha Touch 2 App

如果你想要一个高级教程，这里有一个全面的教程，提供了一步一步的应用程序开发过程：

如何在sencha touch2中导航页面？

1 个答案: