2014-01-13 8 views
6

Ich frage mich, ob es eine Methode zum Erstellen eines Extjs-Containers oder eines Panels mit dem Inhalt eines bereits vorhandenen Elements im Seiten-DOM gibt. Die Seite enthält bereits das benötigte Markup in einem div, aber ich möchte es in einen extjs-Container einfügen und es in das verwaltete Extjs-Layout einfügen.ExtJS: Umbrechen eines bereits vorhandenen div in den Extjs-Container

Wenn Sie fragen, warum: Ich benutze ASP.Net MVC Templating zum Erstellen von Seiten Markup und möchte es auf diese Weise beibehalten, anstatt die DOM-Client-Seite in Javascript oder XTemplates erstellen. Ich möchte den HTML-Code auf herkömmliche Weise erstellen und dann clientseitigen Extjs-Code verwenden, um einige Container und Layout-Manager für sie einzurichten.

+0

Wir haben es auf diese Weise in unsere Web-Anwendung vor . Aber als die Komplexität der Benutzeroberfläche zunahm, mussten wir diesen Ansatz aufgeben. Bis zu 5 Gitter und ein oder zwei Fenster sind erträglich, aber nicht viel mehr. Wenn Ihre Seiten einfach sind, sollten Sie in Ordnung sein. –

Antwort

6

Sie können die Konfigurationseigenschaft contentEl verwenden. In dieser Konfiguration können Sie ein vorhandenes HTML-Element oder die ID eines vorhandenen HTML-Elements angeben, das als Inhalt für die Komponente verwendet werden soll.

HTML innerhalb des Körpers:

<div id="panelContent"> 
    Content inside panelContent div 
</div> 

ExtJS-Panel mit div als Inhalt verwendet:

Ext.create('Ext.panel.Panel', { 
    title: 'Test Panel', 
    width: 200, 
    contentEl: 'panelContent', 
    renderTo: Ext.getBody() 
}); 

Fiddle mit anschauliches Beispiel: https://fiddle.sencha.com/#fiddle/2ji

Verwandte Themen