Ext Js - Global access to objects

Question

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!!

But you already access the tabpanel in 2 of your handlers: var tabs = Ext.getCmp('dynamic-tabs'); tabs.callAnyMethod(); — deviousdodo
nope. I changed the first tab variable name to tabs1 and then called tabs1.setActiveTab(0) but it throws tabs1 is not defined — user898741
I don't really understand - what does changing the name have to do with anything? You're saying that the code in the handlers doesn't work? Because that's accessing the tabpanel. Try to add this line: tabs.setActiveTab(0); at the end of any handler and it should work. — deviousdodo
But I want to access it inside or outside the handler e.g for an external file. I tried this: Ext.onReady(function() { var tabs = Ext.getCmp('dynamic-tabs'); var viewport = new Ext.Viewport( { // Supressed code }); tabs.setActiveTab(0); }); But shows me the same error. — user898741
If by external file you mean something loaded in an iframe, that's not possible. Otherwise, please rephrase your question, or better yet, simply create an example on jsfiddle. — deviousdodo

Unknown Unknown · Accepted Answer · 2011-10-10T16:14:40

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.

Ext Js - Global access to objects

2 Answers