在div中渲染Ext.application

本文介绍了在div中渲染Ext.application的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在我们现有的网站模板中运行一个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.

从文档：

只需使用 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！