时间戳

首页 > 解决方案 > extjs：模态对话框html dom准备好后调用函数

extjs - extjs：模态对话框html dom准备好后调用函数

问题描述

我有一个要求，在单击按钮时我必须带来一个 extjs 模态对话框，并且在模态对话框中的 html 准备好后，我想捕获对话框的 html 内容中存在的 DOM 元素。下面是html内容：

<html>
<head>
<link rel="stylesheet" type="text/css" href="<path to extjs installation folder>\extjs\resources\css\ext-all.css"/>
<script type="text/javascript" src="<path to extjs installation folder>\extjs\adapter\ext\ext-base.js"></script>
<script type="text/javascript" src="<path to extjs installation folder>\extjs\ext-all.js"></script>
<script>
    Ext.onReady(function(){
        var button = Ext.get('modal-btn');
        button.on('click', showModal);
    });

    var showModal = function(){
        var win;
        if(!win){
            win = new Ext.Window({
                modal:true,
                layout:'fit',
                width:500,
                height:300,
                closeAction:'hide',
                plain: true,
                items: new Ext.Panel({
                    frame:true,
                    collapsible:true,
                    items:[{
                        html:'<object id="renderedObjId" width=760 height=350></object>'
                    }]
                }), 

                buttons: [{
                    text: 'Close',
                    handler: function(){
                        win.hide();
                    }
                }]
            });
        }
        win.show(this);
    }
</script>


</head>
<body>
<form name="modalDialogForm">
    <input type="button" id="modal-btn" value="Click"/><br /><br />
</form>
</body>
</html>

我想捕获使用renderObjId表示的模态对话框的 html 内容中存在的对象。我没有更新这个 html 的内容。任何建议都会非常有帮助。

标签： extjs

解决方案

所以你想获取html内容。您可以使用afterrender事件Ext.panel.Panel并在处理程序中获取您的元素。在FIDDLE中有两种方式。

items: new Ext.Panel({
    frame: true,
    collapsible: true,
    items: [{
         html: '<object id="renderedObjId" width=760 height=350></object>'
    }],
    listeners: {
        afterrender: function (cmp) {
            var htmlOb;
            // #1
            htmlOb = document.getElementById('renderedObjId');
            console.log(htmlOb.innerHTML);
            console.log(htmlOb.innerText);
            console.log(htmlOb.textContent);
            // #2
            htmlOb = Ext.get('renderedObjId').dom;
            console.log(htmlOb.innerHTML);
            console.log(htmlOb.innerText);
            console.log(htmlOb.textContent);
        }
    }
}),

推荐阅读