Die Ansichten wechseln mit Taste

Habe ich zwei Ansichten. Der Benutzer hat text und ein button. Ich verwenden möchten, die Taste zum Umschalten auf den zweiten Blick. Aber ich weiß nicht, wie das funktioniert mit sencha touch 2. Wenn ich drücken Sie auf den Knopf "UserView" (das ist die erste Ansicht), dann bekomme ich die folgende Fehlermeldung:

Nicht abgefangener Fehler: SYNTAX_ERR: DOM Exception 12

Dies ist im Grunde, wie mein code sieht jetzt:

app.js

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

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

Der Main-controller

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

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

Und die zwei Ansichten:

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

2. Ansicht

Ext.define('AM.view.New', {
    extend: 'Ext.Container',
    config: {
        fullscreen: true,
        html: 'w00t'
    }
});
InformationsquelleAutor w00 | 2012-01-17
  1. 8

    Hier ist Ihre Anwendung geschrieben, wie es sein sollte. Hier sind ein paar Notizen über die änderungen, die ich vorgenommen:

    • Sollten Sie rufen Ext.application statt Ext.setup bei der Erstellung der MVC-Anwendung.
    • Alle root-views definiert werden sollte, in Ihrem app.js.
    • Sie müssen nicht mehr um this.control() im Controller. Sie können einfach verwenden Sie die Steuerung, Konfiguration in der config-block.
    • Definieren Sie alle Ansichten in der views config von Ext.application.
    • Erstellen, anstatt den Blick in init, tun Sie es in launch. Dies ist Komponenten Hinzugefügt werden soll, in den Blick.

    app/view/User.js

    Ext.define('AM.view.User', {
    extend: 'Ext.Container',

    config: {
        items: [
            {
                xtype: 'button',
                text: 'New',
                id: 'new'
            }
        ],
        html: 'Testing<br />'
    }
});

    app/view/New.js

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

    app/controller/Main.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'));
    }
});

    app.js

    Ext.application({
    name: 'AM',

    //Include the only controller
    controllers: ['Main'],

    //Include all views
    views: ['User', 'New'],

    //Give the Ext.Viewport global instance a custom layout and animation
    viewport: {
        layout: {
            type: 'card',
            animation: {
                type: 'slide',
                direction: 'left',
                duration: 300
            }
        }
    }
});

    Ich auch empfehlen, dass Sie Auschecken die tollen guides über die Sencha Touch API Docs, sowie Check-out der Sencha Foren wie Sie sind sehr aktiv und sind eine große Quelle von Informationen.

    InformationsquelleAutor rdougan
Schreibe einen Kommentar