html - 在 div 中渲染 Ext.application

Question

我正在尝试在我们现有的网站模板中运行 ExtJS4 Ext.application。我们有一个 div #content，我想在其中放置用于开发的应用程序。我如何将应用程序渲染到这个区域，而不是替换现有的 html 页面？

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.container.Viewport', {
            layout: 'fit',
       //   renderTo: Ext.Element.get('#content')  doesn't work
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});

Answer 1

您需要使用除 Ext.container.Viewport 之外的其他容器。根据定义，Ext.container.Viewport 将始终占据整个浏览器窗口。

来自文档:

The Viewport renders itself to the document body, and automatically sizes itself to the size of the browser viewport and manages window resizing. There may only be one Viewport created in a page.

只需使用 Ext.panel.Panel 即可

Ext.application({
    name: 'HelloExt',
    launch: function() {
        Ext.create('Ext.panel.Panel', {
            layout: 'fit',
            renderTo: Ext.get('content')
            items: [
                {
                    title: 'Hello Ext',
                    html : 'Hello! Welcome to Ext JS.'
                }
            ]
        });
    }
});