Question

I am trying to vertically center some text in an ExtJS Panel. I have this as a kludge but I want to know the right way?

var instructions = new Ext.Panel(
    {
        height: 40,
        items: [
            {
                html: '<br>To access an Aircraft Profile, please highlight a row in the table and select the N-Number hyperlink displayed in the summary below the table'
            }]
    });

Here is what I ended up implementing using the answer below:

var instructions = new Ext.Panel(
    {
        height: 40,
        layout: 'hbox',
        layoutConfig: {
            align: 'middle'
        },
        items: [
            {
                xtype: 'displayfield',
                value: 'To access an Aircraft Profile, please highlight a row in the table and select the N-Number hyperlink displayed in the summary below the table'
            }]
    });

Answer 1

I think you should be able to set your panels layout as ‘hbox’ and use pack ‘center’ or alternatively nest a container within the panel with hbox layout and pack center.