在 div 中渲染 Ext.application [英] Render Ext.application in a div

问题描述

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

I am trying to run an ExtJS4 Ext.application inside our existing website template. We have a div #content, into which I want to place the application for development. How do I render the application into this area, rather than replacing the existing html page?

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

推荐答案

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

You need to use other container than a Ext.container.Viewport. By definfiton Ext.container.Viewport will always take the entire browser window.

来自文档:

视口将自身呈现到文档正文中，并自动将自身调整为浏览器视口的大小并管理窗口大小调整.一个页面中只能创建一个视口.

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

这篇关于在 div 中渲染 Ext.application的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！