Home/ Questions/Q 8833209
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T08:43:32+00:00

When I dock a button to right in the toolbar, it starts touching the

  • 0

When I dock a button to right in the toolbar, it starts touching the upper border of the toolbar like this:

enter image description here

Here is my code:

Ext.define('MyApp.view.MyFormPanel', {
    extend: 'Ext.form.Panel',

    config: {
        items: [
            {
                xtype: 'textfield',
                label: 'Field'
            },
            {
                xtype: 'textfield',
                label: 'Field'
            },
            {
                xtype: 'toolbar',
                docked: 'bottom',
                items: [
                    {
                        xtype: 'button',
                        ui: 'back',
                        text: 'Back'
                    },
                    {
                        xtype: 'button',
                        docked: 'right',
                        ui: 'forward',
                        text: 'Continue'
                    }
                ]
            }
        ]
    }

});
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I used to have the same problem, but I solved it! You use, just like I did, xtype: 'toolbar' to dock your buttons. What you have to use is

    xtype: 'titlebar'

    Now, if you have some buttons in your titlebar, just set the align property, like this:

     xtype: 'titlebar',
 items: [
      {
         xtype: 'button',
         ui: 'back',
         text: 'Back',
         align: 'left'
      },
      {
         xtype: 'button',
         ui: 'forward',
         text: 'Continue',
         align: 'right'
      }
 ]

    Check Sencha Docs for more info: Ext.TitleBar

    • 0