Question

我有一个要求，单击按钮时必须带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>

我想捕获使用 renderedObjId 表示的模式对话框的html内容中存在的对象。我尚未更新此html的内容。任何建议都会很有帮助。

Answer 1

因此，您想获取html内容。您可以使用Ext.panel.Panel的afterrender事件，并在处理程序中获取元素。 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);
        }
    }
}),

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

1 个答案: