Question

如果选择了一个组合框选项，我该如何重新渲染这个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'
});

更新：2012年10月23日：

这还不行：

            listeners: {
                select: function (combo) {
                    cmp.autoEl.src = '/' + combo.getValue() + '/2nd Iteration.htm';
                    var the_iframe = cmp.getEl().dom;
                    the_iframe.contentWindow.location.reload();
                }
            }  // listeners

Answer 1

我建议使用不同的方法来创建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>'
});

然后在监听器中执行此操作以更新它...

listeners: {
    select: function (combo) {
        cmp.update('<iframe src="/' + combo.getValue() + '/2nd Iteration.htm"></iframe>');
    }
}

Answer 2

render()方法仅处理ExtJS创建（呈现）的HTML。您自己创建了iframe，因此您必须自己控制它。您应该能够从Component获取DOM元素，如下所示：

var the_iframe = cmp.getEl().dom;
the_iframe.contentWindow.location.reload();

ExtJS 4：如何重新渲染Ext.Component iframe？

2 个答案: