Ext Js - Global access to objects

I have too much dificulty on access extjs objects. This time I have a viewport with two items, a toolbar on the north and a tab panel on center region. I don't know how do I can access the tabpanel object to user his methods or whatever I want. This is my code:

Ext.onReady(function()
{
    var tabs = Ext.getCmp('dynamic-tabs');
    var viewport = new Ext.Viewport(
    {
        layout: 'border',
        renderTo: document.body,
        items: [
        {
            region: 'north',
            height: 25,
            xtype: 'toolbar',
            items: [

            {
                xtype: 'button', text: 'Início', iconCls: 'home',
                handler:function() {
                    tabs.add({
                        title: 'Início',
                        html: 'Tab Body',
                        closable:true
                    }).show();
                }
            },
            {
                xtype: 'button', text: 'Sistema', iconCls: 'sistema',
                menu: {
                    items: [

                        {
                            text: 'Usuários',
                            iconCls: 'usuario',
                            handler: function(){
                                tabs.add({
                                    title: 'Usuários',
                                    html: 'Tab Body',
                                    closable:true,
                                    autoLoad: 'form.php'
                                }).show();
                            }
                        },
                        {
                            text: 'Configurações',
                            iconCls: 'sistema',
                            handler: function(){
                                tabs.add({
                                    title: 'Configurações',
                                    html: 'Tab Body',
                                    closable:true,
                                    autoLoad: 'form.php'
                                }).show();
                            }
                        },'-',
                        {
                            text: 'Sair',
                            iconCls: 'logoff',
                            handler: function(){
                                tabs.add({
                                    title: 'Sair',
                                    html: 'Tab Body',
                                    closable:true,
                                    autoLoad: 'form.php'
                                }).show();
                            }
                        }
                    ]
                }
            } 
            ]
        }
        ,
        {
            region: 'center',
            xtype: 'tabpanel',
            id: 'dynamic-tabs',
            items: [
                {title: 'Início', autoLoad: 'iframe.php?url=form.php', active:true}
            ]
        }]
    });
    tabs.setActiveTab(0); // Throws: tabs is undefined
});

For exemple, I want to uset setActiveTab() in any place of my code. It's basic but I realy don'开发者_开发百科t know =S

Edit: I changed the code setting the var tabs once on the top. Even if I put this tabs.setActiveTab(0); on any handler of any button, it's throws the same error. Note that Ext version is 3.4!!

I got it. I have to call var tabs = Ext.getCmp('dynamic-tabs'); always before call any method. I can't set it on a global var. That was my mistake.

You can get a global reference to it. The problem is that your are doing a lookup before 'dynamic-tabs' exists.

Ext.onReady(function(){
**var tabs;**
var viewport = new Ext.Viewport(
{
    layout: 'border',
    renderTo: document.body,
    items: [
    {
        region: 'north',
        height: 25,
        xtype: 'toolbar',
        items: [

        {
            xtype: 'button', text: 'Início', iconCls: 'home',
            handler:function() {
                tabs.add({
                    title: 'Início',
                    html: 'Tab Body',
                    closable:true
                }).show();
            }
        },
        {
            xtype: 'button', text: 'Sistema', iconCls: 'sistema',
            menu: {
                items: [

                    {
                        text: 'Usuários',
                        iconCls: 'usuario',
                        handler: function(){
                            tabs.add({
                                title: 'Usuários',
                                html: 'Tab Body',
                                closable:true,
                                autoLoad: 'form.php'
                            }).show();
                        }
                    },
                    {
                        text: 'Configurações',
                        iconCls: 'sistema',
                        handler: function(){
                            tabs.add({
                                title: 'Configurações',
                                html: 'Tab Body',
                                closable:true,
                                autoLoad: 'form.php'
                            }).show();
                        }
                    },'-',
                    {
                        text: 'Sair',
                        iconCls: 'logoff',
                        handler: function(){
                            tabs.add({
                                title: 'Sair',
                                html: 'Tab Body',
                                closable:true,
                                autoLoad: 'form.php'
                            }).show();
                        }
                    }
                ]
            }
        } 
        ]
    },{
        region: 'center',
        xtype: 'tabpanel',
        id: 'dynamic-tabs',
        items: [
            {title: 'Início', autoLoad: 'iframe.php?url=form.php', active:true}
        ],
        **listeners : {
            'render' : function(){
                tabs = this;
            }
        }**
    }],

});
tabs.setActiveTab(0); // Throws: tabs is undefined

});

Add a listener that waits for "dynamic-tabs" to be rendered, and then set it globally.