CODEWITHSUNDEEP
javascriptextjs
harunB10
harunB10

Reputation: 5207

Ext JS header placement order

I want to have a button in panel header. This is a part of my code:

var dashboardPanel4 = Ext.create('Ext.Panel', {
        renderTo: Ext.getBody(),
        margin: '0 0 50 0',
        glyph: 'xf2a0@FontAwesome',
        layout: {
            type: 'table',
            columns: 4,
            tableAttrs: {
                width: '100%'
            }
        },
        defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:10px',
            border: 0
        },


        title: '<span class="requests" id="requests"><a href="#" style="">Requests</a></span>',

        header: {
            xtype: 'header',
            titlePosition: 0,
            defaults: {
                margin: '0 10px'
            },
            items: [
                {
                    xtype: 'button',
                    text: "Test Button",
                    tooltip: "Add something",
                    iconCls: 'add',
                    handler: Ext.bind(function() {
                    }, this)
                }
            ]
        },

But the problem is that fontawesome icon aligns into right position. Is there a way how to set FA icon before this title 'Requests'.

At the moment it is like this:

enter image description here

It should be: FA icon, Request and Button on right side.

Upvotes: 1

Views: 311

Answers (1)

pagep
pagep

Reputation: 3629

You want to have in the header the things align like this: <icon> <title> <other things>

I would do it with the config titlePosition: 1, which sets the title as a second item. Next thing what is needed is to just add the icon not by using glyph config but rather add it as own item in the header config.

So you would get something like this:

header: {
    xtype: 'header',
    titlePosition: 1,
    items: [{
        xtype: 'image',
        glyph: 'xf2a0@FontAwesome',
    }, {
        xtype: 'button',
        text: "Test Button",
        tooltip: "Add something",
        iconCls: 'add',
        handler: Ext.bind(function () {}, this)
    }]
},

Here is fiddle https://fiddle.sencha.com/#view/editor&fiddle/2h99 (the font awesome icons are not loaded in the example) but it should work in your own code.

Btw there might be more solutions to this problem.

Upvotes: 1

Related Questions