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

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

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

我发现了几个论坛，可以解释如何做到这一点，但我做错了什么，论坛解释如下：

来自论坛：

Ext.DomHelper.append（'parent-div'，｛tag:'div'，cls:'newdiv cls'，id:'newdiv id'｝）；

myEl=新的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]
        });
    }); 

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

总的来说，我只是想把一个HTML5输入控件添加到我的Sencha应用程序中。

谢谢，

Josh

更新：

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设置为新修改的版本时，它会丢失所有原始格式。你知道为什么只换一行就这么做吗？