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