Render Ext.application in a div

Question

Sto tentando di eseguire un ExtJS4 Ext.application all'interno del nostro modello di sito Web esistente. Abbiamo uno div #content, nel quale voglio posizionare l'applicazione per lo sviluppo. Come faccio a rendere l'applicazione in quest'area, piuttosto che a sostituire la pagina html esistente?

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

È necessario utilizzare un contenitore diverso da uno Ext.container.Viewport. Con il modello Ext.container.Viewport verrà sempre visualizzata l'intera finestra del browser.

Da documentazione:

la finestra si rende al corpo del documento, e automaticamente si dimensioni alle dimensioni della finestra del browser e gestisce il ridimensionamento della finestra. Ci può essere solo una Viewport creata in una pagina.

Basta usare Ext.panel.Panel invece

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