html - Render Ext.application en un div

css extjs

Question

Estoy intentando ejecutar una aplicación Ext.application Ext Ext.application dentro de nuestra plantilla de sitio web existente. Tenemos un contenido div #content , en el que quiero colocar la aplicación para el desarrollo. ¿Cómo presento la aplicación en esta área, en lugar de reemplazar la página html existente?

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

Necesita usar otro contenedor que Ext.container.Viewport . Definiton Ext.container.Viewport siempre tomará toda la ventana del navegador.

De la documentación:

La ventana gráfica se muestra en el cuerpo del documento y se ajusta automáticamente al tamaño de la ventana del navegador y gestiona el cambio de tamaño de la ventana. Solo puede haber una ventana gráfica creada en una página.

Simplemente use Ext.panel.Panel en Ext.panel.Panel lugar

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