ExtJs 5.1-将带有javascript的html放在Ext.panel.panel中_Javascript_Html_Extjs

ExtJs 5.1-将带有javascript的html放在Ext.panel.panel中

javascript html extjs

ExtJs 5.1-将带有javascript的html放在Ext.panel.panel中,javascript,html,extjs,Javascript,Html,Extjs,我有一个html/javascript文件，我从（my_site.html）获得： <!doctype html> <html> <head> <title>Proper Title</title> <style> #selectedFiles img { max-width: 125px; max-height: 125px; float: left;

我有一个html/javascript文件，我从（my_site.html）获得：

<!doctype html>
<html>
<head>
<title>Proper Title</title>
<style>
    #selectedFiles img {
        max-width: 125px;
        max-height: 125px;
        float: left;
        margin-bottom:10px;
    }
</style>
</head>
<body>
    <form id="myForm" method="post" enctype="multipart/form-data">
        Files: <input type="file" id="files" name="files" multiple accept="image/*"><br/>
        <div id="selectedFiles"></div>
        <input type="submit">
    </form>
        <script>
    var selDiv = "";
    document.addEventListener("DOMContentLoaded", init, false);
    function init() {
        document.querySelector('#files').addEventListener('change', handleFileSelect, false);
        selDiv = document.querySelector("#selectedFiles");
    }
    function handleFileSelect(e) {
        if(!e.target.files || !window.FileReader) return;
        selDiv.innerHTML = "";
        var files = e.target.files;
        var filesArr = Array.prototype.slice.call(files);
        filesArr.forEach(function(f) {
            if(!f.type.match("image.*")) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                var html = "<img src=\"" + e.target.result + "\">" + f.name + "<br clear=\"left\"/>";
                selDiv.innerHTML += html;               
            }
            reader.readAsDataURL(f); 
        });
    }
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <!-- jquery imports -->
        <script type="text/javascript" language="javascript" src="/jquery/jquery-1.11.3.js"></script>

        <!-- ext imports -->
        <script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
        <link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
        <script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

        <script type ="text/javascript">    
            Ext.onReady(function(){             
                var my_panel = Ext.create('Ext.panel.Panel', {
                    frame: true,
                    title: 'my_panel',
                    renderTo: Ext.getBody(),
                    listeners: {
                    render: function(panel) {
                        panel.body.update($.ajax({type: "GET", url: './converter_panel_card_0.html', async: false}).responseText, true);
                    }
                }
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>


正名
#所选文件img{
最大宽度：125px；
最大高度：125px；
浮动：左；
边缘底部：10px；
}
文件：

var selDiv=“”；
document.addEventListener（“DOMContentLoaded”，init，false）；
函数init（）{
document.querySelector（“#files”）.addEventListener（'change'，handleFileSelect，false）；
selDiv=document.querySelector（“selectedFiles”）；
}
功能手柄文件选择（e）{
如果（！e.target.files | |！window.FileReader）返回；
selDiv.innerHTML=“”；
var files=e.target.files；
var filesArr=Array.prototype.slice.call（文件）；
forEach（函数（f）{
如果（！f.type.match（“image.*））{
返回；
}
var reader=new FileReader（）；
reader.onload=函数（e）{
var html=”“+f.name+”
；
selDiv.innerHTML+=html；
}
reader.readAsDataURL（f）；
});
}

我想在一个文件中使用这个html/javascript文件

描述了将html/javascript文件与Ext.panel.panel组合的两种可能方法，但在我的案例中，这两种方法都不起作用。问题是：html表单确实显示，但javascript没有执行

这里是方法1，使用：


Ext.onReady（函数（）{
var my_panel=Ext.create（'Ext.panel.panel'{
框架：对，
标题：“我的小组”，
renderTo:Ext.getBody（），
加载器：{
渲染器：“html”，
脚本：是的，
url:“./my_site.html”，
自动加载：正确
}
});
});

这里是第2号进近：

<!doctype html>
<html>
<head>
<title>Proper Title</title>
<style>
    #selectedFiles img {
        max-width: 125px;
        max-height: 125px;
        float: left;
        margin-bottom:10px;
    }
