我有一个由 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,选项卡也不会使用新的代码刷新。任何帮助将不胜感激。
如果您在iframe
中使用同源,那么您可以像下面这样直接使用:-
iframe.contentWindow.location.reload();
对于 ExtJS 3.x,您需要在获得 dom 后使用 iframe.src
进行刷新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&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()
}
});
}
}
}]
});
});
在这个小提琴中,我创建了与 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);
}
}
}]
});
}
});