Question

我有两个观点。用户视图有一些文本和一个按钮。我想使用该按钮切换到第二个视图。但我不知道如何使用sencha touch 2.当我按下“UserView”（这是第一个视图）上的按钮时，我收到以下错误：

未捕获错误：SYNTAX_ERR：DOM异常12

这基本上就是我的代码现在的样子：

app.js

Ext.Loader.setConfig({ enabled: true });

Ext.setup({
    viewport: {
        autoMaximize: false
    },
    onReady: function() {
        var app = new Ext.Application({
            name: 'AM',
            controllers: [
                'Main'
            ]
        });
    }
});

主控制器

Ext.define('AM.controller.Main', {
    extend: 'Ext.app.Controller',
    views : ['User'],
    init: function() {
        this.getUserView().create();

        this.control ({
            '#new': {
               tap: function() {
                    alert('aaaa');
               }
            }
        });
    }
});

以及两种观点：

Ext.define('AM.view.User', {
    extend: 'Ext.Container',
    config: {
        fullscreen:true,
        items: [{
                xtype: 'button',
                text: 'New',
                id: 'new'
            }
        ],
        html: 'Testing<br />'
    }
});

第二个视图

Ext.define('AM.view.New', {
    extend: 'Ext.Container',
    config: {
        fullscreen: true,
        html: 'w00t'
    }
});

Answer 1

这是您的应用程序以应有的方式编写的。以下是关于我所做的更改的一些注意事项：

创建MVC应用程序时，应该调用Ext.application而不是Ext.setup。
应在 app.js 。
您不再需要在控制器中使用this.control()。您只需在配置块中使用控制配置即可。
您应该在views的{{1}}配置中定义所有视图。
不是在Ext.application中创建视图，而是在init中执行。这是组件应添加到视图中。

应用/视图/ user.js的

launch

应用/视图/ New.js

Ext.define('AM.view.User', { extend: 'Ext.Container', config: { items: [ { xtype: 'button', text: 'New', id: 'new' } ], html: 'Testing<br />' } });

应用/控制器/ Main.js

Ext.define('AM.view.New', { extend: 'Ext.Container', config: { html: 'w00t' } });

<强> app.js

Ext.define('AM.controller.Main', { extend: 'Ext.app.Controller', config: { control: { '#new': { // On the tap event, call onNewTap tap: 'onNewTap' } } }, launch: function() { // When our controller is launched, create an instance of our User view and add it to the viewport // which has a card layout Ext.Viewport.add(Ext.create('AM.view.User')); }, onNewTap: function() { // When the user taps on the button, create a new reference of our New view, and set it as the active // item of Ext.Viewport Ext.Viewport.setActiveItem(Ext.create('AM.view.New')); } });

我还建议您查看Sencha Touch API Docs上的精彩指南，并查看Sencha Forums因为它们非常活跃并且是很好的信息来源。

使用按钮切换视图

1 个答案: