Renderowanie Ext.application w div

Question

Próbuję uruchomić ExtJS4 Ext.application wewnątrz naszego istniejącego szablonu strony. Mamy numer div #content, w którym chcę umieścić aplikację do programowania. Jak mogę renderować aplikację w tym obszarze, zamiast zastępować istniejącą stronę 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

Musisz użyć innego pojemnika niż Ext.container.Viewport. Przez definfiton Ext.container.Viewport zawsze zajmie całe okno przeglądarki.

Z dokumentacji:

rzutni renderuje się do treści dokumentu, a rozmiary się automatycznie do rozmiaru widoku przeglądarki i zarządza zmiany rozmiaru okna. Może istnieć tylko jedna rzutnia utworzona na stronie.

Wystarczy użyć Ext.panel.Panel zamiast

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