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之外的其他容器。通过definfiton Ext.container.Viewport将始终占据整个浏览器窗口。

来自文档：

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

在div中渲染Ext.application

1 个答案: