Saving several tab panels with one button

Question

I have three seperate tab panels with each being a table in my database. What i'm trying to do is that on a click of a button is save the content of all the three tabs in the database at the same time. I managed to get the PK "Aid" of the current active tab, however when i try to access the second inactive tab B with window.frames["frm_B"] and alerting the result, i'm getting undefined. Any help would be much appreciated.

tabPanel = Ext.create('Ext.tab.Panel', {
        region: 'center',
        activeTab: 0,
        autoScroll: true,
        tbar: [{
            xtype: 'button',
            text: 'Save',
            handler:function(){saveForm("frm_A", save);}
        }],
        items: [
                {   
                    id:"panel_A",
                    html: "<iframe src= '"+A_url +"' width='100%' height='100%' id='frm_A' name='frm_A' frameborder=0 />",
                },{
                    id:"panel_B",
                    html: "<iframe src='"+B_url+"'  width='100%' height='100%' id='frm_B' name='frm_B' frameborder=0 />",
                },{
                    id:"panel_C",
                    html: "<iframe src= '"+C_url+"' width='100%' height='100%' id='frm_C' name='frm_C' frameborder=0 />",
                }]
        });


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

    function save(record){

        var Aid = record.getKey();
        var doc =  window.frames["frm_B"];
        alert(doc);
        try {
            doc.RECORD.getField("A_ID").setRealValue(Aid);
            doc.RECORD.update(closeAndRefresh, viewExtError);

        }
        catch(e){
            showError(e);
        }

    }

Possible duplicate of [Accessing an iframe inside a tab panel extjs4.2](http://stackoverflow.com/questions/34831078/accessing-an-iframe-inside-a-tab-panel-extjs4-2) — CD.., Jan 17 '16 at 18:50

Sergey Novikov · Accepted Answer · 2016-01-17T20:43:46.870

2

I guess your problem is that your <iframe name='frm_B'> is not rendered (added to DOM) when you try to get it with window.frames["frm_B"].

When you create tab panel with Ext.create('Ext.tab.Panel', {}); you just create JS object, not all of its items: [] added to DOM immediatelly.

A Container's child Components are rendered by that Container's layout manager when the Container is first rendered.

For example tabpanel tabs added to DOM when you first time open that tab.

Fiddle to illustrate it

Solution for your question depends on your code actually, but as workaround you can use .render() method of tab panel child panels...

edited Jan 17 '16 at 20:43

answered Jan 17 '16 at 20:11

Sergey Novikov

4,096
7
33
59

Thank you for illustrating the problem. Do you mind telling where exactly to use .render() ? please – mikeb Jan 17 '16 at 20:46
Well, as I said it depends of your code. You use `iframe` instead of common ExtJS components so I guess your logic is not common. I added two buttons to illustrate usage of `.render()` method and how you can manually render it via layout manager, but its far from final solution. – Sergey Novikov Jan 17 '16 at 21:00
1

`deferredRender` config on the tab panel. – Evan Trimboli Jan 17 '16 at 21:34
@SergeyNovikov dear any chance to apply your solution on the creation of the tab pannel? – mikeb Jan 17 '16 at 21:47
@EvanTrimboli i added config : { deferredRender : true }, – mikeb Jan 17 '16 at 21:47
`deferredRender: false` and its property of `Ext.tab.Panel`, not its child items - check docs http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.tab.Panel-cfg-deferredRender – Sergey Novikov Jan 17 '16 at 21:58

Saving several tab panels with one button

1 Answers1