Alingment della barra degli strumenti Sencha touch v2

Question

Quando creo una barra degli strumenti come sotto il titolo è fuori luogo a destra dell'ultimo pulsante, qualche idea su come risolverlo?

        {
        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'
        }

Answer 1

Stavo anche combattendo con la barra degli strumenti. Poi ho scoperto il navigationbar. Il titolo è al centro. Con un pulsante allineato a sinistra e a destra. (vedi proprietà align)

 {
    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'
        }
    ]
}  

Answer 2

Subito dopo aver risposto, ho trovato l'attributo "centrato" e ho guardato la creazione dell'elemento del titolo di Sencha, quindi dimenticalo sopra e usa nella tua configurazione:

var myToolbar = new Ext.Toolbar({
                docked : 'top',
                title: {
                  title: 'my Title',
                  centered: true 
                },
                items : []
            });

Answer 3

In Sencha 2 non esiste un elemento del titolo "speciale", viene creato come elemento semplice negli "elementi". Quindi in futuro, puoi semplicemente aggiungerlo nel posto giusto direttamente posizionando la configurazione sulla barra ancorata:

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

Solo con distanziatore è nel mezzo.

Answer 4

Si afferma chiaramente nei documenti che Navigationbar è una classe privata per uso interno da parte del framework http://docs.sencha.com/touch/2-0/#!/api/ext.navigation.bar e l'attributo centrato metterato da ANJ non funziona come previsto (almeno nell'ultima versione).

Secondo questo post http://www.sencha.com/forum/showthread.php?161082-p3-toolbar-title-position-broken-when-spacers-control-butt-positioning&p=691928 È semplicemente un bug che il titolo non è centrato e dovremmo aspettare la prossima versione. Nel frattempo potresti utilizzare NavigationBar, se necessario.

Answer 5

Se vuoi sfruttare qualcosa di simile a come i titoli nella barra degli strumenti si comportano di ext.navigation.bar. Vedi Ext.titlebar http://docs.sencha.com/touch/2-0/#!/api/ext.titlebar

Questa classe gestisce cose come i titoli lunghi per te aggiungendo automaticamente ellissi e il titolo è sempre centrato in orizzontale.

Answer 6

Non c'è più un NavigationBar componente che è pubblico. È semplicemente usato internamente da NavigationView. Dovresti mai Usa questo.

Invece, dovresti usare Ext.titlebar. Questo ti consente di centrare il title config e usa anche il align Proprietà sugli elementi (normalmente pulsanti) per allinearli a sinistra oa destra.

Ha anche un supporto integrato quando il titolo è troppo lungo o qualsiasi oggetto è troppo ampio. Limiterà automaticamente la lunghezza di tutti gli articoli a una certa larghezza e aggiungerà ellisse al titolo se necessario.

Qui c'è un semplice esempio:

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);