html - 在 div 中渲染 Ext.application

Question

我正在尝试Ext.application在我们现有的网站模板中运行 ExtJS4。我们有一个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将始终占据整个浏览器窗口。

从文档：

视口将自身呈现给文档主体，并自动调整自身大小以适应浏览器视口的大小并管理窗口大小调整。一个页面中可能只创建一个视口。

改用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.'
                }
            ]
        });
    }
});