Render Ext.application in einem div

Question

Ich versuche, ein ExtJS4 Ext.application innerhalb unserer bestehenden Website Vorlage zu betreiben. Wir haben eine div #content, in die ich die Anwendung für die Entwicklung platzieren möchte. Wie rende ich die Anwendung in diesen Bereich, anstatt die vorhandene HTML-Seite zu ersetzen?

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

Sie benötigen einen anderen Behälter zu verwenden, als ein Ext.container.Viewport. Per definition Ext.container.Viewport wird immer das gesamte Browserfenster angezeigt.

Aus Dokumentation:

Das Ansichtsfenster macht sich auf den Dokumentenkörper, und sich automatisch Größen auf die Größe des Browser-Ansichtsfenster und verwaltet Änderungen der Fenstergröße. Es kann nur ein Viewport auf einer Seite erstellt werden.

Verwenden Sie einfach Ext.panel.Panel statt

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