How to dynamically add tbar in tab bar in ExtJs

Question

I need to add tbar dynamically in second tab of tabpanel(not want to add items dynamically in tbar but need to add tbar based on some condition otherwise it should bot be added), below is my code:

var wind = Ext.create("Ext.Window", {
                        modal: true,
                        scrollable: true,
                        items: [
                            {
                                margin: '0 0 0 10',
                                xtype: 'tabpanel',
                                reference: "MainTab",
                                plain: true,
                                resizeTabs: true,
                                flex: 1,
                                border: 3,
                                items: [
                                    {
                                        title: "Messages",
                                        rootTab: true,
                                        items: [{
                                           // item
                                        }] }, {    
                                        title: "Alarms",
                                        items: [{
                                                 //item,
                                        }],
                                        tbar: // need to add this tbar dynamically
                                        }] 

I have tried with initComponent using dockedItems but not working for me.

Answer 1

The fiddle below is using modern but should be similar in classic. It is just calling the init function on the controller.

Here is a fiddle

Editor version of fiddle