2

选择组合框选项后，如何重新渲染此 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
4

2 回答 2

4

我会建议一种不同的方法来创建 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>');
    }
}
于 2012-10-23T18:39:41.257 回答
1

该render()方法仅处理由 ExtJS 创建（呈现）的 HTML。你自己创建了那个 iframe，所以你必须自己控制它。您应该能够像这样从组件中获取 DOM 元素：

var the_iframe = cmp.getEl().dom;
the_iframe.contentWindow.location.reload();
于 2012-10-23T02:54:31.513 回答