按下输入 Extjs 时刷新标签面板内容

Question

我有一个由 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 dom 后需要使用iframe.src 进行刷新。如果您提供了一些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&source=s_q&hl=en&geocode=&q=eiffel+tower&aq=&sll=41.228249,-80.661621&sspn=11.149099,23.269043&ie=UTF8&hq=&hnear=Eiffel+Tower,+5+Avenue+Anatole+France,+75007+Paris,+%C3%8Ele-de-France,+France&t=h&ll=48.858186,2.294512&spn=0.002471,0.00456&z=17&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);
                    }
                }
            }]
        });
    }
});