refresh tabpanel contents on press of enter Extjs - 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.

Answer 1

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&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()
}
});
}
}
}]
});
});
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);
}
}
}]
});
}
});