在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 。通过definefiton 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屋！