Question

我有一个由3个标签组成的tabpanel。第3个标签显示外部供应商内容我还有一个文本框并输入按钮。根据在文本框中输入的值，我需要刷新第3个选项卡的内容。

{//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

现在，当我按回车键时，选项卡不会刷新新的自动收报机，而警报信息显示标签的更新html。任何帮助都将受到高度赞赏。

Answer 1

如果您在iframe中使用相同的来源，则可以直接使用如下： -

iframe.contentWindow.location.reload();

对于ExtJS 3.x ，您需要在获取iframe.src dom后使用iframe进行刷新。如果您向id提供了一些iframe，那么您可以访问以下内容

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

在此 FIDDLE 中，我使用TabPanel和KeyNav创建了一个演示。我希望这可以帮助您或指导您实现您的要求。

代码段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()
                        }
                    });

                }
            }
        }]
    });
});

此处 FIDDLE 我创建了6.5版本的相同演示版。所以对于新版本，它也会帮助你/其他人。在较新版本中，组件uxiframe和uxiframe具有load()方法。所以我们可以使用它并刷新iframe。

代码段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);
                    }
                }
            }]
        });
    }
});

按下输入Extjs刷新tabpanel内容

1 个答案: