Access the values of different tabs in extjs4.2

Question

I have created a tab panel in extjs4.2 , and what i'm trying to do is access the values in the form of a tab while being in the other tab. For example the user is on tab A and have access to the values in tab B. How can access the other tab?

tabPanel = Ext.create('Ext.tab.Panel', {
        region: 'center',
        activeTab: 0,
        autoScroll: true,
        items: [
                {   
                    id:"panel_A",
                    title: "${tr.A}",
                    html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />",
                },{
                    id:"panel_B",
                    title: "${tr.B}",
                    //disabled:tabs_status,
                    //hidden:hidden,
                    html: "<iframe src='"+B_url +"'  width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />",
                }]
        });


    viewport = new Ext.Viewport({
        layout:'border',
        items:[tabPanel]
    });

In this part on a click of a button i'm able to access the current frame.

new Ext.Toolbar.Button({
                        id:"btn_show",
                        text: "${tr.Show}",
                        tooltip: "${tr.Show}",
                        handler: function(){view(frmid);}
                    }),

     function view(frmid) {

             var A_key =   window.frames[frmid].RECORD.getKey();
            /* var B_key = window.frames[...].RECORD.getField("HISTORY").getRealValue();*/



        }

score 2 · Accepted Answer · edited May 23 '17 at 12:15

To select Ext.ComponentView you can use Ext.ComponentQuery.

Provides searching of Components within Ext.ComponentManager (globally) or a specific Ext.container.Container on the document with a similar syntax to a CSS selector. Returns Array of matching Components, or empty Array.

More about selectors for DOM Elements and ExtJS Components in this answer.

Basic example of how you can access another tab of a tabpanel:

Working fiddle

// If you button is child / parent button of a tabpanel its efficient to use down() / up() methods
// Since we get button component reference as listener function arguments we can select parent tabpanel component,
// and after it select child component panel (because panel is default xtype for tabpanel items and textfield after it
panelBTextFieldValue = button.up('tabpanel').down('panel[id=panel_B] textfield[name=panel_B_text_field]').getValue();

// If your button is somewhere else you can use Ext.ComponentQuery.query()
panelBTextFieldValue = Ext.ComponentQuery.query('tabpanel[id=myPanel] panel[id=panel_B] textfield[name=panel_B_text_field]').getValue();

// or just if selector textfield[name=panel_B_text_field] specific enought for whole your application
panelBTextFieldValue = Ext.ComponentQuery.query('textfield[name=panel_B_text_field]').getValue();

If its not exactly what you want let me know and I'll update fiddle. — Sergey Novikov, Jan 16 '16 at 21:09
dear this is exactly what i want.. But can you please explain to me the concept behind this line of code: panelBTextFieldValue = button.up('tabpanel').down('panel[id=panel_B] textfield[name=panel_B_text_field]').getValue() I mean why i'm specifying it's a textfield — mikeb, Jan 16 '16 at 21:24
Updated fiddle and answer, if somesing else is unclear feel free to ask, I'll try to help. — Sergey Novikov, Jan 16 '16 at 21:25
In ExtJS component selectors is quite similat to CSS selectors, instead of HTML tag name you have to use component alias(xtype), thus we select textfied with `textfield[name=panel_B_text_field]` or we can jsut use `textfield` or `[name=panel_B_text_field]` if its specific enought. — Sergey Novikov, Jan 16 '16 at 21:29

Access the values of different tabs in extjs4.2

1 Answers1