Sencha ExtJS 将 HTML 控件附加到应用程序答案

【问题标题】：Sencha ExtJS Append HTML Control To ApplicationSencha ExtJS 将 HTML 控件附加到应用程序
【发布时间】：2014-12-01 23:24:30
【问题描述】：

所以我对 Sencha 和 Javascript 都是新手。在过去的几个小时左右，我一直坚持这一点。我试图将标准 HTML5 控件附加到 Sencha ExtJS 面板以在应用程序中使用。这是控件：

<input type="file" id="files" name="file" />

我找到了几个论坛，它们有点解释如何做到这一点，但我做错了这里是论坛解释的内容：

来自论坛：

Ext.DomHelper.append('parent-div', {tag: 'div', cls: 'new-div-cls', id: 'new-div-id'});

myEl = new Ext.Element(document.createElement('div'));

Ext.Get('par-div').appendChild(myEl);

这是我尝试过的：

Ext.onReady(function () 
    {           
        Ext.DomHelper.append('parent-div', {tag: 'div', cls: 'new-div-cls', id: 'new-div-id'});

        var c = Ext.Get('par-div');


        //var myEl = new Ext.Element(document.createElement('div'));
        //Ext.Get('par-div').appendChild(myEl.dom);

        //var mi = document.createElement("input");
        //mi.setAttribute('type', 'text');
        //mi.setAttribute('value', 'default');

        //var myEl = new Ext.Element(mi);

        //Ext.Get('par-div').appendChild(myEl);

        var viewport = Ext.create('Ext.container.Viewport', {
            layout: 'fit',
            items:  [myEl]
        });
    });

问题是我不知道在哪里添加它以及如何显示它。

总的来说，我只是想获取一个 HTML 5 输入控件并将其添加到我的 Sencha 应用程序中。

谢谢，

乔什

更新：

cpastore84，谢谢你的回复。所以我有一些代码几乎可以完成你所拥有的工作，现在的问题是它将输入字段放在我试图将其放入的面板后面：

Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            width: 500,
            height: 500,
            html: '<p>World!</p>',
            renderTo: Ext.getBody(),
            listeners:
            {
                render: function( sender, eOpts )
                {
                    var form = document.createElement('form');

                    var input = document.createElement('input');
                    input.name = 'parentNode';
                    input.type = 'file';

                    form.appendChild(input);

                    //var myEl = new Ext.Element(form);

                    var h = document.getElementById(sender.id);

                    h.appendChild(form);


                    alert(h);
                }
            }
        });

您可以看到输入框出现在面板呈现在顶部之前。我希望这很容易解决。有什么想法吗？

更新 2：

我也尝试过从元素中获取 innerHTML 并替换一个虚拟

与输入。它在技术上确实有效，但是当您将 innerHTML 设置为新修改的版本时，它会丢失所有原始格式。知道为什么只更改一行时会这样做吗？

【问题讨论】：

标签： javascript extjs

【解决方案1】：

这是一个JSFiddle 显示示例。脚本本身很简单。只需将父容器的 id 传递给 append 方法即可：

Ext.DomHelper.append('parent-div', {tag:'input', type:'file', id:'files', name:'file'});

您可以像这样将脚本添加到 html 文件的头部：

<html>
  <head>
    <script type="text/javascript">
      Ext.onReady(function() {
        Ext.DomHelper.append('parent-div', {tag:'input', type:'file', id:'files', name:'file'}); 
      });
    </script>
  </head>
  <body>
    <div id="parent-div"></div>
  </body>
</html>

然后它会在页面加载后运行。

更新

使用面板的 items 数组将字段添加到面板比尝试直接操作组件的 DOM 更容易。这是更新后的JSFiddle，显示了相关的项目数组：

items : [
    {
        xtype: 'filefield',
        name: 'file'
    }
]

更新 2

您可以通过将 DomSpec 传递给组件的 autoEl 配置来呈现任何标记：

{
  xtype : 'component',
  autoEl: {
    tag : 'input',
    type: 'file'
  }
}

查看更新后的JSFiddle。

【讨论】：

cpastore84，请在顶部查看我的更新。不知道怎么直接回复。谢谢
@JoshC 我更新了我的答案。如果您尝试将字段放在组件内，请使用 items 数组或调用组件的 add 方法。
cpastore84 使用文件域是我的第一直觉，但经过进一步阅读后，我发现文件域不会在本地读取文件内容，它必须往返于服务器，所以为什么我使用 HTML5 切换到输入文件，它允许您在客户端非常快速地读取内容。我尝试使用 .add 关键字添加我的 DOM 对象，但收到错误消息。有没有办法让我将新创建的 DOM 对象添加到组件中？
cpastore84，我给你留下了另一个更新。我希望我越来越近。谢谢。 @cpastore84
@JoshC 我认为 autoEl 配置就是你所追求的！

【解决方案2】：

大家好，感谢大家的支持。我能够弄清楚如何做到这一点，并想为每个人发布所有代码。不过，没有大家的帮助，我是做不到的。我希望这对其他人也有帮助。

var myPanal = Ext.create('Ext.panel.Panel', {
            title: 'Hello',
            width: 500,
            height: 500,
            renderTo: Ext.getBody(),
            items: 
            [
                {xtype: 'datefield',fieldLabel: 'Start date'}, 
                {xtype: 'panel', id: 'pnlTest', html: '<input type="file" id="files" width="500" name="file" />'},
                {xtype: 'button', width:75, height: 25, text: 'Read', margin: '5 0 0 5', handler:function()
                { 
                    var inputFiles = document.getElementById('files');

                    var file = inputFiles.files[0];
                    var start = 0;
                    var stop = file.size - 1;

                    var reader = new FileReader();

                    reader.onloadend = function(evt) 
                    {
                      if (evt.target.readyState == FileReader.DONE) 
                      { 
                        alert(evt.target.result);
                      }
                    };

                    var blob = file.slice(start, stop + 1);
                    reader.readAsBinaryString(blob);
                }}
            ]
        });

【讨论】：