</style>
</head>
<body>
    <form id="myForm" method="post" enctype="multipart/form-data">
        Files: <input type="file" id="files" name="files" multiple accept="image/*"><br/>
        <div id="selectedFiles"></div>
        <input type="submit">
    </form>
        <script>
    var selDiv = "";
    document.addEventListener("DOMContentLoaded", init, false);
    function init() {
        document.querySelector('#files').addEventListener('change', handleFileSelect, false);
        selDiv = document.querySelector("#selectedFiles");
    }
    function handleFileSelect(e) {
        if(!e.target.files || !window.FileReader) return;
        selDiv.innerHTML = "";
        var files = e.target.files;
        var filesArr = Array.prototype.slice.call(files);
        filesArr.forEach(function(f) {
            if(!f.type.match("image.*")) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function (e) {
                var html = "<img src=\"" + e.target.result + "\">" + f.name + "<br clear=\"left\"/>";
                selDiv.innerHTML += html;               
            }
            reader.readAsDataURL(f); 
        });
    }
    </script>
</body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <!-- jquery imports -->
        <script type="text/javascript" language="javascript" src="/jquery/jquery-1.11.3.js"></script>

        <!-- ext imports -->
        <script type="text/javascript" language="javascript" src="/ext-5.1.1/build/ext-all-debug.js"></script>
        <link rel="stylesheet" type="text/css" href="/ext-5.1.1/build/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
        <script type="text/javascript" src="/ext-5.1.1/build/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>

        <script type ="text/javascript">    
            Ext.onReady(function(){             
                var my_panel = Ext.create('Ext.panel.Panel', {
                    frame: true,
                    title: 'my_panel',
                    renderTo: Ext.getBody(),
                    listeners: {
                    render: function(panel) {
                        panel.body.update($.ajax({type: "GET", url: './converter_panel_card_0.html', async: false}).responseText, true);
                    }
                }
                });
            });
        </script>
    </head>
    <body>
    </body>
</html>


Ext.onReady（函数（）{
var my_panel=Ext.create（'Ext.panel.panel'{
框架：对，
标题：“我的小组”，
renderTo:Ext.getBody（），
听众：{
渲染：函数（面板）{
update（$.ajax（{type:“GET”，url:'./converter\u panel\u card\u 0.html'，async:false}）.responseText，true）；
}
}
});
});

我想知道为什么这两种方法都不起作用，以及如何让html/javascript文件像中一样执行，区别在于它位于Ext.panel.panel中

为什么两种方法都不起作用

因为html/JavaScript文件中的JavaScript代码依赖于事件，在Ext.panel.panel甚至可以开始加载该文件之前，该事件始终已被触发。这就是为什么从未执行

init（）

如何使用不同之处在于它位于Ext.panel.panel内

没有直接的方法。你必须：

修改html/JavaScript文件中的JavaScript代码，确保在将文件加载到Ext.panel.panel时执行

init（）。例如，使您的init（）
在足够表单元素填充的微小延迟后执行：setTimeout（init，50）；或


使用iframe在其中加载html/javascript文件，以便触发DOMContentLoaded
事件。例如，作为Ext.panel.panel中唯一适合项的组件：


Ext.create（'Ext.panel.panel'{
要求：[
“Ext.ux.IFrame”
],
renderTo:Ext.getBody（），
宽度：400，
身高：400，
布局：“适合”，
项目：{
xtype:'uxiframe'，
src:'file.html'
}
});
您是否尝试过在第一种方法中使用url作为“my_site.html”而不是“/my_site.html”？如果您没有足够仔细地阅读我的文章：表单正在显示（因此指向html的路径必须正确），但是html文件中的javascript没有被执行。你能举个例子说明你的方法吗？我不知道如何集成第一种方法，但第二种方法与Iframe是有效的。第二种方法对你有效，而不是第一种方法，这实际上是很好的。第一个不是那么干净，因为它直接将外来html/javascript混合到ExtJS空间中。