javascript ExtJS 4：如何重新渲染 Ext.Component iframe？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13022751/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS 4: How do I Re-render Ext.Component iframe?
提问by MacGyver
How can I re-render this Ext.Component when a combo box option is selected?
选择组合框选项后，如何重新渲染此 Ext.Component？
var searchForm = Ext.create('Ext.form.Panel', {
width: 320,
style: 'margin: 20px',
renderTo: 'SearchPanel',
style: {
position: 'fixed',
top: '0px',
left: '865px'
},
items: [{
xtype: 'combo',
width: 300,
labelAlign: 'right',
fieldLabel: 'Subject Area',
store: subjectAreaStore,
valueField: 'id',
displayField: 'value',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
selectOnFocus: true,
value: 'Account',
listeners: {
select: function (combo) {
cmp.autoEl.src = '/' + combo.getValue() + '/2nd Iteration.htm';
alert(cmp.autoEl.src);
cmp.render(); // this does not work!
}
} // listeners
}]
});
// create the cmp
var cmp = Ext.create('Ext.Component', {
title: 'Data Models',
style: {
width: '100%',
height: '750px'
},
autoEl : {
tag : 'iframe',
src : '/Account/2nd Iteration.htm'
},
renderTo: 'models'
});
Update: 10/23/2012:
更新：2012 年 10 月 23 日：
This isn't working yet:
这还没有工作：
listeners: {
select: function (combo) {
cmp.autoEl.src = '/' + combo.getValue() + '/2nd Iteration.htm';
var the_iframe = cmp.getEl().dom;
the_iframe.contentWindow.location.reload();
}
} // listeners
回答by Stephen Tremaine
I would suggest a different approach to creating the iframe. Just use the html property of a component and write the html yourself instead of using the autoel feature (never done this with a component, only a container but it should work the same)...
我建议采用不同的方法来创建 iframe。只需使用组件的 html 属性并自己编写 html 而不是使用 autoel 功能（从未使用组件完成此操作，仅使用容器但它应该工作相同）...
var cmp = Ext.create('Ext.Component', {
title: 'Data Models',
style: {
width: '100%',
height: '750px'
},
renderTo: 'models',
html: '<iframe src="/Account/2nd Iteration.htm"></iframe>'
});
Then do this in the listener to update it...
然后在侦听器中执行此操作以更新它...
listeners: {
select: function (combo) {
cmp.update('<iframe src="/' + combo.getValue() + '/2nd Iteration.htm"></iframe>');
}
}
回答by AndreKR
The render()method only deals with HTML that was created (rendered) by ExtJS. You created that iframe yourself, so you have to control it yourself. You should be able to get the DOM element from the Component like this:
该render()方法仅处理由 ExtJS 创建（呈现）的 HTML。您自己创建了该 iframe，因此您必须自己控制它。您应该能够像这样从组件中获取 DOM 元素：
var the_iframe = cmp.getEl().dom;
the_iframe.contentWindow.location.reload();
