Настройка сенсорной панели инструментов Sencha

Question

Я хочу создать пользовательскую панель инструментов, используя сенсорный сенсор Сенча. Используя Ext.Toolbar, я могу создать достойный заголовок экрана. Но мое требование заключается в том, чтобы разместить логотип бренда моей компании в центре строки заголовка, а не простой текст, как показано в приведенном ниже коде.

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

Кто-нибудь может мне помочь, как это сделать?

Answer 1

Попробуй это

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

Answer 2

Вы можете добавить изображение на панель инструментов, используя атрибут title. Вот некоторый модифицированный код из одного из моих приложений, делающий именно это. Кроме того, определив пользовательский класс, вы можете назначить пользовательский тип xtype и повторно использовать основную панель инструментов... В любом случае код должен иметь то, что вы ищете:

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