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

Posted 2023-02-26

【中文标题】按下输入 Extjs 时刷新标签面板内容

【英文标题】：refresh tabpanel contents on press of enter Extjs

【发布时间】：2018-01-26 18:11:44

【问题描述】：

我有一个由 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，标签也不会用新的代码刷新。任何帮助将不胜感激。

【参考方案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);
                    
                
            ]
        );
    
);