CODEWITHSUNDEEP
javascriptextjsextjs4.2
mikeb
mikeb

Reputation: 727

Access the values of different tabs in extjs4.2

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();*/



        }

Upvotes: 0

Views: 554

Answers (1)

Sergey Novikov
Sergey Novikov

Reputation: 4196

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();

Upvotes: 2

Related Questions