Sencha Touch v2 Symbolleiste Titel alingment

Wenn ich erstellen Sie eine Symbolleiste wie unten der Titel ist fehl am Platz rechts neben dem letzten button, irgendwelche Ideen wie man es beheben?

        {
        xtype: 'toolbar',
        docked: 'top',
        title: 'Chat',
        items: [{
            xtype: 'button',
            text: 'Places',
            ui: 'back',
            id: 'backToPlaces'
        },
        {
            xtype: 'spacer'
        },
        {
            xtype: 'button',
            text: 'People',
            ui: 'forward',
            id: 'toProfiles'
        }

Sencha Touch v2 Symbolleiste Titel alingment

InformationsquelleAutor Osman Alpay | 2011-12-04
  1. 4

    War ich auch im Kampf mit der Symbolleiste. Dann entdeckte ich die navigationbar.
    Der Titel ist in der Mitte. Mit einer Schaltfläche, die Links ausgerichtet und rechts. (siehe align-Eigenschaft)

     {
    docked: 'top',
    xtype: 'navigationbar',
    title: 'Chat',
    items: [
        {
            xtype: 'button',
            ui: 'back',
            action: 'back',
            text:'BACK',
            itemId: 'backButton'
        },
        {
            xtype: 'button',
            ui: 'decline',
            action: 'cancel',
            text:'Cancel',
            itemId: 'cancelButton',
            align : 'right'
        }
    ]
}
    • danke, ich wünschte, Sie hatte es in den Beispielen.
    • Diese Komponente Bestand in einer frühen preview-version von Sencha Touch 2, aber nicht mehr existiert. Verwenden Sie stattdessen die Ext.TitleBar Komponente in Sencha Touch 2.0. Mehr Informationen here.
    • Wahr. Dieses Frage-und Antwort-war für ein beta-release. Es gibt auch ein 'navigationview' in der neuen Version. Das vereinfacht die navigation mit einem zurück-button für Sie.
    InformationsquelleAutor Renato H.
  2. 4

    kurz nach, antwortete dieser, ich fand den "zentriert" - Attribut und schaute auf die Erstellung von title-element der sencha, also einfach nur vergessen, diesen oben und verwenden Sie Sie in Ihre config:

    var myToolbar = new Ext.Toolbar({
                docked : 'top',
                title: {
                  title: 'my Title',
                  centered: true 
                },
                items : []
            });
    • Ich habe festgestellt, dass dies sehr viel zuverlässiger als die navigationbar.
    InformationsquelleAutor aNj
  3. 0

    In Sencha 2 es gibt keine "speziellen" title " - element, es ist als einfaches element in der "items". Also ich Zukunft, können Sie einfach fügen Sie es an richtige Stelle direkt, indem die config auf Ihrem gedockten bar:

    var myToolbar = new Ext.Toolbar({
                docked : 'top',
                items : [{
                    xtype: 'spacer',
                },{
                    xtype: 'title',
                    title : 'Hello World'
                },{
                    xtype: 'spacer',
                }]
            });

    Nur mit Abstandshalter ist es in der Mitte.

    • Für mich (v1) ergibt sich: Uncaught Attempting to create a component with an xtype that has not been registered: title
    InformationsquelleAutor aNj
  4. 0

    Es ist die klare Aussage des docs, dass NavigationBar ist eine private Klasse für die interne Verwendung durch das framework http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.Bar und zentriert Attribut metioned von anj funktioniert nicht wie erwartet (zumindest in der neuesten Version).

    Laut diesem post http://www.sencha.com/forum/showthread.php?161082-PR3-Toolbar-title-position-broken-when-spacers-control-button-positioning&p=691928 es ist einfach ein bug, dass der Titel nicht zentriert ist und wir sollten warten, für die nächste Version. In der Zwischenzeit könnten Sie navigationbar, wenn Sie benötigen.

    InformationsquelleAutor Palo
  5. 0

    Wenn Sie wollen, zu nutzen, die etwas ähnlich wie die Titel in der Symbolleiste verhält sich der Ext.navigation.Bar. finden Sie die Ext.Titelleiste http://docs.sencha.com/touch/2-0/#!/api/Ext.Titelleiste

    Diese Klasse behandelt Dinge wie der lange Titel für Sie durch automatisches hinzufügen von Ellipsen und der Titel ist immer horizontal zentriert.

    InformationsquelleAutor Truong-An Thai
  6. 0

    Es ist nicht länger ein NavigationBar Komponente ist die öffentlichkeit. Es ist einfach intern durch NavigationView. Sollten Sie nie verwenden Sie diese.

    Verwenden Sie stattdessen Ext.Titelleiste. Dies ermöglicht es Ihnen, um die Mitte der title config und auch die align Eigenschaft, die auf Elemente (normalerweise Tasten) richten Sie Sie nach Links oder rechts.

    Sondern bietet auch integrierte Unterstützung, wenn der Titel zu lang ist, oder Gegenstände, die zu weit sind. Es wird automatisch begrenzen Sie die Länge aller Elemente, um eine bestimmte Breite, und fügen Sie eine ellipse um den Titel, wenn nötig.

    Hier ist ein einfaches Beispiel:

    var titleBar = Ext.create('Ext.TitleBar', {
    docked: 'top',
    title: 'Navigation',
    items: [
        {
            iconCls: 'add',
            iconMask: true,
            align: 'left'
        },
        {
            iconCls: 'home',
            iconMask: true,
            align: 'right'
        }
    ]
});

Ext.Viewport.add(titleBar);
    InformationsquelleAutor rdougan
Schreibe einen Kommentar