Dies ist ein einfaches Beispiel, um Ihnen zu zeigen, wie man ein Ansichtsfenster in ExtJs4 erstellen.
Der Viewport macht sich zu dem Dokument Körper, und Größen automatisch selbst auf die Größe des Browser-Viewport und verwaltet Fenstergröße. Es kann nur einen Viewport auf einer Seite erstellt werden.
Der Viewport bietet keine Scrollen, so Kind Panels im Viewport sollten zum Scrollen bieten bei Bedarf mit der AutoScroll config.
Anders als die Panel-Komponente von Ext JS, hat Viewport keinen Tbar Option. Sie können also nicht an eine Symbolleiste Komponente in Ansichtsfenster. Die beste Lösung ist nach Norden Region Ihrer Anwendung zu einer Symbolleiste zu konvertieren.
<! DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> ExtJS4 Viewport Beispiel </ title> <link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.0.2a/resources/css/ext-all.css" /> <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.0.2a/ext-all.js"> </ script> <script> Ext . Anwendung ({name: 'View Port', Start: function () {Ext.create ('Ext.container.Viewport', {Layout: 'Grenze', Artikel: [{Region: 'Norden', border: false, Höhe: 24, Tbar: [{text: 'Neu', menu: [{text: 'Add New X', handler: function () {/ / Hinzufügen eines Handlers auf "Add New X" Menüpunkt Ext.Msg.alert ('Alert', 'Add new X Element!');}}, {text: 'Add New Y'}]}, {text: 'Refresh'}, {text: 'Extras'}, '->', {text: 'Optionen', iconCls: 'options_icon', menu: [{text: "User Info"}, {text: 'Einstellungen'}, {text: 'Theme'}]}, {text: 'Hilfe' }, '-', {text: "Logout"}]}, {region: 'west', / / zusammenklappbar: true, Split: true, title: 'Navigation', Breite: 150 / / könnte ein TreePanel oder AccordionLayout für Navigations-Elemente}, {region: 'Süden', Höhe: 26, / * BBAR: [/ / Bottom Bar {xtype: 'Button', text: "Taste 1"}] * / dockedItems: [{xtype: "Symbolleiste ', Dock:' bottom ', Artikel: [{xtype:' Button ', text:' Show & Clear Warning ', handler: function () {var sb = Ext.getCmp (' basic-Statusleiste '); sb.setStatus ({text: 'Oops!', iconCls: 'X-Status-Fehler', klar: true / / AUTO-CLEAR nach einem festgelegten Intervall});}}, {xtype: 'Button', text: 'Zeige Besetzt' , handler: function () {var sb = Ext.getCmp ('basic-Statusleiste'); / / Stellen Sie die Statusleiste, um zu zeigen, dass etwas Verarbeitung: sb.showBusy ();}}, {xtype: 'Button', Text: 'Clear-Status', handler: function () {var sb = Ext.getCmp ('basic-Statusleiste'); / / einmal abgeschlossen sb.clearStatus ();}}, '-', 'plain text']} ]}, {Region: hat 'TabPanel', / / TabPanel selbst kein Titel: 'östlich', title: 'Ost-Panel', zusammenklappbar: true, split: true, width: 150}, {region: 'center', xtype activetab: 0, / / erste Registerkarte standardmäßig aktiv AutoScroll: true, Artikel: {. Titel: 'Standard-Tab', html: "Der erste Reiter \ 's Inhalt Andere können dynamisch" angefügt}}]});}} ); </ script> </ head> <body> </ body> </ html> 
