customizing-sencha touch-Symbolleiste

Möchte ich zum erstellen einer benutzerdefinierten Symbolleiste mithilfe von sencha touch. Mit Ext.Toolbar, ich bin in der Lage zu schaffen, eine anständige Bildschirm-Titelleiste. Aber meine Anforderung ist meine Firma das image der Marke-logo in der Mitte der Titelleiste nicht der einfache text durch den folgenden code. 

{
   xtype : 'toolbar',
   docked: 'top',
   title: 'My Toolbar'
}

kann mir jemand helfen, wie dies zu tun ?

  • Haben Sie versucht, so etwas wie Titel:'<img src="..." />' ? Oder mit einem div mit einem background-image ?
InformationsquelleAutor Nilanchal | 2012-08-08
  1. 8

    Versuchen, diese

    {
    xtype: 'toolbar',
    docked: 'top',
    layout: {
        type: 'vbox',
        align: 'center',
        pack: 'center'
    },
    items: [
        {
            xtype: 'image',
            width:218,
            height:44,
            src:'http://cdn.sstatic.net/careers/gethired/img/careers2-ad-header-so-crop.png'
        }
    ]
}
    • das wird nicht funktionieren, da es keine xtype als Bild
    InformationsquelleAutor blessenm
  2. 1

    Können Sie fügen Sie das Bild in Ihre Symbolleiste, indem Sie mithilfe des title-Attributs. Hier finden Sie einige modified-code aus einer meiner apps tun genau dies. Auch durch die Definition einer eigenen Klasse können Sie einen benutzerdefinierten xtype und Wiederverwendung der Haupt-Symbolleiste... so oder so sollte der code haben, was Sie suchen:

    Ext.define('myApp.view.Maintoolbar', {
    extend: 'Ext.Toolbar',
    xtype: 'maintoolbar',
    requires: [
        //any necessary requirements
    ],
    config: {
        docked: 'top',
        title: '<div style="text-align:center;"><img src="images/logoSmall.png" width="185" height="36" alt="Company Name"></div>',
        padding: '5 5 5 5',
        items: [{
            iconCls: 'arrow_down',
            iconMask: true,
            ui: 'normal',
            //left: true,
            text: 'Menu',
            action: 'openmenu'
        },{
            xtype: 'spacer'
        },{
            xtype: 'button',
            iconCls: 'arrow_down',
            iconMask: true,
            ui: 'normal',
            align: 'right',
            text: 'Logout',
            action: 'logout'
        }]
    },
    initialize: function() {
        this.callParent();
    }
});
    InformationsquelleAutor Jeff Wooden
Schreibe einen Kommentar