Ansichtsfenster Anwenden Bedingte Symbolleiste mit Sencha Touch

Ich werde MVC-route mit Sencha. Ich habe einen Viewport panel initialisiert, ähnlich wie das twitter-Beispiel:

/**
* @author Jeff Blake
*/
Ext.regApplication('App', {
defaultTarget: 'viewport',
defaultUrl   : 'Viewport/index',
name         : 'App',
icon         : "mobile/public/resources/images/icon.png",
phoneStartupScreen : "mobile/public/resources/images/phone_startup.png",
//useHistory   : false,
//useLoadMask : true,

launch: function() {
    Ext.Viewport.init();
    Ext.Viewport.onOrientationChange();

    this.viewport = new App.Viewport({
        application: this
    });

    Ext.dispatch({
        controller: 'User',
        action    : 'index'
    });
}
});

/**
* @class App.Viewport
* @extends Ext.Panel
* This is a default generated class which would usually be used to initialize your     application's
* main viewport. By default this is simply a welcome screen that tells you that the app was 
* generated correctly.
*/
App.Viewport = Ext.extend(Ext.Panel, {
id        : 'viewport',
layout    : 'card',
fullscreen: true,
cardSwitchAnimation: 'slide',

initComponent: function() {

    Ext.apply(this, {

        dockedItems: [
            {
                //Top Bar
                dock   : 'top',
                xtype  : 'toolbar',
                title  : 'Whats Good',
                items: [
                    {
                        text: 'About'
                    },

                ]
            }


        ]
    });


App.Viewport.superclass.initComponent.apply(this, arguments);
}

});
Ext.reg('App.Viewport', App.Viewport);

Neuen Code:

if (!App.viewport.getDockedComponent(homeBar)) {
        var homeBar = new App.HomeBar();
        App.viewport.addDocked(homeBar);
    }

Will ich auch können, bedingt gelten DockedItems (Symbolleisten) basierend auf welche Art von panel ist aktuell gerenderte Ansichtsfenster. ZB: einen für Login, Startseite, detail-Bildschirm, etc.

Ich habe versucht, mit Ext.apply(App.Viewport, { dockedItems: [App.LoginBar]});
Aber das funktioniert nicht. Aktuell funktioniert das hinzufügen der Symbolleiste, um das aktuell gerenderten Panel, und wenn er auf Vollbild, aber leider die übergänge und Verhalten sich die Dinge unheimlich, wie die Struktur ist

Panel
Toolbar
    Panel
    Toolbar
    /end Panel
/end Panel

Hat jemand einen Vorschlag?

InformationsquelleAutor JBlake | 2011-01-18

1

Um den Verweis auf Ihre Anwendung viewport, können Sie über den 'App' - namespace, der ist automatisch erstellt, indem Sie die name-Eigenschaft des regApplication config.

So können Sie Ihre toolbar-button tun dies zum Beispiel:
```
{
    text: 'About',
    handler: function() {
        App.viewport.getDockedItems()[0].setTitle('Pressed!');
    }
},
```
Denen machen würde, die Titel zu ändern, wenn Sie die Taste drücken.

Aber jetzt habe ich besser verstehen, was es ist Sie versuchen zu tun, empfehle ich Sie nicht andocken einer einzigen, dynamisch-verändert-Symbolleiste, um die äußere viewport, sondern fügen Sie die einzelnen Symbolleisten, um die einzelnen (Karte) Platten drin. So gelangen Sie auf die Folie schön zu 😉
- Das ist es genau. Dank James. Und ja, das ist es, was ich bin derzeit dabei aber die slide animation funktioniert nicht ordnungsgemäß, so hoffte ich, würde dieser Ansatz zu lösen, dass - wie es mehr Sinn macht das andocken von Symbolleisten, die Arbeit auf mehrere Karten, um den viewport.
- Hmmm, das ist ein Anliegen. Die Symbolleisten, die Platten gleiten soll genauso gut!
InformationsquelleAutor James Pearce
2

Programmgesteuert hinzufügen eines angedockten Artikel, würde ich empfehlen, mit
```
viewport.addDocked(loginBar);
```
Methoden wie diese sind weit besser als zu versuchen, zu aktualisieren, die ursprüngliche Konfiguration der Komponente.

Dann gibt es auch einen .removeDocked () - Methode, um es wieder abzulegen.

Stellen Sie außerdem sicher, Sie sind der Umgang mit Instanzen der Komponenten, nicht zu versuchen, die Aktualisierung Ihrer Klasse.
- Ich bin immer TypeError: Object #<ein HTMLDivElement> hat keine Methode "addDocked'
- Meine app.js sieht wie folgt aus:
- Ext.regApplication('App', { defaultTarget: 'viewport', defaultUrl : 'Viewport/index', name : 'App', icon : "mobile/public/resources/images/icon.png", phoneStartupScreen : "mobile/public/resources/images/phone_startup.png", //useHistory : false, //useLoadMask : true, Start: function() { Ext.Viewport.init(); Ext.Viewport.onOrientationChange(); dies.viewport = new App.Viewport({ application: this }); Ext.Versand({ controller: 'User', action : 'index' }); } });
- Seine etwas zu tun, mit der eine Instanz der Komponente: ich habe versucht, die Dinge, kann aber nicht die App, erstellen Sie eine Instanz der App.Viewport, weisen Sie es als das Ansichtsfenster, und klicken Sie dann auf die Instanz zugreifen, programmgesteuert.
- Ja, App.Viewport ist eine Komponente 'Klasse' und Sie brauchen, um zu instanziieren, dass es tatsächlich platzieren Sie die Komponente auf dem Bildschirm (Sie müssen). Aber verwenden Sie die addDocked () - Methode für diese Instanz auf: dieser.viewport.addDocked(loginBar) ... wo loginBar ist auch eine Instanz (von der App.LoginBar Komponente)
- Wenn Sie ein update von der OQ zur post alle Ihre JavaScript-ich denke, es wäre einfach zu fix it up 😉
- Dank James. Ich aktualisiert die Frage. Ich verstehe genau, was du sagst, aber ich habe Probleme beim erstellen einer Instanz von viewport und dann Einstellung, wie der viewport, also kann ich die addDocked-Methode auf.
InformationsquelleAutor James Pearce

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.