refresh tabpanel contents on press of enter Extjs

Question

I have a tabpanel consisting of 3 tabs. 3rd tab shows external vendor contents. I also have a text box and enter button. based on value entered in text box, I need to refresh contents of 3rd tab.

{//second tab end, third tab starts
    id: 'test',
    title: "Test3",
    layout: "fit",
    html: iframebody,
    listeners: {
        'render': function(){
            var e = document.getElementsByTagName("head")[0];
            var s = document.createElement("script");
            s.type = "text/javascript";
            s.src = msaJs;
            e.appendChild(s);
        },
        'show': function(panel){
            //var tickerValue1 = Ext.getCmp('tabpanel').getActiveTab().html;
            theurl = 'http://example.com?ticker=' +ticker+';
            iframebody = '<iframe width=100% height=100% src='+theurl+'></iframe>';
            var tab1= Ext.getCmp('tabpanel').setActiveTab(2);
            alert(Ext.getCmp('tabpanel').getActiveTab().html);
            Ext.getCmp('tabpanel').getActiveTab().html=iframebody;
            alert(Ext.getCmp('tabpanel').getActiveTab().html);
            Ext.getCmp('tabpanel').getActiveTab().getUpdater().refresh();
    },//show listener ended

Now, when I press enter, tab doesnt get refreshed with new ticker eventhough the alert message shows updated html for the tab. Any help would be highly appreciated.

Narendra Jadhav Narendra Jadhav · Accepted Answer · 2018-02-01T07:38:58

If you are using same origin in iframe then you can use directly like below :-

iframe.contentWindow.location.reload();

For ExtJS 3.x, you need to use iframe.src for refresh after getting iframe dom. If you have provided some id to iframe then you can access like below

 Ext.get('iframe')//example id:'iframe'

In this FIDDLE, I have created a demo using TabPanel and KeyNav. I hope this will help you or guide you to achieve your requirement.

Code Snippet ExtJS 3.X

Ext.onReady(function () {
    var tabs = new Ext.TabPanel({
        height: window.innerHeight,
        fullscreen: true,
        renderTo: document.body,
        activeTab:0,
        items: [{
            title: 'Tab 1',
            html: 'tab1'
        }, {
            title: 'Tab 2',
            html: 'tab2'
        }, {
            title: 'Tab 3',
            itemId: 'tab3',
            padding: '20 20 0 20',
            items: [new Ext.BoxComponent({
                id: 'iframe',
                height: '100%',
                width: '100%',
                autoEl: {
                    tag: 'iframe',
                    src: 'https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=eiffel+tower&amp;aq=&amp;sll=41.228249,-80.661621&amp;sspn=11.149099,23.269043&amp;ie=UTF8&amp;hq=&amp;hnear=Eiffel+Tower,+5+Avenue+Anatole+France,+75007+Paris,+%C3%8Ele-de-France,+France&amp;t=h&amp;ll=48.858186,2.294512&amp;spn=0.002471,0.00456&amp;z=17&amp;output=embed',
                    style: 'width: 100%; border: none'
                }
            })],
            bbar: [{
                text: 'Refresh UxIframe',
                id: 'refresh',
                handler: function () {
                    Ext.get('iframe').dom.src += '';
                }
            }],
            listeners: {
                afterrender: function (panel) {
                    panel.keynav = new Ext.KeyNav(Ext.getBody(), {
                        scope: panel,
                        enter: function () {
                            Ext.getCmp('refresh').handler()
                        }
                    });

                }
            }
        }]
    });
});

Here In this FIDDLE I have created same demo with 6.5 version. So for new version it will also help you/other folks. In newer versions here component uxiframe and uxiframe have load() method. So we can use this and refresh the iframe.

Code Snippet ExtJS 6.X

Ext.application({
    name: 'Fiddle',
    requires: ['Ext.ux.IFrame'],
    launch: function () {
        Ext.create('Ext.tab.Panel', {
            height: window.innerHeight,
            fullscreen: true,
            renderTo: document.body,
            activeTab:0,
            items: [{
                title: 'Tab 1',
                html: 'Tab 1'
            }, {
                title: 'Tab 2',
                html: 'Tab 2'
            }, {
                title: 'Tab 3',
                itemId: 'tab3',
                padding: '20 20 0 20',
                items: {
                    xtype: 'uxiframe',
                    height: '100%',
                    width: '100%',
                    src: 'https://docs.sencha.com/extjs/6.5.2/index.html'
                },
                bbar: [{
                    text: 'Refresh UxIframe',
                    itemId: 'refresh',
                    handler: function () {
                        var uxiframe = this.up('#tab3').down('uxiframe');
                        uxiframe.load(uxiframe.src);
                    }
                }],
                listeners: {
                    afterrender: function (panel) {
                        panel.keynav = Ext.create('Ext.util.KeyNav', {
                            target: Ext.getBody(),
                            scope: panel,
                            enter: function () {
                                this.down('#refresh').fireHandler()
                            }
                        });
                        panel.focus(true);
                    }
                }
            }]
        });
    }
});

refresh tabpanel contents on press of enter Extjs

1 Answers